0.70.2

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

.babelrc

@@ -14,7 +14,6 @@
     ]
   ],
   "plugins": [
-    "lodash",
     "styled-components",
     [
       "@babel/plugin-proposal-decorators",

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
   working_directory: ~/outline
   docker:
-    - image: cimg/node:14.19
+    - image: cimg/node:18.12
     - image: cimg/redis:5.0
     - image: cimg/postgres:14.2
       environment:
@@ -20,6 +20,7 @@ defaults: &defaults
     SMTP_FROM_EMAIL: hello@example.com
     AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
     AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
+    NODE_OPTIONS: --max-old-space-size=8000
 
 executors:
   docker-publisher:
@@ -93,13 +94,18 @@ jobs:
           command: yarn test:server --forceExit
   bundle-size:
     <<: *defaults
+    environment:
+      NODE_ENV: production
     steps:
       - checkout
       - restore_cache:
           key: dependency-cache-{{ checksum "package.json" }}
       - run:
-          name: build-webpack
-          command: yarn build:webpack
+          name: build-vite
+          command: yarn vite:build
+      - run:
+          name: Send bundle stats to RelativeCI
+          command: npx relative-ci-agent
   build-image:
     executor: docker-publisher
     steps:

.env.sample

@@ -99,7 +99,7 @@ OIDC_USERINFO_URI=
 OIDC_USERNAME_CLAIM=preferred_username
 
 # Display name for OIDC authentication
-OIDC_DISPLAY_NAME=OpenID
+OIDC_DISPLAY_NAME=OpenID Connect
 
 # Space separated auth scopes.
 OIDC_SCOPES=openid profile email
@@ -139,6 +139,10 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http
 
+# Configure lowest severity level for server logs. Should be one of
+# error, warn, info, http, verbose, debug and silly
+LOG_LEVEL=info
+
 # For a complete Slack integration with search and posting to channels the
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
@@ -162,14 +166,11 @@ SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
-SMTP_REPLY_EMAIL=
+SMTP_FROM_EMAIL=hello@example.com
+SMTP_REPLY_EMAIL=hello@example.com
 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

.eslintrc

@@ -3,6 +3,7 @@
   "parserOptions": {
     "sourceType": "module",
     "extraFileExtensions": [".json"],
+    "project": "./tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
     }
@@ -25,10 +26,25 @@
   "rules": {
     "eqeqeq": 2,
     "curly": 2,
+    "no-console": "error",
+    "arrow-body-style": ["error", "as-needed"],
+    "spaced-comment": "error",
     "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
     "es/no-regexp-lookbehind-assertions": "error",
+    "react/self-closing-comp": ["error", {
+      "component": true,
+      "html": true
+    }],
+    "@typescript-eslint/no-floating-promises": "error",
+    "@typescript-eslint/await-thenable": "error",
+    "@typescript-eslint/no-misused-promises": [
+      "error",
+      {
+        "checksVoidReturn": false
+      }
+    ],
     "@typescript-eslint/no-unused-vars": [
       "error",
       {

.github/ISSUE_TEMPLATE/config.yml

@@ -1,8 +1,8 @@
 blank_issues_enabled: false
 contact_links:
   - name: Feature request
-    url: https://github.com/outline/outline/discussions/new
+    url: https://github.com/outline/outline/discussions/new?category=ideas
     about: Request a feature to be added to the project
   - name: Self hosting questions
-    url: https://github.com/outline/outline/discussions/new
+    url: https://github.com/outline/outline/discussions/new?category=self-hosting
     about: Ask questions and discuss running Outline with community members

.github/dependabot.yml

@@ -7,5 +7,9 @@ version: 2
 updates:
   - package-ecosystem: "npm" # See documentation for possible values
     directory: "/" # Location of package manifests
+    open-pull-requests-limit: 5
+    ignore:
+      - dependency-name: "*"
+        update-types: ["version-update:semver-major"]
     schedule:
       interval: "weekly"

.github/workflows/calibreapp-image-actions.yml

@@ -24,8 +24,13 @@ on:
   workflow_dispatch:
   schedule:
     - cron: "00 20 * * 0"
+permissions: {}
 jobs:
   build:
+    permissions:
+      contents: write
+      pull-requests: write #  to comment on pull request
+
     name: calibreapp/image-actions
     runs-on: ubuntu-latest
     # Only run on main repo on and PRs that match the main repo.

.gitignore

@@ -11,4 +11,4 @@ fakes3/*
 .idea
 *.pem
 *.key
-*.cert
+*.cert

.jestconfig.json

@@ -1,11 +1,9 @@
 {
+  "workerIdleMemoryLimit": "0.75",
   "projects": [
     {
       "displayName": "server",
-      "verbose": false,
-      "roots": [
-        "<rootDir>/server"
-      ],
+      "roots": ["<rootDir>/server", "<rootDir>/plugins"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1"
@@ -14,33 +12,22 @@
         "<rootDir>/__mocks__/console.js",
         "<rootDir>/server/test/env.ts"
       ],
-      "setupFilesAfterEnv": [
-        "<rootDir>/server/test/setup.ts"
-      ],
+      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
       "testEnvironment": "node",
       "runner": "@getoutline/jest-runner-serial"
     },
     {
       "displayName": "app",
-      "verbose": false,
-      "roots": [
-        "<rootDir>/app"
-      ],
+      "roots": ["<rootDir>/app"],
       "moduleNameMapper": {
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
         "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
       },
-      "modulePaths": [
-        "<rootDir>/app"
-      ],
-      "setupFiles": [
-        "<rootDir>/__mocks__/window.js"
-      ],
-      "setupFilesAfterEnv": [
-        "<rootDir>/app/test/setup.ts"
-      ],
+      "modulePaths": ["<rootDir>/app"],
+      "setupFiles": ["<rootDir>/__mocks__/window.js"],
+      "setupFilesAfterEnv": ["<rootDir>/app/test/setup.ts"],
       "testEnvironment": "jsdom",
       "testEnvironmentOptions": {
         "url": "http://localhost"
@@ -48,37 +35,25 @@
     },
     {
       "displayName": "shared-node",
-      "verbose": false,
-      "roots": [
-        "<rootDir>/shared"
-      ],
+      "roots": ["<rootDir>/shared"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js"
-      ],
-      "setupFilesAfterEnv": [
-        "<rootDir>/shared/test/setup.ts"
-      ],
+      "setupFiles": ["<rootDir>/__mocks__/console.js"],
+      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
       "testEnvironment": "node"
     },
     {
       "displayName": "shared-jsdom",
-      "verbose": false,
-      "roots": [
-        "<rootDir>/shared"
-      ],
+      "roots": ["<rootDir>/shared"],
       "moduleNameMapper": {
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
         "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
       },
-      "setupFiles": [
-        "<rootDir>/__mocks__/window.js"
-      ],
+      "setupFiles": ["<rootDir>/__mocks__/window.js"],
       "testEnvironment": "jsdom",
       "testEnvironmentOptions": {
         "url": "http://localhost"

Dockerfile

@@ -5,7 +5,11 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:16.14.2-alpine3.15 AS runner
+FROM node:18-alpine AS runner
+
+RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
+
+LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 
 ARG APP_PATH
 WORKDIR $APP_PATH

Dockerfile.base

@@ -1,9 +1,10 @@
 ARG APP_PATH=/opt/outline
-FROM node:16.14.2-alpine3.15 AS deps
+FROM node:18-alpine AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 COPY ./package.json ./yarn.lock ./
+COPY ./patches ./patches
 
 RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean

Makefile

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

README.md

@@ -7,26 +7,26 @@
   <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>
+  <a href="https://circleci.com/gh/outline/outline" rel="nofollow"><img src="https://circleci.com/gh/outline/outline.svg?style=shield"></a>
   <a href="http://www.typescriptlang.org" rel="nofollow"><img src="https://img.shields.io/badge/%3C%2F%3E-TypeScript-%230074c1.svg" alt="TypeScript"></a>
   <a href="https://github.com/prettier/prettier"><img src="https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat" alt="Prettier"></a>
   <a href="https://github.com/styled-components/styled-components"><img src="https://img.shields.io/badge/style-%F0%9F%92%85%20styled--components-orange.svg" alt="Styled Components"></a>
   <a href="https://translate.getoutline.com/project/outline" alt="Localized"><img src="https://badges.crowdin.net/outline/localized.svg"></a>
 </p>
 
-This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com).
+This is the source code that runs [**Outline**](https://www.getoutline.com) and all the associated services. If you want to use Outline then you don't need to run this code, we offer a hosted version of the app at [getoutline.com](https://www.getoutline.com). You can also find documentation on using Outline in [our guide](https://docs.getoutline.com/s/guide).
 
 If you'd like to run your own copy of Outline or contribute to development then this is the place for you.
 
 # Installation
 
-Please see the [documentation](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/) for running your own copy of Outline in a production configuration.
+Please see the [documentation](https://docs.getoutline.com/s/hosting/) for running your own copy of Outline in a production configuration.
 
 If you have questions or improvements for the docs please create a thread in [GitHub discussions](https://github.com/outline/outline/discussions).
 
 # Development
 
-There is a short guide for [setting up a development environment](https://app.getoutline.com/share/770a97da-13e5-401e-9f8a-37949c19f97e/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
+There is a short guide for [setting up a development environment](https://docs.getoutline.com/s/hosting/doc/local-development-5hEhFRXow7) if you wish to contribute changes, fixes, and improvements to Outline.
 
 ## Contributing
 

app.json

@@ -3,13 +3,7 @@
   "description": "Open source wiki and knowledge base for growing teams",
   "website": "https://www.getoutline.com/",
   "repository": "https://github.com/outline/outline",
-  "keywords": [
-    "wiki",
-    "team",
-    "node",
-    "markdown",
-    "slack"
-  ],
+  "keywords": ["wiki", "team", "node", "markdown", "slack"],
   "success_url": "/",
   "formation": {
     "web": {
@@ -94,7 +88,7 @@
     },
     "OIDC_DISPLAY_NAME": {
       "description": "Display name for OIDC authentication",
-      "value": "OpenID",
+      "value": "OpenID Connect",
       "required": false
     },
     "OIDC_SCOPES": {
@@ -188,7 +182,7 @@
       "required": false
     },
     "GOOGLE_ANALYTICS_ID": {
-      "description": "UA-xxxx (optional)",
+      "description": "G-xxxx (optional)",
       "required": false
     },
     "SENTRY_DSN": {
@@ -199,10 +193,6 @@
       "description": "A sentry tunnel URL for bypassing ad blockers in the UI (optional)",
       "required": false
     },
-    "TEAM_LOGO": {
-      "description": "A logo that will be displayed on the signed out home page",
-      "required": false
-    },
     "DEFAULT_LANGUAGE": {
       "value": "en_US",
       "description": "The default interface language. See translate.getoutline.com for a list of available language codes and their rough percentage translated.",

app/actions/definitions/collections.tsx

@@ -4,6 +4,7 @@ import {
   PadlockIcon,
   PlusIcon,
   StarredIcon,
+  TrashIcon,
   UnstarredIcon,
 } from "outline-icons";
 import * as React from "react";
@@ -12,17 +13,19 @@ import Collection from "~/models/Collection";
 import CollectionEdit from "~/scenes/CollectionEdit";
 import CollectionNew from "~/scenes/CollectionNew";
 import CollectionPermissions from "~/scenes/CollectionPermissions";
-import DynamicCollectionIcon from "~/components/CollectionIcon";
+import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
+import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
 import history from "~/utils/history";
 
-const ColorCollectionIcon = ({ collection }: { collection: Collection }) => {
-  return <DynamicCollectionIcon collection={collection} />;
-};
+const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
+  <DynamicCollectionIcon collection={collection} />
+);
 
 export const openCollection = createAction({
   name: ({ t }) => t("Open collection"),
+  analyticsName: "Open collection",
   section: CollectionSection,
   shortcut: ["o", "c"],
   icon: <CollectionIcon />,
@@ -42,6 +45,7 @@ export const openCollection = createAction({
 
 export const createCollection = createAction({
   name: ({ t }) => t("New collection"),
+  analyticsName: "New collection",
   section: CollectionSection,
   icon: <PlusIcon />,
   keywords: "create",
@@ -60,6 +64,7 @@ export const createCollection = createAction({
 export const editCollection = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
+  analyticsName: "Edit collection",
   section: CollectionSection,
   icon: <EditIcon />,
   visible: ({ stores, activeCollectionId }) =>
@@ -85,6 +90,7 @@ export const editCollection = createAction({
 export const editCollectionPermissions = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
+  analyticsName: "Collection permissions",
   section: CollectionSection,
   icon: <PadlockIcon />,
   visible: ({ stores, activeCollectionId }) =>
@@ -104,6 +110,7 @@ export const editCollectionPermissions = createAction({
 
 export const starCollection = createAction({
   name: ({ t }) => t("Star"),
+  analyticsName: "Star collection",
   section: CollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
@@ -117,18 +124,19 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
 
     const collection = stores.collections.get(activeCollectionId);
-    collection?.star();
+    await collection?.star();
   },
 });
 
 export const unstarCollection = createAction({
   name: ({ t }) => t("Unstar"),
+  analyticsName: "Unstar collection",
   section: CollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
@@ -142,13 +150,47 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: ({ activeCollectionId, stores }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
 
     const collection = stores.collections.get(activeCollectionId);
-    collection?.unstar();
+    await collection?.unstar();
+  },
+});
+
+export const deleteCollection = createAction({
+  name: ({ t }) => t("Delete"),
+  analyticsName: "Delete collection",
+  section: CollectionSection,
+  icon: <TrashIcon />,
+  visible: ({ activeCollectionId, stores }) => {
+    if (!activeCollectionId) {
+      return false;
+    }
+    return stores.policies.abilities(activeCollectionId).delete;
+  },
+  perform: ({ activeCollectionId, stores, t }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    const collection = stores.collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      isCentered: true,
+      title: t("Delete collection"),
+      content: (
+        <CollectionDeleteDialog
+          collection={collection}
+          onSubmit={stores.dialogs.closeAllModals}
+        />
+      ),
+    });
   },
 });
 
@@ -157,4 +199,5 @@ export const rootCollectionActions = [
   createCollection,
   starCollection,
   unstarCollection,
+  deleteCollection,
 ];

app/actions/definitions/developer.tsx

@@ -5,6 +5,7 @@ import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
 import { client } from "~/utils/ApiClient";
+import Logger from "~/utils/Logger";
 import { deleteAllDatabases } from "~/utils/developer";
 
 export const clearIndexedDB = createAction({
@@ -35,16 +36,27 @@ export const createTestUsers = createAction({
   },
 });
 
+export const toggleDebugLogging = createAction({
+  name: ({ t }) => t("Toggle debug logging"),
+  icon: <ToolsIcon />,
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
+    stores.toasts.showToast(
+      Logger.debugLoggingEnabled
+        ? t("Debug logging enabled")
+        : t("Debug logging disabled")
+    );
+  },
+});
+
 export const developer = createAction({
-  name: ({ t }) => t("Developer"),
+  name: ({ t }) => t("Development"),
   keywords: "debug",
   icon: <ToolsIcon />,
   iconInContextMenu: false,
   section: DeveloperSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB, createTestUsers],
+  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
 });
 
 export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -18,20 +18,35 @@ import {
   CrossIcon,
   ArchiveIcon,
   ShuffleIcon,
+  HistoryIcon,
+  LightBulbIcon,
+  UnpublishIcon,
+  PublishIcon,
+  CommentIcon,
 } from "outline-icons";
 import * as React from "react";
+import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
+import DocumentPublish from "~/scenes/DocumentPublish";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
+import env from "~/env";
 import history from "~/utils/history";
-import { homePath, newDocumentPath, searchPath } from "~/utils/routeHelpers";
+import {
+  documentInsightsPath,
+  documentHistoryPath,
+  homePath,
+  newDocumentPath,
+  searchPath,
+} from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
   name: ({ t }) => t("Open document"),
+  analyticsName: "Open document",
   section: DocumentSection,
   shortcut: ["o", "d"],
   keywords: "go to",
@@ -56,14 +71,13 @@ export const openDocument = createAction({
 
 export const createDocument = createAction({
   name: ({ t }) => t("New document"),
+  analyticsName: "New document",
   section: DocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
-  visible: ({ activeCollectionId, stores }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).update,
+  visible: ({ currentTeamId, stores }) =>
+    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
   perform: ({ activeCollectionId, inStarredSection }) =>
-    activeCollectionId &&
     history.push(newDocumentPath(activeCollectionId), {
       starred: inStarredSection,
     }),
@@ -71,6 +85,7 @@ export const createDocument = createAction({
 
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
+  analyticsName: "Star document",
   section: DocumentSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
@@ -83,18 +98,19 @@ export const starDocument = createAction({
       !document?.isStarred && stores.policies.abilities(activeDocumentId).star
     );
   },
-  perform: ({ activeDocumentId, stores }) => {
+  perform: async ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.star();
+    await document?.star();
   },
 });
 
 export const unstarDocument = createAction({
   name: ({ t }) => t("Unstar"),
+  analyticsName: "Unstar document",
   section: DocumentSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
@@ -108,18 +124,86 @@ export const unstarDocument = createAction({
       stores.policies.abilities(activeDocumentId).unstar
     );
   },
-  perform: ({ activeDocumentId, stores }) => {
+  perform: async ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.unstar();
+    await document?.unstar();
+  },
+});
+
+export const publishDocument = createAction({
+  name: ({ t }) => t("Publish"),
+  analyticsName: "Publish document",
+  section: DocumentSection,
+  icon: <PublishIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return (
+      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
+    );
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    if (document?.publishedAt) {
+      return;
+    }
+
+    if (document?.collectionId) {
+      await document.save({
+        publish: true,
+      });
+      stores.toasts.showToast(t("Document published"), {
+        type: "success",
+      });
+    } else if (document) {
+      stores.dialogs.openModal({
+        title: t("Publish document"),
+        isCentered: true,
+        content: <DocumentPublish document={document} />,
+      });
+    }
+  },
+});
+
+export const unpublishDocument = createAction({
+  name: ({ t }) => t("Unpublish"),
+  analyticsName: "Unpublish document",
+  section: DocumentSection,
+  icon: <UnpublishIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return stores.policies.abilities(activeDocumentId).unpublish;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    await document?.unpublish();
+
+    stores.toasts.showToast(t("Document unpublished"), {
+      type: "success",
+    });
   },
 });
 
 export const subscribeDocument = createAction({
   name: ({ t }) => t("Subscribe"),
+  analyticsName: "Subscribe to document",
   section: DocumentSection,
   icon: <SubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
@@ -134,14 +218,14 @@ export const subscribeDocument = createAction({
       stores.policies.abilities(activeDocumentId).subscribe
     );
   },
-  perform: ({ activeDocumentId, stores, t }) => {
+  perform: async ({ activeDocumentId, stores, t }) => {
     if (!activeDocumentId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
 
-    document?.subscribe();
+    await document?.subscribe();
 
     stores.toasts.showToast(t("Subscribed to document notifications"), {
       type: "success",
@@ -151,6 +235,7 @@ export const subscribeDocument = createAction({
 
 export const unsubscribeDocument = createAction({
   name: ({ t }) => t("Unsubscribe"),
+  analyticsName: "Unsubscribe from document",
   section: DocumentSection,
   icon: <UnsubscribeIcon />,
   visible: ({ activeDocumentId, stores }) => {
@@ -165,14 +250,14 @@ export const unsubscribeDocument = createAction({
       stores.policies.abilities(activeDocumentId).unsubscribe
     );
   },
-  perform: ({ activeDocumentId, stores, currentUserId, t }) => {
+  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
     if (!activeDocumentId || !currentUserId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
 
-    document?.unsubscribe(currentUserId);
+    await document?.unsubscribe(currentUserId);
 
     stores.toasts.showToast(t("Unsubscribed from document notifications"), {
       type: "success",
@@ -182,52 +267,88 @@ export const unsubscribeDocument = createAction({
 
 export const downloadDocumentAsHTML = createAction({
   name: ({ t }) => t("HTML"),
+  analyticsName: "Download document as HTML",
   section: DocumentSection,
   keywords: "html export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
+  perform: async ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.download("text/html");
+    await document?.download(ExportContentType.Html);
+  },
+});
+
+export const downloadDocumentAsPDF = createAction({
+  name: ({ t }) => t("PDF"),
+  analyticsName: "Download document as PDF",
+  section: DocumentSection,
+  keywords: "export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId &&
+    stores.policies.abilities(activeDocumentId).download &&
+    env.PDF_EXPORT_ENABLED,
+  perform: ({ activeDocumentId, t, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
+      type: "loading",
+      timeout: 30 * 1000,
+    });
+
+    const document = stores.documents.get(activeDocumentId);
+    document
+      ?.download(ExportContentType.Pdf)
+      .finally(() => id && stores.toasts.hideToast(id));
   },
 });
 
 export const downloadDocumentAsMarkdown = createAction({
   name: ({ t }) => t("Markdown"),
+  analyticsName: "Download document as Markdown",
   section: DocumentSection,
   keywords: "md markdown export",
   icon: <DownloadIcon />,
   iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ activeDocumentId, stores }) => {
+  perform: async ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
       return;
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.download("text/markdown");
+    await document?.download(ExportContentType.Markdown);
   },
 });
 
 export const downloadDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Download") : t("Download document"),
+  analyticsName: "Download document",
   section: DocumentSection,
   icon: <DownloadIcon />,
   keywords: "export",
-  children: [downloadDocumentAsHTML, downloadDocumentAsMarkdown],
+  children: [
+    downloadDocumentAsHTML,
+    downloadDocumentAsPDF,
+    downloadDocumentAsMarkdown,
+  ],
 });
 
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
+  analyticsName: "Duplicate document",
   section: DocumentSection,
   icon: <DuplicateIcon />,
   keywords: "copy",
@@ -254,7 +375,17 @@ export const duplicateDocument = createAction({
  * of the collection for all collection members to see.
  */
 export const pinDocumentToCollection = createAction({
-  name: ({ t }) => t("Pin to collection"),
+  name: ({ activeDocumentId = "", t, stores }) => {
+    const selectedDocument = stores.documents.get(activeDocumentId);
+    const collectionName = selectedDocument
+      ? stores.documents.getCollectionForDocument(selectedDocument)?.name
+      : t("collection");
+
+    return t("Pin to {{collectionName}}", {
+      collectionName,
+    });
+  },
+  analyticsName: "Pin document to collection",
   section: DocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
@@ -273,13 +404,19 @@ export const pinDocumentToCollection = createAction({
       return;
     }
 
-    const document = stores.documents.get(activeDocumentId);
-    await document?.pin(document.collectionId);
+    try {
+      const document = stores.documents.get(activeDocumentId);
+      await document?.pin(document.collectionId);
 
-    const collection = stores.collections.get(activeCollectionId);
+      const collection = stores.collections.get(activeCollectionId);
 
-    if (!collection || !location.pathname.startsWith(collection?.url)) {
-      stores.toasts.showToast(t("Pinned to collection"));
+      if (!collection || !location.pathname.startsWith(collection?.url)) {
+        stores.toasts.showToast(t("Pinned to collection"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
     }
   },
 });
@@ -290,6 +427,7 @@ export const pinDocumentToCollection = createAction({
  */
 export const pinDocumentToHome = createAction({
   name: ({ t }) => t("Pin to home"),
+  analyticsName: "Pin document to home",
   section: DocumentSection,
   icon: <PinIcon />,
   iconInContextMenu: false,
@@ -311,16 +449,23 @@ export const pinDocumentToHome = createAction({
     }
     const document = stores.documents.get(activeDocumentId);
 
-    await document?.pin();
+    try {
+      await document?.pin();
 
-    if (location.pathname !== homePath()) {
-      stores.toasts.showToast(t("Pinned to team home"));
+      if (location.pathname !== homePath()) {
+        stores.toasts.showToast(t("Pinned to team home"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
     }
   },
 });
 
 export const pinDocument = createAction({
   name: ({ t }) => t("Pin"),
+  analyticsName: "Pin document",
   section: DocumentSection,
   icon: <PinIcon />,
   children: [pinDocumentToCollection, pinDocumentToHome],
@@ -329,16 +474,18 @@ export const pinDocument = createAction({
 export const printDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Print") : t("Print document"),
+  analyticsName: "Print document",
   section: DocumentSection,
   icon: <PrintIcon />,
-  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
   perform: async () => {
-    window.print();
+    queueMicrotask(window.print);
   },
 });
 
 export const importDocument = createAction({
   name: ({ t }) => t("Import document"),
+  analyticsName: "Import document",
   section: DocumentSection,
   icon: <ImportIcon />,
   keywords: "upload",
@@ -387,6 +534,7 @@ export const importDocument = createAction({
 
 export const createTemplate = createAction({
   name: ({ t }) => t("Templatize"),
+  analyticsName: "Templatize document",
   section: DocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
@@ -419,8 +567,9 @@ export const createTemplate = createAction({
 
 export const openRandomDocument = createAction({
   id: "random",
-  section: DocumentSection,
   name: ({ t }) => t(`Open random document`),
+  analyticsName: "Open random document",
+  section: DocumentSection,
   icon: <ShuffleIcon />,
   perform: ({ stores, activeDocumentId }) => {
     const documentPaths = stores.collections.pathsToDocuments.filter(
@@ -438,9 +587,10 @@ export const openRandomDocument = createAction({
 export const searchDocumentsForQuery = (searchQuery: string) =>
   createAction({
     id: "search",
-    section: DocumentSection,
     name: ({ t }) =>
       t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
+    analyticsName: "Search documents",
+    section: DocumentSection,
     icon: <SearchIcon />,
     perform: () => history.push(searchPath(searchQuery)),
     visible: ({ location }) => location.pathname !== searchPath(),
@@ -448,6 +598,7 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
 
 export const moveDocument = createAction({
   name: ({ t }) => t("Move"),
+  analyticsName: "Move document",
   section: DocumentSection,
   icon: <MoveIcon />,
   visible: ({ activeDocumentId, stores }) => {
@@ -464,15 +615,11 @@ export const moveDocument = createAction({
       }
 
       stores.dialogs.openModal({
-        title: t("Move {{ documentName }}", {
-          documentName: document.noun,
+        title: t("Move {{ documentType }}", {
+          documentType: document.noun,
         }),
-        content: (
-          <DocumentMove
-            document={document}
-            onRequestClose={stores.dialogs.closeAllModals}
-          />
-        ),
+        isCentered: true,
+        content: <DocumentMove document={document} />,
       });
     }
   },
@@ -480,6 +627,7 @@ export const moveDocument = createAction({
 
 export const archiveDocument = createAction({
   name: ({ t }) => t("Archive"),
+  analyticsName: "Archive document",
   section: DocumentSection,
   icon: <ArchiveIcon />,
   visible: ({ activeDocumentId, stores }) => {
@@ -505,6 +653,7 @@ export const archiveDocument = createAction({
 
 export const deleteDocument = createAction({
   name: ({ t }) => t("Delete"),
+  analyticsName: "Delete document",
   section: DocumentSection,
   icon: <TrashIcon />,
   dangerous: true,
@@ -539,6 +688,7 @@ export const deleteDocument = createAction({
 
 export const permanentlyDeleteDocument = createAction({
   name: ({ t }) => t("Permanently delete"),
+  analyticsName: "Permanently delete document",
   section: DocumentSection,
   icon: <CrossIcon />,
   dangerous: true,
@@ -571,6 +721,71 @@ export const permanentlyDeleteDocument = createAction({
   },
 });
 
+export const openDocumentComments = createAction({
+  name: ({ t }) => t("Comments"),
+  analyticsName: "Open comments",
+  section: DocumentSection,
+  icon: <CommentIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return (
+      !!activeDocumentId &&
+      can.read &&
+      !can.restore &&
+      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
+    );
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    stores.ui.toggleComments(activeDocumentId);
+  },
+});
+
+export const openDocumentHistory = createAction({
+  name: ({ t }) => t("History"),
+  analyticsName: "Open document history",
+  section: DocumentSection,
+  icon: <HistoryIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return !!activeDocumentId && can.read && !can.restore;
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentHistoryPath(document));
+  },
+});
+
+export const openDocumentInsights = createAction({
+  name: ({ t }) => t("Insights"),
+  analyticsName: "Open document insights",
+  section: DocumentSection,
+  icon: <LightBulbIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return !!activeDocumentId && can.read;
+  },
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+    history.push(documentInsightsPath(document));
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
   archiveDocument,
@@ -581,6 +796,8 @@ export const rootDocumentActions = [
   downloadDocument,
   starDocument,
   unstarDocument,
+  publishDocument,
+  unpublishDocument,
   subscribeDocument,
   unsubscribeDocument,
   duplicateDocument,
@@ -590,4 +807,7 @@ export const rootDocumentActions = [
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,
+  openDocumentComments,
+  openDocumentHistory,
+  openDocumentInsights,
 ];

app/actions/definitions/navigation.tsx

@@ -11,6 +11,7 @@ import {
   EmailIcon,
   LogoutIcon,
   ProfileIcon,
+  BrowserIcon,
 } from "outline-icons";
 import * as React from "react";
 import {
@@ -24,21 +25,23 @@ import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
+import Desktop from "~/utils/Desktop";
+import { isMac } from "~/utils/browser";
 import history from "~/utils/history";
+import isCloudHosted from "~/utils/isCloudHosted";
 import {
-  organizationSettingsPath,
-  profileSettingsPath,
-  accountPreferencesPath,
   homePath,
   searchPath,
   draftsPath,
   templatesPath,
   archivePath,
   trashPath,
+  settingsPath,
 } from "~/utils/routeHelpers";
 
 export const navigateToHome = createAction({
   name: ({ t }) => t("Home"),
+  analyticsName: "Navigate to home",
   section: NavigationSection,
   shortcut: ["d"],
   icon: <HomeIcon />,
@@ -50,12 +53,14 @@ export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
   createAction({
     section: RecentSearchesSection,
     name: searchQuery.query,
+    analyticsName: "Navigate to recent search query",
     icon: <SearchIcon />,
     perform: () => history.push(searchPath(searchQuery.query)),
   });
 
 export const navigateToDrafts = createAction({
   name: ({ t }) => t("Drafts"),
+  analyticsName: "Navigate to drafts",
   section: NavigationSection,
   icon: <EditIcon />,
   perform: () => history.push(draftsPath()),
@@ -64,6 +69,7 @@ export const navigateToDrafts = createAction({
 
 export const navigateToTemplates = createAction({
   name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to templates",
   section: NavigationSection,
   icon: <ShapesIcon />,
   perform: () => history.push(templatesPath()),
@@ -72,6 +78,7 @@ export const navigateToTemplates = createAction({
 
 export const navigateToArchive = createAction({
   name: ({ t }) => t("Archive"),
+  analyticsName: "Navigate to archive",
   section: NavigationSection,
   shortcut: ["g", "a"],
   icon: <ArchiveIcon />,
@@ -81,6 +88,7 @@ export const navigateToArchive = createAction({
 
 export const navigateToTrash = createAction({
   name: ({ t }) => t("Trash"),
+  analyticsName: "Navigate to trash",
   section: NavigationSection,
   icon: <TrashIcon />,
   perform: () => history.push(trashPath()),
@@ -89,40 +97,62 @@ export const navigateToTrash = createAction({
 
 export const navigateToSettings = createAction({
   name: ({ t }) => t("Settings"),
+  analyticsName: "Navigate to settings",
   section: NavigationSection,
   shortcut: ["g", "s"],
   icon: <SettingsIcon />,
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(organizationSettingsPath()),
+  perform: () => history.push(settingsPath("details")),
 });
 
 export const navigateToProfileSettings = createAction({
   name: ({ t }) => t("Profile"),
+  analyticsName: "Navigate to profile settings",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <ProfileIcon />,
-  perform: () => history.push(profileSettingsPath()),
+  perform: () => history.push(settingsPath()),
+});
+
+export const navigateToNotificationSettings = createAction({
+  name: ({ t }) => t("Notifications"),
+  analyticsName: "Navigate to notification settings",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <EmailIcon />,
+  perform: () => history.push(settingsPath("notifications")),
 });
 
 export const navigateToAccountPreferences = createAction({
   name: ({ t }) => t("Preferences"),
+  analyticsName: "Navigate to account preferences",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <SettingsIcon />,
-  perform: () => history.push(accountPreferencesPath()),
+  perform: () => history.push(settingsPath("preferences")),
 });
 
 export const openAPIDocumentation = createAction({
   name: ({ t }) => t("API documentation"),
+  analyticsName: "Open API documentation",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
   perform: () => window.open(developersUrl()),
 });
 
+export const toggleSidebar = createAction({
+  name: ({ t }) => t("Toggle sidebar"),
+  analyticsName: "Toggle sidebar",
+  keywords: "hide show navigation",
+  section: NavigationSection,
+  perform: ({ stores }) => stores.ui.toggleCollapsedSidebar(),
+});
+
 export const openFeedbackUrl = createAction({
   name: ({ t }) => t("Send us feedback"),
+  analyticsName: "Open feedback",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <EmailIcon />,
@@ -131,12 +161,14 @@ export const openFeedbackUrl = createAction({
 
 export const openBugReportUrl = createAction({
   name: ({ t }) => t("Report a bug"),
+  analyticsName: "Open bug report",
   section: NavigationSection,
   perform: () => window.open(githubIssuesUrl()),
 });
 
 export const openChangelog = createAction({
   name: ({ t }) => t("Changelog"),
+  analyticsName: "Open changelog",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
@@ -145,6 +177,7 @@ export const openChangelog = createAction({
 
 export const openKeyboardShortcuts = createAction({
   name: ({ t }) => t("Keyboard shortcuts"),
+  analyticsName: "Open keyboard shortcuts",
   section: NavigationSection,
   shortcut: ["?"],
   iconInContextMenu: false,
@@ -157,8 +190,24 @@ export const openKeyboardShortcuts = createAction({
   },
 });
 
+export const downloadApp = createAction({
+  name: ({ t }) =>
+    t("Download {{ platform }} app", {
+      platform: isMac() ? "macOS" : "Windows",
+    }),
+  analyticsName: "Download app",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <BrowserIcon />,
+  visible: () => !Desktop.isElectron() && isMac() && isCloudHosted,
+  perform: () => {
+    window.open("https://desktop.getoutline.com");
+  },
+});
+
 export const logout = createAction({
   name: ({ t }) => t("Log out"),
+  analyticsName: "Log out",
   section: NavigationSection,
   icon: <LogoutIcon />,
   perform: () => stores.auth.logout(),
@@ -170,10 +219,12 @@ export const rootNavigationActions = [
   navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
+  downloadApp,
   openAPIDocumentation,
   openFeedbackUrl,
   openBugReportUrl,
   openChangelog,
   openKeyboardShortcuts,
+  toggleSidebar,
   logout,
 ];

app/actions/definitions/notifications.tsx

@@ -0,0 +1,16 @@
+import { MarkAsReadIcon } from "outline-icons";
+import * as React from "react";
+import { createAction } from "..";
+import { NotificationSection } from "../sections";
+
+export const markNotificationsAsRead = createAction({
+  name: ({ t }) => t("Mark notifications as read"),
+  analyticsName: "Mark notifications as read",
+  section: NotificationSection,
+  icon: <MarkAsReadIcon />,
+  shortcut: ["Shift+Escape"],
+  perform: ({ stores }) => stores.notifications.markAllAsRead(),
+  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
+});
+
+export const rootNotificationActions = [markNotificationsAsRead];

app/actions/definitions/revisions.tsx

@@ -6,15 +6,19 @@ import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
 import history from "~/utils/history";
-import { documentHistoryUrl, matchDocumentHistory } from "~/utils/routeHelpers";
+import {
+  documentHistoryPath,
+  matchDocumentHistory,
+} from "~/utils/routeHelpers";
 
 export const restoreRevision = createAction({
   name: ({ t }) => t("Restore revision"),
+  analyticsName: "Restore revision",
   icon: <RestoreIcon />,
   section: RevisionSection,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ t, event, location, activeDocumentId }) => {
+  perform: async ({ event, location, activeDocumentId }) => {
     event?.preventDefault();
     if (!activeDocumentId) {
       return;
@@ -25,31 +29,21 @@ export const restoreRevision = createAction({
     });
     const revisionId = match?.params.revisionId;
 
-    const { team } = stores.auth;
     const document = stores.documents.get(activeDocumentId);
     if (!document) {
       return;
     }
 
-    if (team?.collaborativeEditing) {
-      history.push(document.url, {
-        restore: true,
-        revisionId,
-      });
-    } else {
-      await document.restore({
-        revisionId,
-      });
-      stores.toasts.showToast(t("Document restored"), {
-        type: "success",
-      });
-      history.push(document.url);
-    }
+    history.push(document.url, {
+      restore: true,
+      revisionId,
+    });
   },
 });
 
 export const copyLinkToRevision = createAction({
   name: ({ t }) => t("Copy link"),
+  analyticsName: "Copy link to revision",
   icon: <LinkIcon />,
   section: RevisionSection,
   perform: async ({ activeDocumentId, stores, t }) => {
@@ -66,7 +60,7 @@ export const copyLinkToRevision = createAction({
       return;
     }
 
-    const url = `${window.location.origin}${documentHistoryUrl(
+    const url = `${window.location.origin}${documentHistoryPath(
       document,
       revisionId
     )}`;

app/actions/definitions/settings.tsx

@@ -7,6 +7,7 @@ import { SettingsSection } from "~/actions/sections";
 
 export const changeToDarkTheme = createAction({
   name: ({ t }) => t("Dark"),
+  analyticsName: "Change to dark theme",
   icon: <MoonIcon />,
   iconInContextMenu: false,
   keywords: "theme dark night",
@@ -17,6 +18,7 @@ export const changeToDarkTheme = createAction({
 
 export const changeToLightTheme = createAction({
   name: ({ t }) => t("Light"),
+  analyticsName: "Change to light theme",
   icon: <SunIcon />,
   iconInContextMenu: false,
   keywords: "theme light day",
@@ -27,6 +29,7 @@ export const changeToLightTheme = createAction({
 
 export const changeToSystemTheme = createAction({
   name: ({ t }) => t("System"),
+  analyticsName: "Change to system theme",
   icon: <BrowserIcon />,
   iconInContextMenu: false,
   keywords: "theme system default",
@@ -38,6 +41,7 @@ export const changeToSystemTheme = createAction({
 export const changeTheme = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Appearance") : t("Change theme"),
+  analyticsName: "Change theme",
   placeholder: ({ t }) => t("Change theme to"),
   icon: () =>
     stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,

app/actions/definitions/teams.tsx

@@ -1,40 +1,56 @@
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
+import { stringToColor } from "@shared/utils/color";
+import RootStore from "~/stores/RootStore";
 import TeamNew from "~/scenes/TeamNew";
+import TeamLogo from "~/components/TeamLogo";
 import { createAction } from "~/actions";
-import { loadSessionsFromCookie } from "~/hooks/useSessions";
+import { ActionContext } from "~/types";
 import { TeamSection } from "../sections";
 
-export const switchTeamList = getSessions().map((session) => {
-  return createAction({
+export const createTeamsList = ({ stores }: { stores: RootStore }) =>
+  stores.auth.availableTeams?.map((session) => ({
+    id: `switch-${session.id}`,
     name: session.name,
+    analyticsName: "Switch workspace",
     section: TeamSection,
     keywords: "change switch workspace organization team",
-    icon: () => <Logo alt={session.name} src={session.logoUrl} />,
-    visible: ({ currentTeamId }) => currentTeamId !== session.teamId,
+    icon: () => (
+      <StyledTeamLogo
+        alt={session.name}
+        model={{
+          initial: session.name[0],
+          avatarUrl: session.avatarUrl,
+          id: session.id,
+          color: stringToColor(session.id),
+        }}
+        size={24}
+      />
+    ),
+    visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
     perform: () => (window.location.href = session.url),
-  });
-});
+  })) ?? [];
 
-const switchTeam = createAction({
+export const switchTeam = createAction({
   name: ({ t }) => t("Switch workspace"),
   placeholder: ({ t }) => t("Select a workspace"),
+  analyticsName: "Switch workspace",
   keywords: "change switch workspace organization team",
   section: TeamSection,
-  visible: ({ currentTeamId }) =>
-    getSessions({ exclude: currentTeamId }).length > 0,
-  children: switchTeamList,
+  visible: ({ stores }) =>
+    !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
+  children: createTeamsList,
 });
 
 export const createTeam = createAction({
   name: ({ t }) => `${t("New workspace")}…`,
+  analyticsName: "New workspace",
   keywords: "create change switch workspace organization team",
   section: TeamSection,
   icon: <PlusIcon />,
-  visible: ({ stores, currentTeamId }) => {
-    return stores.policies.abilities(currentTeamId ?? "").createTeam;
-  },
+  visible: ({ stores, currentTeamId }) =>
+    stores.policies.abilities(currentTeamId ?? "").createTeam,
   perform: ({ t, event, stores }) => {
     event?.preventDefault();
     event?.stopPropagation();
@@ -47,18 +63,9 @@ export const createTeam = createAction({
   },
 });
 
-function getSessions(params?: { exclude?: string }) {
-  const sessions = loadSessionsFromCookie();
-  const otherSessions = sessions.filter(
-    (session) => session.teamId !== params?.exclude
-  );
-  return otherSessions;
-}
-
-const Logo = styled("img")`
+const StyledTeamLogo = styled(TeamLogo)`
   border-radius: 2px;
-  width: 24px;
-  height: 24px;
+  border: 0;
 `;
 
 export const rootTeamActions = [switchTeam, createTeam];

app/actions/definitions/users.tsx

@@ -2,11 +2,13 @@ import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import stores from "~/stores";
 import Invite from "~/scenes/Invite";
+import { UserDeleteDialog } from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
 
 export const inviteUser = createAction({
   name: ({ t }) => `${t("Invite people")}…`,
+  analyticsName: "Invite people",
   icon: <PlusIcon />,
   keywords: "team member workspace user",
   section: UserSection,
@@ -20,4 +22,31 @@ export const inviteUser = createAction({
   },
 });
 
+export const deleteUserActionFactory = (userId: string) =>
+  createAction({
+    name: ({ t }) => `${t("Delete user")}…`,
+    analyticsName: "Delete user",
+    keywords: "leave",
+    dangerous: true,
+    section: UserSection,
+    visible: ({ stores }) => stores.policies.abilities(userId).delete,
+    perform: ({ t }) => {
+      const user = stores.users.get(userId);
+      if (!user) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Delete user"),
+        isCentered: true,
+        content: (
+          <UserDeleteDialog
+            user={user}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    },
+  });
+
 export const rootUserActions = [inviteUser];

app/actions/index.ts

@@ -9,6 +9,7 @@ import {
   MenuItemButton,
   MenuItemWithChildren,
 } from "~/types";
+import Analytics from "~/utils/Analytics";
 
 function resolve<T>(value: any, context: ActionContext): T {
   return typeof value === "function" ? value(context) : value;
@@ -17,7 +18,24 @@ function resolve<T>(value: any, context: ActionContext): T {
 export function createAction(definition: Optional<Action, "id">): Action {
   return {
     ...definition,
-    id: uuidv4(),
+    perform: definition.perform
+      ? (context) => {
+          // We muse use the specific analytics name here as the action name is
+          // translated and potentially contains user strings.
+          if (definition.analyticsName) {
+            Analytics.track("perform_action", definition.analyticsName, {
+              context: context.isButton
+                ? "button"
+                : context.isCommandBar
+                ? "commandbar"
+                : "contextmenu",
+            });
+          }
+
+          return definition.perform?.(context);
+        }
+      : undefined,
+    id: definition.id ?? uuidv4(),
   };
 }
 
@@ -31,9 +49,7 @@ export function actionToMenuItem(
   const title = resolve<string>(action.name, context);
   const icon =
     resolvedIcon && action.iconInContextMenu !== false
-      ? React.cloneElement(resolvedIcon, {
-          color: "currentColor",
-        })
+      ? resolvedIcon
       : undefined;
 
   if (resolvedChildren) {
@@ -57,8 +73,16 @@ export function actionToMenuItem(
     icon,
     visible,
     dangerous: action.dangerous,
-    onClick: () => action.perform && action.perform(context),
-    selected: action.selected ? action.selected(context) : undefined,
+    onClick: () => {
+      try {
+        action.perform?.(context);
+      } catch (err) {
+        context.stores.toasts.showToast(err.message, {
+          type: "error",
+        });
+      }
+    },
+    selected: action.selected?.(context),
   };
 }
 
@@ -70,7 +94,7 @@ export function actionToKBar(
     return [];
   }
 
-  const resolvedIcon = resolve<React.ReactElement<any>>(action.icon, context);
+  const resolvedIcon = resolve<React.ReactElement>(action.icon, context);
   const resolvedChildren = resolve<Action[]>(action.children, context);
   const resolvedSection = resolve<string>(action.section, context);
   const resolvedName = resolve<string>(action.name, context);
@@ -85,12 +109,13 @@ export function actionToKBar(
     {
       id: action.id,
       name: resolvedName,
+      analyticsName: action.analyticsName,
       section: resolvedSection,
       placeholder: resolvedPlaceholder,
       keywords: action.keywords ?? "",
       shortcut: action.shortcut || [],
       icon: resolvedIcon,
-      perform: action.perform ? () => action?.perform?.(context) : undefined,
+      perform: action.perform ? () => action.perform?.(context) : undefined,
     },
     // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
   ].concat(children.map((child) => ({ ...child, parent: action.id })));

app/actions/root.ts

@@ -2,6 +2,7 @@ import { rootCollectionActions } from "./definitions/collections";
 import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
+import { rootNotificationActions } from "./definitions/notifications";
 import { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
 import { rootTeamActions } from "./definitions/teams";
@@ -12,6 +13,7 @@ export default [
   ...rootDocumentActions,
   ...rootUserActions,
   ...rootNavigationActions,
+  ...rootNotificationActions,
   ...rootRevisionActions,
   ...rootSettingsActions,
   ...rootDeveloperActions,

app/actions/sections.ts

@@ -12,6 +12,8 @@ export const SettingsSection = ({ t }: ActionContext) => t("Settings");
 
 export const NavigationSection = ({ t }: ActionContext) => t("Navigation");
 
+export const NotificationSection = ({ t }: ActionContext) => t("Notification");
+
 export const UserSection = ({ t }: ActionContext) => t("People");
 
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");

app/components/ActionButton.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
 import { Action, ActionContext } from "~/types";
 
-export type Props = React.HTMLAttributes<HTMLButtonElement> & {
+export type Props = React.ComponentPropsWithoutRef<"button"> & {
   /** Show the button in a disabled state */
   disabled?: boolean;
   /** Hide the button entirely if action is not applicable */
@@ -20,40 +20,50 @@ export type Props = React.HTMLAttributes<HTMLButtonElement> & {
  */
 const ActionButton = React.forwardRef(
   (
-    {
-      action,
-      context,
-      tooltip,
-      hideOnActionDisabled,
-      ...rest
-    }: Props & React.HTMLAttributes<HTMLButtonElement>,
+    { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
     ref: React.Ref<HTMLButtonElement>
   ) => {
+    const [executing, setExecuting] = React.useState(false);
     const disabled = rest.disabled;
 
+    if (action && !context) {
+      throw new Error("Context must be provided with action");
+    }
     if (!context || !action) {
       return <button {...rest} ref={ref} />;
     }
 
-    if (action?.visible && !action.visible(context) && hideOnActionDisabled) {
+    const actionContext = { ...context, isButton: true };
+
+    if (
+      action?.visible &&
+      !action.visible(actionContext) &&
+      hideOnActionDisabled
+    ) {
       return null;
     }
 
     const label =
-      typeof action.name === "function" ? action.name(context) : action.name;
+      typeof action.name === "function"
+        ? action.name(actionContext)
+        : action.name;
 
     const button = (
       <button
         {...rest}
         aria-label={label}
-        disabled={disabled}
+        disabled={disabled || executing}
         ref={ref}
         onClick={
-          action?.perform && context
+          action?.perform && actionContext
             ? (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
-                action.perform?.(context);
+                const response = action.perform?.(actionContext);
+                if (response?.finally) {
+                  setExecuting(true);
+                  response.finally(() => setExecuting(false));
+                }
               }
             : rest.onClick
         }

app/components/Actions.ts

@@ -1,5 +1,6 @@
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Flex from "~/components/Flex";
 
 export const Action = styled(Flex)`
@@ -20,7 +21,7 @@ export const Separator = styled.div`
   margin-left: 12px;
   width: 1px;
   height: 28px;
-  background: ${(props) => props.theme.divider};
+  background: ${s("divider")};
 `;
 
 const Actions = styled(Flex)`
@@ -29,8 +30,8 @@ const Actions = styled(Flex)`
   right: 0;
   left: 0;
   border-radius: 3px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   padding: 12px;
   backdrop-filter: blur(20px);
 

app/components/Analytics.tsx

@@ -1,10 +1,14 @@
+/* eslint-disable prefer-rest-params */
 /* global ga */
+import { escape } from "lodash";
 import * as React from "react";
+import { IntegrationService } from "@shared/types";
 import env from "~/env";
 
 const Analytics: React.FC = ({ children }) => {
+  // Google Analytics 3
   React.useEffect(() => {
-    if (!env.GOOGLE_ANALYTICS_ID) {
+    if (!env.GOOGLE_ANALYTICS_ID?.startsWith("UA-")) {
       return;
     }
 
@@ -17,11 +21,9 @@ const Analytics: React.FC = ({ children }) => {
 
     ga.l = +new Date();
     ga("create", env.GOOGLE_ANALYTICS_ID, "auto");
-    ga("set", {
-      dimension1: "true",
-    });
     ga("send", "pageview");
     const script = document.createElement("script");
+    script.type = "text/javascript";
     script.src = "https://www.google-analytics.com/analytics.js";
     script.async = true;
 
@@ -30,9 +32,43 @@ const Analytics: React.FC = ({ children }) => {
       ga("send", "event", "pwa", "install");
     });
 
-    if (document.body) {
-      document.body.appendChild(script);
+    document.getElementsByTagName("head")[0]?.appendChild(script);
+  }, []);
+
+  // Google Analytics 4
+  React.useEffect(() => {
+    const measurementIds = [];
+
+    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
+      measurementIds.push(escape(env.analytics.settings?.measurementId));
     }
+    if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
+      measurementIds.push(env.GOOGLE_ANALYTICS_ID);
+    }
+    if (measurementIds.length === 0) {
+      return;
+    }
+
+    const params = {
+      allow_google_signals: false,
+      restricted_data_processing: true,
+    };
+
+    window.dataLayer = window.dataLayer || [];
+    window.gtag = function () {
+      window.dataLayer.push(arguments);
+    };
+    window.gtag("js", new Date());
+
+    for (const measurementId of measurementIds) {
+      window.gtag("config", measurementId, params);
+    }
+
+    const script = document.createElement("script");
+    script.type = "text/javascript";
+    script.src = `https://www.googletagmanager.com/gtag/js?id=${measurementIds[0]}`;
+    script.async = true;
+    document.getElementsByTagName("head")[0]?.appendChild(script);
   }, []);
 
   return <>{children}</>;

app/components/Arrow.tsx

@@ -6,17 +6,11 @@ export default function Arrow() {
       width="13"
       height="30"
       viewBox="0 0 13 30"
-      fill="none"
+      fill="currentColor"
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        fill="currentColor"
-        d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z"
-      />
-      <path
-        fill="currentColor"
-        d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z"
-      />
+      <path d="M7.40242 1.48635C8.23085 0.0650039 10.0656 -0.421985 11.5005 0.39863C12.9354 1.21924 13.427 3.03671 12.5986 4.45806L5.59858 16.4681C4.77015 17.8894 2.93538 18.3764 1.5005 17.5558C0.065623 16.7352 -0.426002 14.9177 0.402425 13.4964L7.40242 1.48635Z" />
+      <path d="M12.5986 25.5419C13.427 26.9633 12.9354 28.7808 11.5005 29.6014C10.0656 30.422 8.23087 29.935 7.40244 28.5136L0.402438 16.5036C-0.425989 15.0823 0.0656365 13.2648 1.50051 12.4442C2.93539 11.6236 4.77016 12.1106 5.59859 13.5319L12.5986 25.5419Z" />
     </svg>
   );
 }

app/components/ArrowKeyNavigation.tsx

@@ -20,6 +20,10 @@ function ArrowKeyNavigation(
   const handleKeyDown = React.useCallback(
     (ev) => {
       if (onEscape) {
+        if (ev.nativeEvent.isComposing) {
+          return;
+        }
+
         if (ev.key === "Escape") {
           onEscape(ev);
         }

app/components/AuthLogo/GoogleLogo.tsx

@@ -1,26 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function GoogleLogo({ 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}
-    >
-      <g>
-        <path d="M32.6162791,13.9090909 L16.8837209,13.9090909 L16.8837209,20.4772727 L25.9395349,20.4772727 C25.0953488,24.65 21.5651163,27.0454545 16.8837209,27.0454545 C11.3581395,27.0454545 6.90697674,22.5636364 6.90697674,17 C6.90697674,11.4363636 11.3581395,6.95454545 16.8837209,6.95454545 C19.2627907,6.95454545 21.4116279,7.80454545 23.1,9.19545455 L28.0116279,4.25 C25.0186047,1.62272727 21.1813953,0 16.8837209,0 C7.52093023,0 0,7.57272727 0,17 C0,26.4272727 7.52093023,34 16.8837209,34 C25.3255814,34 33,27.8181818 33,17 C33,15.9954545 32.8465116,14.9136364 32.6162791,13.9090909 Z" />
-      </g>
-    </svg>
-  );
-}
-
-export default GoogleLogo;

app/components/AuthLogo/MicrosoftLogo.tsx

@@ -1,43 +0,0 @@
-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.tsx

@@ -1,48 +0,0 @@
-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/Authenticated.tsx

@@ -18,7 +18,7 @@ const Authenticated = ({ children }: Props) => {
   // Watching for language changes here as this is the earliest point we have
   // the user available and means we can start loading translations faster
   React.useEffect(() => {
-    changeLanguage(language, i18n);
+    void changeLanguage(language, i18n);
   }, [i18n, language]);
 
   if (auth.authenticated) {
@@ -31,7 +31,7 @@ const Authenticated = ({ children }: Props) => {
     return children;
   }
 
-  auth.logout(true);
+  void auth.logout(true);
   return <Redirect to="/" />;
 };
 

app/components/AuthenticatedLayout.tsx

@@ -1,44 +1,53 @@
 import { AnimatePresence } from "framer-motion";
-import { observer } from "mobx-react";
+import { observer, useLocalStore } from "mobx-react";
 import * as React from "react";
 import { Switch, Route, useLocation, matchPath } from "react-router-dom";
+import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
+import DocumentContext from "~/components/DocumentContext";
+import type { DocumentContextValue } from "~/components/DocumentContext";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
+import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
+import type { Editor as TEditor } from "~/editor";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
+import lazyWithRetry from "~/utils/lazyWithRetry";
 import {
   searchPath,
-  matchDocumentSlug as slug,
   newDocumentPath,
   settingsPath,
   matchDocumentHistory,
+  matchDocumentSlug as slug,
+  matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
 
-const DocumentHistory = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "document-history" */
-      "~/components/DocumentHistory"
-    )
+const DocumentComments = lazyWithRetry(
+  () => import("~/scenes/Document/components/Comments")
 );
-const CommandBar = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "command-bar" */
-      "~/components/CommandBar"
-    )
+const DocumentHistory = lazyWithRetry(
+  () => import("~/scenes/Document/components/History")
 );
+const DocumentInsights = lazyWithRetry(
+  () => import("~/scenes/Document/components/Insights")
+);
+const CommandBar = lazyWithRetry(() => import("~/components/CommandBar"));
 
 const AuthenticatedLayout: React.FC = ({ children }) => {
   const { ui, auth } = useStores();
   const location = useLocation();
   const can = usePolicy(ui.activeCollectionId);
   const { user, team } = auth;
+  const documentContext = useLocalStore<DocumentContextValue>(() => ({
+    editor: null,
+    setEditor: (editor: TEditor) => {
+      documentContext.editor = editor;
+    },
+  }));
 
   const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
@@ -53,7 +62,7 @@ const AuthenticatedLayout: React.FC = ({ children }) => {
       return;
     }
     const { activeCollectionId } = ui;
-    if (!activeCollectionId || !can.update) {
+    if (!activeCollectionId || !can.createDocument) {
       return;
     }
     history.push(newDocumentPath(activeCollectionId));
@@ -74,37 +83,50 @@ const AuthenticatedLayout: React.FC = ({ children }) => {
     </Fade>
   ) : undefined;
 
+  const showHistory = !!matchPath(location.pathname, {
+    path: matchDocumentHistory,
+  });
+  const showInsights = !!matchPath(location.pathname, {
+    path: matchDocumentInsights,
+  });
+  const showComments =
+    !showInsights &&
+    !showHistory &&
+    ui.activeDocumentId &&
+    ui.commentsExpanded.includes(ui.activeDocumentId) &&
+    team?.getPreference(TeamPreference.Commenting);
+
   const sidebarRight = (
-    <React.Suspense fallback={null}>
-      <AnimatePresence key={ui.activeDocumentId}>
-        <Switch
-          location={location}
-          key={
-            matchPath(location.pathname, {
-              path: matchDocumentHistory,
-            })
-              ? "history"
-              : ""
-          }
-        >
-          <Route
-            key="document-history"
-            path={`/doc/${slug}/history/:revisionId?`}
-            component={DocumentHistory}
-          />
-        </Switch>
-      </AnimatePresence>
-    </React.Suspense>
+    <AnimatePresence
+      initial={false}
+      key={ui.activeDocumentId ? "active" : "inactive"}
+    >
+      {(showHistory || showInsights || showComments) && (
+        <Route path={`/doc/${slug}`}>
+          <SidebarRight>
+            <React.Suspense fallback={null}>
+              {showHistory && <DocumentHistory />}
+              {showInsights && <DocumentInsights />}
+              {showComments && <DocumentComments />}
+            </React.Suspense>
+          </SidebarRight>
+        </Route>
+      )}
+    </AnimatePresence>
   );
 
   return (
-    <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-      <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-      <RegisterKeyDown trigger="t" handler={goToSearch} />
-      <RegisterKeyDown trigger="/" handler={goToSearch} />
-      {children}
-      <CommandBar />
-    </Layout>
+    <DocumentContext.Provider value={documentContext}>
+      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={goToSearch} />
+        <RegisterKeyDown trigger="/" handler={goToSearch} />
+        {children}
+        <React.Suspense fallback={null}>
+          <CommandBar />
+        </React.Suspense>
+      </Layout>
+    </DocumentContext.Provider>
   );
 };
 

app/components/Avatar/Avatar.tsx

@@ -1,64 +1,67 @@
-import { observable } from "mobx";
-import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
-import User from "~/models/User";
-import placeholder from "./placeholder.png";
+import useBoolean from "~/hooks/useBoolean";
+import Initials from "./Initials";
+
+export enum AvatarSize {
+  Small = 16,
+  Medium = 24,
+  Large = 32,
+  XLarge = 48,
+  XXLarge = 64,
+}
+
+export interface IAvatar {
+  avatarUrl: string | null;
+  color?: string;
+  initial?: string;
+  id?: string;
+}
 
 type Props = {
-  src: string;
-  size: number;
-  icon?: React.ReactNode;
-  user?: User;
+  size: AvatarSize;
+  src?: string;
+  model?: IAvatar;
   alt?: string;
   showBorder?: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
   className?: string;
+  style?: React.CSSProperties;
 };
 
-@observer
-class Avatar extends React.Component<Props> {
-  @observable
-  error: boolean;
+function Avatar(props: Props) {
+  const { showBorder, model, style, ...rest } = props;
+  const src = props.src || model?.avatarUrl;
+  const [error, handleError] = useBoolean(false);
 
-  static defaultProps = {
-    size: 24,
-  };
-
-  handleError = () => {
-    this.error = true;
-  };
-
-  render() {
-    const { src, icon, showBorder, ...rest } = this.props;
-    return (
-      <AvatarWrapper>
+  return (
+    <Relative style={style}>
+      {src && !error ? (
         <CircleImg
-          onError={this.handleError}
-          src={this.error ? placeholder : src}
+          onError={handleError}
+          src={src}
           $showBorder={showBorder}
           {...rest}
         />
-        {icon && <IconWrapper>{icon}</IconWrapper>}
-      </AvatarWrapper>
-    );
-  }
+      ) : model ? (
+        <Initials color={model.color} $showBorder={showBorder} {...rest}>
+          {model.initial}
+        </Initials>
+      ) : (
+        <Initials $showBorder={showBorder} {...rest} />
+      )}
+    </Relative>
+  );
 }
 
-const AvatarWrapper = styled.div`
-  position: relative;
-`;
+Avatar.defaultProps = {
+  size: AvatarSize.Medium,
+};
 
-const IconWrapper = styled.div`
-  display: flex;
-  position: absolute;
-  bottom: -2px;
-  right: -2px;
-  background: ${(props) => props.theme.primary};
-  border: 2px solid ${(props) => props.theme.background};
-  border-radius: 100%;
-  width: 20px;
-  height: 20px;
+const Relative = styled.div`
+  position: relative;
+  user-select: none;
+  flex-shrink: 0;
 `;
 
 const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
@@ -66,10 +69,12 @@ const CircleImg = styled.img<{ size: number; $showBorder?: boolean }>`
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 50%;
-  border: 2px solid
-    ${(props) =>
-      props.$showBorder === false ? "transparent" : props.theme.background};
+  border: ${(props) =>
+    props.$showBorder === false
+      ? "none"
+      : `2px solid ${props.theme.background}`};
   flex-shrink: 0;
+  overflow: hidden;
 `;
 
 export default Avatar;

app/components/Avatar/AvatarWithPresence.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
@@ -51,7 +52,7 @@ function AvatarWithPresence({
           $isObserving={isObserving}
           $color={user.color}
         >
-          <Avatar src={user.avatarUrl} onClick={onClick} size={32} />
+          <Avatar model={user} onClick={onClick} size={32} />
         </AvatarWrapper>
       </Tooltip>
     </>
@@ -106,7 +107,7 @@ const AvatarWrapper = styled.div<AvatarWrapperProps>`
 
       &:hover:after {
         border: 2px solid ${(props) => props.$color};
-        box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+        box-shadow: inset 0 0 0 2px ${s("background")};
       }
     `}
 `;

app/components/Avatar/Initials.tsx

@@ -0,0 +1,27 @@
+import styled from "styled-components";
+import Flex from "~/components/Flex";
+
+const Initials = styled(Flex)<{
+  color?: string;
+  size: number;
+  $showBorder?: boolean;
+}>`
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  width: 100%;
+  height: 100%;
+  color: #fff;
+  background-color: ${(props) => props.color};
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+  border-radius: 50%;
+  border: 2px solid
+    ${(props) =>
+      props.$showBorder === false ? "transparent" : props.theme.background};
+  flex-shrink: 0;
+  font-size: ${(props) => props.size / 2}px;
+  font-weight: 500;
+`;
+
+export default Initials;

app/components/Badge.ts

@@ -5,7 +5,7 @@ const Badge = styled.span<{ yellow?: boolean; primary?: boolean }>`
   margin-left: 10px;
   padding: 1px 5px 2px;
   background-color: ${({ yellow, primary, theme }) =>
-    yellow ? theme.yellow : primary ? theme.primary : "transparent"};
+    yellow ? theme.yellow : primary ? theme.accent : "transparent"};
   color: ${({ primary, yellow, theme }) =>
     primary ? theme.white : yellow ? theme.almostBlack : theme.textTertiary};
   border: 1px solid

app/components/Branding.tsx

@@ -1,9 +1,9 @@
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import env from "~/env";
-import OutlineLogo from "./OutlineLogo";
+import OutlineIcon from "./Icons/OutlineIcon";
 
 type Props = {
   href?: string;
@@ -12,8 +12,8 @@ type Props = {
 function Branding({ href = env.URL }: Props) {
   return (
     <Link href={href}>
-      <OutlineLogo size={16} />
-      &nbsp;Outline
+      <OutlineIcon size={20} />
+      &nbsp;{env.APP_NAME}
     </Link>
   );
 }
@@ -26,16 +26,16 @@ const Link = styled.a`
   font-size: 14px;
   text-decoration: none;
   border-top-right-radius: 2px;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   display: flex;
   align-items: center;
 
   svg {
-    fill: ${(props) => props.theme.text};
+    fill: ${s("text")};
   }
 
   &:hover {
-    background: ${(props) => props.theme.sidebarBackground};
+    background: ${s("sidebarBackground")};
   }
 
   ${breakpoint("tablet")`

app/components/Breadcrumb.tsx

@@ -2,6 +2,7 @@ import { GoToIcon } from "outline-icons";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { MenuInternalLink } from "~/types";
@@ -60,20 +61,18 @@ function Breadcrumb({
 
 const Slash = styled(GoToIcon)`
   flex-shrink: 0;
-  fill: ${(props) => props.theme.divider};
+  fill: ${s("divider")};
 `;
 
 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
+  ${ellipsis()}
   display: flex;
   flex-shrink: 1;
   min-width: 0;
   cursor: var(--pointer);
-  color: ${(props) => props.theme.text};
+  color: ${s("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")};
 

app/components/Button.tsx

@@ -1,28 +1,29 @@
 import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
-import { darken, lighten } from "polished";
+import { darken, lighten, transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import ActionButton, {
   Props as ActionButtonProps,
 } from "~/components/ActionButton";
+import { undraggableOnDesktop } from "~/styles";
 
 type RealProps = {
-  fullwidth?: boolean;
-  borderOnHover?: boolean;
+  $fullwidth?: boolean;
+  $borderOnHover?: boolean;
   $neutral?: boolean;
-  danger?: boolean;
-  iconColor?: string;
+  $danger?: boolean;
 };
 
 const RealButton = styled(ActionButton)<RealProps>`
-  display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
-  width: ${(props) => (props.fullwidth ? "100%" : "auto")};
+  display: ${(props) => (props.$fullwidth ? "block" : "inline-block")};
+  width: ${(props) => (props.$fullwidth ? "100%" : "auto")};
   margin: 0;
   padding: 0;
   border: 0;
-  background: ${(props) => props.theme.buttonBackground};
-  color: ${(props) => props.theme.buttonText};
+  background: ${s("accent")};
+  color: ${s("accentText")};
   box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
   border-radius: 4px;
   font-size: 14px;
@@ -33,14 +34,7 @@ const RealButton = styled(ActionButton)<RealProps>`
   cursor: var(--pointer);
   user-select: none;
   appearance: none !important;
-
-  ${(props) =>
-    !props.borderOnHover &&
-    `
-      svg {
-        fill: ${props.iconColor || "currentColor"};
-      }
-    `}
+  ${undraggableOnDesktop()}
 
   &::-moz-focus-inner {
     padding: 0;
@@ -49,14 +43,14 @@ const RealButton = styled(ActionButton)<RealProps>`
 
   &:hover:not(:disabled),
   &[aria-expanded="true"] {
-    background: ${(props) => darken(0.05, props.theme.buttonBackground)};
+    background: ${(props) => darken(0.05, props.theme.accent)};
   }
 
   &:disabled {
     cursor: default;
     pointer-events: none;
-    color: ${(props) => props.theme.white50};
-    background: ${(props) => lighten(0.2, props.theme.buttonBackground)};
+    color: ${(props) => transparentize(0.5, props.theme.accentText)};
+    background: ${(props) => lighten(0.2, props.theme.accent)};
 
     svg {
       fill: ${(props) => props.theme.white50};
@@ -66,27 +60,18 @@ const RealButton = styled(ActionButton)<RealProps>`
   ${(props) =>
     props.$neutral &&
     `
-    background: ${props.theme.buttonNeutralBackground};
+    background: inherit;
     color: ${props.theme.buttonNeutralText};
     box-shadow: ${
-      props.borderOnHover
+      props.$borderOnHover
         ? "none"
         : `rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.buttonNeutralBorder} 0 0 0 1px inset`
     };
 
-    ${
-      props.borderOnHover
-        ? ""
-        : `svg {
-      fill: ${props.iconColor || "currentColor"};
-    }`
-    }
-
-
     &:hover:not(:disabled),
     &[aria-expanded="true"] {
       background: ${
-        props.borderOnHover
+        props.$borderOnHover
           ? props.theme.buttonNeutralBackground
           : darken(0.05, props.theme.buttonNeutralBackground)
       };
@@ -106,7 +91,7 @@ const RealButton = styled(ActionButton)<RealProps>`
   `}
 
   ${(props) =>
-    props.danger &&
+    props.$danger &&
     `
       background: ${props.theme.danger};
       color: ${props.theme.white};
@@ -153,16 +138,15 @@ export const Inner = styled.span<{
 
 export type Props<T> = ActionButtonProps & {
   icon?: React.ReactNode;
-  iconColor?: string;
   children?: React.ReactNode;
   disclosure?: boolean;
   neutral?: boolean;
   danger?: boolean;
-  primary?: boolean;
   fullwidth?: boolean;
   as?: T;
   to?: LocationDescriptor;
   borderOnHover?: boolean;
+  hideIcon?: boolean;
   href?: string;
   "data-on"?: string;
   "data-event-category"?: string;
@@ -173,10 +157,23 @@ const Button = <T extends React.ElementType = "button">(
   props: Props<T> & React.ComponentPropsWithoutRef<T>,
   ref: React.Ref<HTMLButtonElement>
 ) => {
-  const { type, children, value, disclosure, neutral, action, ...rest } = props;
+  const {
+    type,
+    children,
+    value,
+    disclosure,
+    neutral,
+    action,
+    icon,
+    borderOnHover,
+    hideIcon,
+    fullwidth,
+    danger,
+    ...rest
+  } = props;
   const hasText = children !== undefined || value !== undefined;
-  const icon = action?.icon ?? rest.icon;
-  const hasIcon = icon !== undefined;
+  const ic = hideIcon ? undefined : action?.icon ?? icon;
+  const hasIcon = ic !== undefined;
 
   return (
     <RealButton
@@ -184,12 +181,15 @@ const Button = <T extends React.ElementType = "button">(
       ref={ref}
       $neutral={neutral}
       action={action}
+      $danger={danger}
+      $fullwidth={fullwidth}
+      $borderOnHover={borderOnHover}
       {...rest}
     >
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
-        {hasIcon && icon}
+        {hasIcon && ic}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}
-        {disclosure && <ExpandedIcon color="currentColor" />}
+        {disclosure && <ExpandedIcon />}
       </Inner>
     </RealButton>
   );

app/components/ButtonSmall.ts

@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Button, { Inner } from "./Button";
+
+const ButtonSmall = styled(Button)`
+  font-size: 13px;
+  height: 26px;
+
+  ${Inner} {
+    padding: 0 6px;
+    line-height: 26px;
+    min-height: 26px;
+  }
+`;
+
+export default ButtonSmall;

app/components/CenteredContent.tsx

@@ -26,12 +26,10 @@ const Content = styled.div`
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({ children, ...rest }) => {
-  return (
-    <Container {...rest}>
-      <Content>{children}</Content>
-    </Container>
-  );
-};
+const CenteredContent: React.FC<Props> = ({ children, ...rest }) => (
+  <Container {...rest}>
+    <Content>{children}</Content>
+  </Container>
+);
 
 export default CenteredContent;

app/components/CircularProgressBar.tsx

@@ -42,7 +42,7 @@ const Circle = ({
       style={{
         transition: "stroke-dashoffset 0.6s ease 0s",
       }}
-    ></circle>
+    />
   );
 };
 
@@ -63,7 +63,7 @@ const CircularProgressBar = ({
         <Circle color={theme.progressBarBackground} offset={offset} />
         {percentage > 0 && (
           <Circle
-            color={theme.primary}
+            color={theme.accent}
             percentage={percentage}
             offset={offset}
           />

app/components/ClickablePadding.ts

@@ -1,9 +1,12 @@
 import styled from "styled-components";
 
-const ClickablePadding = styled.div<{ grow?: boolean }>`
-  min-height: 10em;
-  cursor: ${({ onClick }) => (onClick ? "text" : "default")};
-  ${({ grow }) => grow && `flex-grow: 100;`};
+const ClickablePadding = styled.div<{
+  grow?: boolean;
+  minHeight?: React.CSSProperties["paddingBottom"];
+}>`
+  min-height: ${(props) => props.minHeight || "50vh"};
+  flex-grow: 100;
+  cursor: text;
 `;
 
 export default ClickablePadding;

app/components/Collaborators.tsx

@@ -4,12 +4,11 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
@@ -20,7 +19,6 @@ type Props = {
 function Collaborators(props: Props) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const team = useCurrentTeam();
   const currentUserId = user?.id;
   const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
   const { users, presence, ui } = useStores();
@@ -59,7 +57,7 @@ function Collaborators(props: Props) {
 
     if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
       setRequestedUserIds(ids);
-      users.fetchPage({ ids, limit: 100 });
+      void users.fetchPage({ ids, limit: 100 });
     }
   }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
 
@@ -79,8 +77,7 @@ function Collaborators(props: Props) {
                 const isPresent = presentIds.includes(collaborator.id);
                 const isEditing = editingIds.includes(collaborator.id);
                 const isObserving = ui.observingUserId === collaborator.id;
-                const isObservable =
-                  team.collaborativeEditing && collaborator.id !== user.id;
+                const isObservable = collaborator.id !== user.id;
 
                 return (
                   <AvatarWithPresence

app/components/CollectionDeleteDialog.tsx

@@ -39,7 +39,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
       <>
         <Text type="secondary">
           <Trans
-            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however documents within will be moved to the trash."
+            defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
             values={{
               collectionName: collection.name,
             }}

app/components/CollectionDescription.tsx

@@ -4,6 +4,7 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Arrow from "~/components/Arrow";
 import ButtonLink from "~/components/ButtonLink";
@@ -70,9 +71,9 @@ function CollectionDescription({ collection }: Props) {
   );
 
   const handleChange = React.useCallback(
-    (getValue) => {
+    async (getValue) => {
       setDirty(true);
-      handleSave(getValue);
+      await handleSave(getValue);
     },
     [handleSave]
   );
@@ -110,7 +111,7 @@ function CollectionDescription({ collection }: Props) {
                 onBlur={handleStopEditing}
                 maxLength={1000}
                 embedsDisabled
-                readOnlyWriteCheckboxes
+                canUpdate
               />
             </React.Suspense>
           ) : (
@@ -141,7 +142,7 @@ function CollectionDescription({ collection }: Props) {
 
 const Disclosure = styled(NudeButton)`
   opacity: 0;
-  color: ${(props) => props.theme.divider};
+  color: ${s("divider")};
   position: absolute;
   top: calc(25vh - 50px);
   left: 50%;
@@ -155,12 +156,12 @@ const Disclosure = styled(NudeButton)`
   }
 
   &:active {
-    color: ${(props) => props.theme.sidebarText};
+    color: ${s("sidebarText")};
   }
 `;
 
 const Placeholder = styled(ButtonLink)`
-  color: ${(props) => props.theme.placeholder};
+  color: ${s("placeholder")};
   cursor: text;
   min-height: 27px;
 `;
@@ -193,7 +194,7 @@ const Input = styled.div`
   margin: -8px;
   padding: 8px;
   border-radius: 8px;
-  transition: ${(props) => props.theme.backgroundTransition};
+  transition: ${s("backgroundTransition")};
 
   &:after {
     content: "";
@@ -206,7 +207,7 @@ const Input = styled.div`
     background: linear-gradient(
       180deg,
       ${(props) => transparentize(1, props.theme.background)} 0%,
-      ${(props) => props.theme.background} 100%
+      ${s("background")} 100%
     );
   }
 
@@ -218,7 +219,7 @@ const Input = styled.div`
   }
 
   &[data-editing="true"] {
-    background: ${(props) => props.theme.secondaryBackground};
+    background: ${s("secondaryBackground")};
   }
 
   .block-menu-trigger,

app/components/CommandBar.tsx

@@ -1,25 +1,20 @@
 import { useKBar, KBarPositioner, KBarAnimator, KBarSearch } from "kbar";
 import { observer } from "mobx-react";
-import { QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Portal } from "react-portal";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import CommandBarResults from "~/components/CommandBarResults";
 import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
-import useSettingsActions from "~/hooks/useSettingsAction";
-import useStores from "~/hooks/useStores";
+import useSettingsActions from "~/hooks/useSettingsActions";
 import { CommandBarAction } from "~/types";
-import { metaDisplay } from "~/utils/keyboard";
-import Text from "./Text";
 
 function CommandBar() {
   const { t } = useTranslation();
-  const { ui } = useStores();
   const settingsActions = useSettingsActions();
   const commandBarActions = React.useMemo(
     () => [...rootActions, settingsActions],
@@ -30,9 +25,9 @@ function CommandBar() {
 
   const { rootAction } = useKBar((state) => ({
     rootAction: state.currentRootActionId
-      ? ((state.actions[
+      ? (state.actions[
           state.currentRootActionId
-        ] as unknown) as CommandBarAction)
+        ] as unknown as CommandBarAction)
       : undefined,
   }));
 
@@ -50,17 +45,6 @@ function CommandBar() {
               }…`}
             />
             <CommandBarResults />
-            {ui.commandBarOpenedFromSidebar && (
-              <Hint size="small" type="tertiary">
-                <QuestionMarkIcon size={18} color="currentColor" />
-                {t(
-                  "Open search from anywhere with the {{ shortcut }} shortcut",
-                  {
-                    shortcut: `${metaDisplay} + k`,
-                  }
-                )}
-              </Hint>
-            )}
           </Animator>
         </Positioner>
       </KBarPortal>
@@ -80,16 +64,6 @@ const KBarPortal: React.FC = ({ children }) => {
   return <Portal>{children}</Portal>;
 };
 
-const Hint = styled(Text)`
-  display: flex;
-  align-items: center;
-  gap: 4px;
-  border-top: 1px solid ${(props) => props.theme.background};
-  margin: 1px 0 0;
-  padding: 6px 16px;
-  width: 100%;
-`;
-
 const Positioner = styled(KBarPositioner)`
   z-index: ${depths.commandBar};
 `;
@@ -99,12 +73,12 @@ const SearchInput = styled(KBarSearch)`
   width: 100%;
   outline: none;
   border: none;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
+  background: ${s("menuBackground")};
+  color: ${s("text")};
 
   &:disabled,
   &::placeholder {
-    color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
   }
 `;
 
@@ -112,8 +86,8 @@ const Animator = styled(KBarAnimator)`
   max-width: 600px;
   max-height: 75vh;
   width: 90vw;
-  background: ${(props) => props.theme.menuBackground};
-  color: ${(props) => props.theme.text};
+  background: ${s("menuBackground")};
+  color: ${s("text")};
   border-radius: 8px;
   overflow: hidden;
   box-shadow: rgb(0 0 0 / 40%) 0px 16px 60px;

app/components/CommandBarItem.tsx

@@ -2,8 +2,10 @@ import { ActionImpl } from "kbar";
 import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
+import Text from "./Text";
 
 type Props = {
   action: ActionImpl;
@@ -38,10 +40,9 @@ function CommandBarItem(
             // @ts-expect-error no icon on ActionImpl
             React.cloneElement(action.icon, {
               size: 22,
-              color: "currentColor",
             })
           ) : (
-            <ArrowIcon color="currentColor" />
+            <ArrowIcon />
           )}
         </Icon>
 
@@ -55,44 +56,59 @@ function CommandBarItem(
         {action.children?.length ? "…" : ""}
       </Content>
       {action.shortcut?.length ? (
-        <div
-          style={{
-            display: "grid",
-            gridAutoFlow: "column",
-            gap: "4px",
-          }}
-        >
-          {action.shortcut.map((sc: string) => (
-            <Key key={sc}>{sc}</Key>
+        <Shortcut>
+          {action.shortcut.map((sc: string, index) => (
+            <React.Fragment key={sc}>
+              {index > 0 ? (
+                <>
+                  {" "}
+                  <Text size="xsmall" as="span" type="secondary">
+                    then
+                  </Text>{" "}
+                </>
+              ) : (
+                ""
+              )}
+              {sc.split("+").map((s) => (
+                <Key key={s}>{s}</Key>
+              ))}
+            </React.Fragment>
           ))}
-        </div>
+        </Shortcut>
       ) : null}
     </Item>
   );
 }
 
+const Shortcut = styled.div`
+  display: grid;
+  grid-auto-flow: column;
+  gap: 4px;
+`;
+
 const Icon = styled(Flex)`
   align-items: center;
   justify-content: center;
   width: 24px;
   height: 24px;
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
   flex-shrink: 0;
 `;
 
 const Ancestor = styled.span`
-  color: ${(props) => props.theme.textSecondary};
+  color: ${s("textSecondary")};
 `;
 
 const Content = styled(Flex)`
-  overflow: hidden;
-  text-overflow: ellipsis;
+  ${ellipsis()}
   flex-shrink: 1;
 `;
 
 const Item = styled.div<{ active?: boolean }>`
-  font-size: 15px;
-  padding: 10px 16px;
+  font-size: 14px;
+  padding: 9px 12px;
+  margin: 0 8px;
+  border-radius: 4px;
   background: ${(props) =>
     props.active ? props.theme.menuItemSelected : "none"};
   display: flex;
@@ -100,9 +116,8 @@ const Item = styled.div<{ active?: boolean }>`
   justify-content: space-between;
   cursor: var(--pointer);
 
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
+  ${ellipsis()}
+  user-select: none;
   min-width: 0;
 
   ${(props) =>

app/components/CommandBarResults.tsx

@@ -1,35 +1,45 @@
 import { useMatches, KBarResults } from "kbar";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import CommandBarItem from "~/components/CommandBarItem";
 
 export default function CommandBarResults() {
   const { results, rootActionId } = useMatches();
 
   return (
-    <KBarResults
-      items={results}
-      maxHeight={400}
-      onRender={({ item, active }) =>
-        typeof item === "string" ? (
-          <Header>{item}</Header>
-        ) : (
-          <CommandBarItem
-            action={item}
-            active={active}
-            currentRootActionId={rootActionId}
-          />
-        )
-      }
-    />
+    <Container>
+      <KBarResults
+        items={results}
+        maxHeight={400}
+        onRender={({ item, active }) =>
+          typeof item === "string" ? (
+            <Header>{item}</Header>
+          ) : (
+            <CommandBarItem
+              action={item}
+              active={active}
+              currentRootActionId={rootActionId}
+            />
+          )
+        }
+      />
+    </Container>
   );
 }
 
+// Cannot style KBarResults unfortunately, so we must wrap and target the inner
+const Container = styled.div`
+  > div {
+    padding-bottom: 8px;
+  }
+`;
+
 const Header = styled.h3`
   font-size: 13px;
   letter-spacing: 0.04em;
   margin: 0;
   padding: 16px 0 4px 20px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   height: 36px;
 `;

app/components/CommentDeleteDialog.tsx

@@ -0,0 +1,53 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import Comment from "~/models/Comment";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Text from "~/components/Text";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  comment: Comment;
+  onSubmit?: () => void;
+};
+
+function CommentDeleteDialog({ comment, onSubmit }: Props) {
+  const { comments } = useStores();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const hasChildComments = comments.inThread(comment.id).length > 1;
+
+  const handleSubmit = async () => {
+    try {
+      await comment.delete();
+      onSubmit?.();
+    } catch (err) {
+      showToast(err.message, { type: "error" });
+    }
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <Text type="secondary">
+        {hasChildComments ? (
+          <Trans>
+            Are you sure you want to permanently delete this entire comment
+            thread?
+          </Trans>
+        ) : (
+          <Trans>
+            Are you sure you want to permanently delete this comment?
+          </Trans>
+        )}
+      </Text>
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(CommentDeleteDialog);

app/components/ConfirmationDialog.tsx

@@ -15,6 +15,8 @@ type Props = {
   savingText?: string;
   /** If true, the submit button will be a dangerous red */
   danger?: boolean;
+  /** Keep the submit button disabled */
+  disabled?: boolean;
 };
 
 const ConfirmationDialog: React.FC<Props> = ({
@@ -23,6 +25,7 @@ const ConfirmationDialog: React.FC<Props> = ({
   submitText,
   savingText,
   danger,
+  disabled = false,
 }) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const { dialogs } = useStores();
@@ -50,8 +53,13 @@ const ConfirmationDialog: React.FC<Props> = ({
     <Flex column>
       <form onSubmit={handleSubmit}>
         <Text type="secondary">{children}</Text>
-        <Button type="submit" disabled={isSaving} danger={danger} autoFocus>
-          {isSaving ? savingText : submitText}
+        <Button
+          type="submit"
+          disabled={isSaving || disabled}
+          danger={danger}
+          autoFocus
+        >
+          {isSaving && savingText ? savingText : submitText}
         </Button>
       </form>
     </Flex>

app/components/ConnectionStatus.tsx

@@ -39,8 +39,8 @@ const Button = styled(NudeButton)`
   display: none;
   position: fixed;
   bottom: 0;
-  right: 32px;
   margin: 24px;
+  transform: translateX(-32px);
 
   ${breakpoint("tablet")`
     display: block;

app/components/ContentEditable.tsx

@@ -1,6 +1,7 @@
 import isPrintableKeyEvent from "is-printable-key-event";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import useOnScreen from "~/hooks/useOnScreen";
 
 type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
@@ -52,11 +53,17 @@ const ContentEditable = React.forwardRef(
   ) => {
     const contentRef = React.useRef<HTMLSpanElement>(null);
     const [innerValue, setInnerValue] = React.useState<string>(value);
-    const lastValue = React.useRef("");
+    const lastValue = React.useRef(value);
 
     React.useImperativeHandle(ref, () => ({
       focus: () => {
-        contentRef.current?.focus();
+        if (contentRef.current) {
+          contentRef.current.focus();
+          // looks unnecessary but required because of https://github.com/outline/outline/issues/5198
+          if (!contentRef.current.innerText) {
+            placeCaret(contentRef.current, true);
+          }
+        }
       },
       focusAtStart: () => {
         if (contentRef.current) {
@@ -78,27 +85,37 @@ const ContentEditable = React.forwardRef(
       },
     }));
 
-    const wrappedEvent = (
-      callback:
-        | React.FocusEventHandler<HTMLSpanElement>
-        | React.FormEventHandler<HTMLSpanElement>
-        | React.KeyboardEventHandler<HTMLSpanElement>
-        | undefined
-    ) => (event: any) => {
-      const text = contentRef.current?.innerText || "";
+    const wrappedEvent =
+      (
+        callback:
+          | React.FocusEventHandler<HTMLSpanElement>
+          | React.FormEventHandler<HTMLSpanElement>
+          | React.KeyboardEventHandler<HTMLSpanElement>
+          | undefined
+      ) =>
+      (event: any) => {
+        if (readOnly) {
+          return;
+        }
 
-      if (maxLength && isPrintableKeyEvent(event) && text.length >= maxLength) {
-        event?.preventDefault();
-        return;
-      }
+        const text = event.currentTarget.textContent || "";
 
-      if (text !== lastValue.current) {
-        lastValue.current = text;
-        onChange && onChange(text);
-      }
+        if (
+          maxLength &&
+          isPrintableKeyEvent(event) &&
+          text.length >= maxLength
+        ) {
+          event?.preventDefault();
+          return;
+        }
 
-      callback?.(event);
-    };
+        if (text !== lastValue.current) {
+          lastValue.current = text;
+          onChange?.(text);
+        }
+
+        callback?.(event);
+      };
 
     // This is to account for being within a React.Suspense boundary, in this
     // case the component may be rendered with display: none. React 18 may solve
@@ -113,13 +130,14 @@ const ContentEditable = React.forwardRef(
     }, [autoFocus, disabled, isVisible, readOnly, contentRef]);
 
     React.useEffect(() => {
-      if (value !== contentRef.current?.innerText) {
+      if (contentRef.current && value !== contentRef.current.textContent) {
         setInnerValue(value);
       }
     }, [value, contentRef]);
 
-    // Ensure only plain text can be pasted into title when pasting from another
-    // rich text editor
+    // Ensure only plain text can be pasted into input when pasting from another
+    // rich text source. Note: If `onPaste` prop is passed then it takes
+    // priority over this behavior.
     const handlePaste = React.useCallback(
       (event: React.ClipboardEvent<HTMLSpanElement>) => {
         event.preventDefault();
@@ -166,13 +184,14 @@ function placeCaret(element: HTMLElement, atStart: boolean) {
 }
 
 const Content = styled.span`
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
-  color: ${(props) => props.theme.text};
-  -webkit-text-fill-color: ${(props) => props.theme.text};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
+  color: ${s("text")};
+  -webkit-text-fill-color: ${s("text")};
   outline: none;
   resize: none;
   cursor: text;
+  word-break: anywhere;
 
   &:empty {
     display: inline-block;
@@ -180,8 +199,8 @@ const Content = styled.span`
 
   &:empty::before {
     display: inline-block;
-    color: ${(props) => props.theme.placeholder};
-    -webkit-text-fill-color: ${(props) => props.theme.placeholder};
+    color: ${s("placeholder")};
+    -webkit-text-fill-color: ${s("placeholder")};
     content: attr(data-placeholder);
     pointer-events: none;
     height: 0;

app/components/ContextMenu/Header.ts

@@ -1,10 +1,11 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Header = styled.h3`
   font-size: 11px;
   font-weight: 600;
   text-transform: uppercase;
-  color: ${(props) => props.theme.sidebarText};
+  color: ${s("sidebarText")};
   letter-spacing: 0.04em;
   margin: 1em 12px 0.5em;
 `;

app/components/ContextMenu/MenuItem.tsx

@@ -1,6 +1,7 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -8,6 +9,7 @@ import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
   onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
+  active?: boolean;
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
@@ -18,28 +20,30 @@ type Props = {
   hide?: () => void;
   level?: number;
   icon?: React.ReactElement;
+  children?: React.ReactNode;
 };
 
-const MenuItem: React.FC<Props> = ({
-  onClick,
-  children,
-  selected,
-  disabled,
-  as,
-  hide,
-  icon,
-  ...rest
-}) => {
+const MenuItem = (
+  {
+    onClick,
+    children,
+    active,
+    selected,
+    disabled,
+    as,
+    hide,
+    icon,
+    ...rest
+  }: Props,
+  ref: React.Ref<HTMLAnchorElement>
+) => {
   const handleClick = React.useCallback(
-    (ev) => {
+    async (ev) => {
+      hide?.();
+
       if (onClick) {
         ev.preventDefault();
-        ev.stopPropagation();
-        onClick(ev);
-      }
-
-      if (hide) {
-        hide();
+        await onClick(ev);
       }
     },
     [onClick, hide]
@@ -63,22 +67,22 @@ const MenuItem: React.FC<Props> = ({
       {(props) => (
         <MenuAnchor
           {...props}
-          $toggleable={selected !== undefined}
+          $active={active}
           as={onClick ? "button" : as}
           onClick={handleClick}
           onMouseDown={handleMouseDown}
+          ref={mergeRefs([
+            ref,
+            props.ref as React.RefObject<HTMLAnchorElement>,
+          ])}
         >
           {selected !== undefined && (
             <>
-              {selected ? <CheckmarkIcon color="currentColor" /> : <Spacer />}
+              {selected ? <CheckmarkIcon /> : <Spacer />}
               &nbsp;
             </>
           )}
-          {icon && (
-            <MenuIconWrapper>
-              {React.cloneElement(icon, { color: "currentColor" })}
-            </MenuIconWrapper>
-          )}
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
           {children}
         </MenuAnchor>
       )}
@@ -97,6 +101,7 @@ type MenuAnchorProps = {
   disabled?: boolean;
   dangerous?: boolean;
   disclosure?: boolean;
+  $active?: boolean;
 };
 
 export const MenuAnchorCSS = css<MenuAnchorProps>`
@@ -104,6 +109,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   margin: 0;
   border: 0;
   padding: 12px;
+  border-radius: 4px;
   padding-left: ${(props) => 12 + (props.level || 0) * 10}px;
   width: 100%;
   min-height: 32px;
@@ -127,37 +133,52 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
   }
 
-  ${(props) =>
-    props.disabled
-      ? "pointer-events: none;"
-      : `
+  ${(props) => props.disabled && "pointer-events: none;"}
 
+  ${(props) =>
+    props.$active === undefined &&
+    !props.disabled &&
+    `
   @media (hover: hover) {
     &:hover,
     &:focus,
     &.focus-visible {
-      color: ${props.theme.white};
-      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+      color: ${props.theme.accentText};
+      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
       box-shadow: none;
       cursor: var(--pointer);
 
       svg {
-        fill: ${props.theme.white};
+        fill: ${props.theme.accentText};
       }
     }
   }
-  `};
+  `}
+
+  ${(props) =>
+    props.$active &&
+    !props.disabled &&
+    `
+      color: ${props.theme.accentText};
+      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
+      box-shadow: none;
+      cursor: var(--pointer);
+
+      svg {
+        fill: ${props.theme.accentText};
+      }
+    `}
 
   ${breakpoint("tablet")`
     padding: 4px 12px;
     padding-right: ${(props: MenuAnchorProps) =>
       props.disclosure ? 32 : 12}px;
     font-size: 14px;
-  `};
+  `}
 `;
 
 export const MenuAnchor = styled.a`
   ${MenuAnchorCSS}
 `;
 
-export default MenuItem;
+export default React.forwardRef<HTMLAnchorElement, Props>(MenuItem);

app/components/ContextMenu/MouseSafeArea.tsx

@@ -24,8 +24,12 @@ type Positions = {
 export default function MouseSafeArea(props: {
   parentRef: React.RefObject<HTMLElement | null>;
 }) {
-  const { x = 0, y = 0, height: h = 0, width: w = 0 } =
-    props.parentRef.current?.getBoundingClientRect() || {};
+  const {
+    x = 0,
+    y = 0,
+    height: h = 0,
+    width: w = 0,
+  } = props.parentRef.current?.getBoundingClientRect() || {};
   const [mouseX, mouseY] = useMousePosition();
   const positions = { x, y, h, w, mouseX, mouseY };
 

app/components/ContextMenu/OverflowMenuButton.tsx

@@ -5,19 +5,14 @@ import NudeButton from "~/components/NudeButton";
 
 type Props = React.ComponentProps<typeof MenuButton> & {
   className?: string;
-  iconColor?: string;
 };
 
-export default function OverflowMenuButton({
-  iconColor,
-  className,
-  ...rest
-}: Props) {
+export default function OverflowMenuButton({ className, ...rest }: Props) {
   return (
     <MenuButton {...rest}>
       {(props) => (
         <NudeButton className={className} {...props}>
-          <MoreIcon color={iconColor} />
+          <MoreIcon />
         </NudeButton>
       )}
     </MenuButton>

app/components/ContextMenu/Separator.tsx

@@ -11,5 +11,5 @@ export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
 }
 
 const HorizontalRule = styled.hr`
-  margin: 0.5em 12px;
+  margin: 6px 0;
 `;

app/components/ContextMenu/Template.tsx

@@ -6,6 +6,7 @@ import {
   useMenuState,
   MenuButton,
   MenuItem as BaseMenuItem,
+  MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
@@ -25,7 +26,7 @@ import MouseSafeArea from "./MouseSafeArea";
 import Separator from "./Separator";
 import ContextMenu from ".";
 
-type Props = {
+type Props = Omit<MenuStateReturn, "items"> & {
   actions?: (Action | MenuSeparator | MenuHeading)[];
   context?: Partial<ActionContext>;
   items?: TMenuItem[];
@@ -37,13 +38,15 @@ const Disclosure = styled(ExpandedIcon)`
   right: 8px;
 `;
 
-const Submenu = React.forwardRef(
+type SubMenuProps = MenuStateReturn & {
+  templateItems: TMenuItem[];
+  parentMenuState: Omit<MenuStateReturn, "items">;
+  title: React.ReactNode;
+};
+
+const SubMenu = React.forwardRef(
   (
-    {
-      templateItems,
-      title,
-      ...rest
-    }: { templateItems: TMenuItem[]; title: React.ReactNode },
+    { templateItems, title, parentMenuState, ...rest }: SubMenuProps,
     ref: React.LegacyRef<HTMLButtonElement>
   ) => {
     const { t } = useTranslation();
@@ -59,7 +62,12 @@ const Submenu = React.forwardRef(
             </MenuAnchor>
           )}
         </MenuButton>
-        <ContextMenu {...menu} aria-label={t("Submenu")}>
+        <ContextMenu
+          {...menu}
+          aria-label={t("Submenu")}
+          onClick={parentMenuState.hide}
+          parentMenuState={parentMenuState}
+        >
           <MouseSafeArea parentRef={menu.unstable_popoverRef} />
           <Template {...menu} items={templateItems} />
         </ContextMenu>
@@ -177,8 +185,9 @@ function Template({ items, actions, context, ...menu }: Props) {
           return (
             <BaseMenuItem
               key={index}
-              as={Submenu}
+              as={SubMenu}
               templateItems={item.items}
+              parentMenuState={menu}
               title={<Title title={item.title} icon={item.icon} />}
               {...menu}
             />

app/components/ContextMenu/index.tsx

@@ -1,10 +1,10 @@
 import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Menu } from "reakit/Menu";
+import { Menu, MenuStateReturn } from "reakit/Menu";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
@@ -36,21 +36,23 @@ export type Placement =
   | "left"
   | "left-start";
 
-type Props = {
-  "aria-label": string;
-  visible?: boolean;
-  placement?: Placement;
-  animating?: boolean;
-  unstable_disclosureRef?: React.RefObject<HTMLElement | null>;
+type Props = MenuStateReturn & {
+  "aria-label"?: string;
+  /** The parent menu state if this is a submenu. */
+  parentMenuState?: Omit<MenuStateReturn, "items">;
+  /** Called when the context menu is opened. */
   onOpen?: () => void;
+  /** Called when the context menu is closed. */
   onClose?: () => void;
-  hide?: () => void;
+  /** Called when the context menu is clicked. */
+  onClick?: (ev: React.MouseEvent) => void;
 };
 
 const ContextMenu: React.FC<Props> = ({
   children,
   onOpen,
   onClose,
+  parentMenuState,
   ...rest
 }) => {
   const previousVisible = usePrevious(rest.visible);
@@ -60,6 +62,7 @@ const ContextMenu: React.FC<Props> = ({
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
   const isMobile = useMobile();
+  const isSubMenu = !!parentMenuState;
 
   useUnmount(() => {
     setIsMenuOpen(false);
@@ -67,19 +70,17 @@ const ContextMenu: React.FC<Props> = ({
 
   React.useEffect(() => {
     if (rest.visible && !previousVisible) {
-      if (onOpen) {
-        onOpen();
-      }
-      if (rest["aria-label"] !== t("Submenu")) {
+      onOpen?.();
+
+      if (!isSubMenu) {
         setIsMenuOpen(true);
       }
     }
 
     if (!rest.visible && previousVisible) {
-      if (onClose) {
-        onClose();
-      }
-      if (rest["aria-label"] !== t("Submenu")) {
+      onClose?.();
+
+      if (!isSubMenu) {
         setIsMenuOpen(false);
       }
     }
@@ -90,7 +91,7 @@ const ContextMenu: React.FC<Props> = ({
     rest.visible,
     ui.sidebarCollapsed,
     setIsMenuOpen,
-    rest,
+    isSubMenu,
     t,
   ]);
 
@@ -99,13 +100,15 @@ const ContextMenu: React.FC<Props> = ({
   // https://github.com/ariakit/ariakit/issues/469
   React.useEffect(() => {
     const scrollElement = backgroundRef.current;
-    if (rest.visible && scrollElement) {
-      disableBodyScroll(scrollElement);
+    if (rest.visible && scrollElement && !isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
     }
     return () => {
-      scrollElement && enableBodyScroll(scrollElement);
+      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
     };
-  }, [rest.visible]);
+  }, [isSubMenu, rest.visible]);
 
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
@@ -171,7 +174,7 @@ export const Backdrop = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background: ${(props) => props.theme.backdrop};
+  background: ${s("backdrop")};
   z-index: ${depths.menu - 1};
 `;
 
@@ -203,9 +206,9 @@ export const Background = styled(Scrollable)<BackgroundProps>`
   animation: ${mobileContextMenu} 200ms ease;
   transform-origin: 50% 100%;
   max-width: 100%;
-  background: ${(props) => props.theme.menuBackground};
+  background: ${s("menuBackground")};
   border-radius: 6px;
-  padding: 6px 0;
+  padding: 6px;
   min-width: 180px;
   min-height: 44px;
   max-height: 75vh;

app/components/DefaultCollectionInputSelect.tsx

@@ -2,8 +2,8 @@ import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { Optional } from "utility-types";
-import CollectionIcon from "~/components/CollectionIcon";
 import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
@@ -28,7 +28,7 @@ const DefaultCollectionInputSelect = ({
   const { showToast } = useToasts();
 
   React.useEffect(() => {
-    async function load() {
+    async function fetchData() {
       if (!collections.isLoaded && !fetching && !fetchError) {
         try {
           setFetching(true);
@@ -48,7 +48,7 @@ const DefaultCollectionInputSelect = ({
         }
       }
     }
-    load();
+    void fetchData();
   }, [showToast, fetchError, t, fetching, collections]);
 
   const options = React.useMemo(
@@ -73,7 +73,7 @@ const DefaultCollectionInputSelect = ({
             label: (
               <Flex align="center">
                 <IconWrapper>
-                  <HomeIcon color="currentColor" />
+                  <HomeIcon />
                 </IconWrapper>
                 {t("Home")}
               </Flex>

app/components/DesktopEventHandler.tsx

@@ -0,0 +1,56 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
+import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import Desktop from "~/utils/Desktop";
+
+export default function DesktopEventHandler() {
+  useDesktopTitlebar();
+  const { t } = useTranslation();
+  const history = useHistory();
+  const { dialogs } = useStores();
+  const { showToast } = useToasts();
+
+  React.useEffect(() => {
+    Desktop.bridge?.redirect((path: string, replace = false) => {
+      if (replace) {
+        history.replace(path);
+      } else {
+        history.push(path);
+      }
+    });
+
+    Desktop.bridge?.updateDownloaded(() => {
+      showToast("An update is ready to install.", {
+        type: "info",
+        timeout: Infinity,
+        action: {
+          text: "Install now",
+          onClick: () => {
+            void Desktop.bridge?.restartAndInstall();
+          },
+        },
+      });
+    });
+
+    Desktop.bridge?.focus(() => {
+      window.document.body.classList.remove("backgrounded");
+    });
+
+    Desktop.bridge?.blur(() => {
+      window.document.body.classList.add("backgrounded");
+    });
+
+    Desktop.bridge?.openKeyboardShortcuts(() => {
+      dialogs.openGuide({
+        title: t("Keyboard shortcuts"),
+        content: <KeyboardShortcuts />,
+      });
+    });
+  }, [t, history, dialogs, showToast]);
+
+  return null;
+}

app/components/Dialogs.tsx

@@ -1,4 +1,4 @@
-import { observer } from "mobx-react-lite";
+import { observer } from "mobx-react";
 import * as React from "react";
 import Guide from "~/components/Guide";
 import Modal from "~/components/Modal";

app/components/Divider.ts

@@ -1,8 +1,9 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Divider = styled.hr`
   border: 0;
-  border-bottom: 1px solid ${(props) => props.theme.divider};
+  border-bottom: 1px solid ${s("divider")};
   margin: 0;
   padding: 0;
 `;

app/components/DocumentBreadcrumb.tsx

@@ -3,12 +3,18 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
+import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
-import CollectionIcon from "~/components/CollectionIcon";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useStores from "~/hooks/useStores";
-import { MenuInternalLink, NavigationNode } from "~/types";
-import { collectionUrl } from "~/utils/routeHelpers";
+import { MenuInternalLink } from "~/types";
+import {
+  archivePath,
+  collectionPath,
+  templatesPath,
+  trashPath,
+} from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
@@ -21,27 +27,27 @@ function useCategory(document: Document): MenuInternalLink | null {
   if (document.isDeleted) {
     return {
       type: "route",
-      icon: <TrashIcon color="currentColor" />,
+      icon: <TrashIcon />,
       title: t("Trash"),
-      to: "/trash",
+      to: trashPath(),
     };
   }
 
   if (document.isArchived) {
     return {
       type: "route",
-      icon: <ArchiveIcon color="currentColor" />,
+      icon: <ArchiveIcon />,
       title: t("Archive"),
-      to: "/archive",
+      to: archivePath(),
     };
   }
 
   if (document.isTemplate) {
     return {
       type: "route",
-      icon: <ShapesIcon color="currentColor" />,
+      icon: <ShapesIcon />,
       title: t("Templates"),
-      to: "/templates",
+      to: templatesPath(),
     };
   }
 
@@ -56,29 +62,32 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
-  const collection = collections.get(document.collectionId);
+  const collection = document.collectionId
+    ? collections.get(document.collectionId)
+    : undefined;
 
-  let collectionNode: MenuInternalLink;
+  let collectionNode: MenuInternalLink | undefined;
 
   if (collection) {
     collectionNode = {
       type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionUrl(collection.url),
+      to: collectionPath(collection.url),
     };
-  } else {
+  } else if (document.collectionId && !collection) {
     collectionNode = {
       type: "route",
       title: t("Deleted Collection"),
       icon: undefined,
-      to: collectionUrl("deleted-collection"),
+      to: collectionPath("deleted-collection"),
     };
   }
 
   const path = React.useMemo(
-    () => collection?.pathToDocument?.(document.id).slice(0, -1) || [],
-    [collection, document]
+    () => collection?.pathToDocument(document.id).slice(0, -1) || [],
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    [collection, document, document.collectionId, document.parentDocumentId]
   );
 
   const items = React.useMemo(() => {
@@ -88,7 +97,9 @@ const DocumentBreadcrumb: React.FC<Props> = ({
       output.push(category);
     }
 
-    output.push(collectionNode);
+    if (collectionNode) {
+      output.push(collectionNode);
+    }
 
     path.forEach((node: NavigationNode) => {
       output.push({
@@ -127,7 +138,7 @@ const SmallSlash = styled(GoToIcon)`
   vertical-align: middle;
   flex-shrink: 0;
 
-  fill: ${(props) => props.theme.slate};
+  fill: ${(props) => props.theme.textTertiary};
   opacity: 0.5;
 `;
 

app/components/DocumentCard.tsx

@@ -7,14 +7,16 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
-import CollectionIcon from "./CollectionIcon";
-import EmojiIcon from "./EmojiIcon";
+import { hover } from "~/styles";
+import CollectionIcon from "./Icons/CollectionIcon";
+import EmojiIcon from "./Icons/EmojiIcon";
 import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
@@ -35,7 +37,9 @@ function DocumentCard(props: Props) {
   const { collections } = useStores();
   const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
-  const collection = collections.get(document.collectionId);
+  const collection = document.collectionId
+    ? collections.get(document.collectionId)
+    : undefined;
   const {
     attributes,
     listeners,
@@ -54,10 +58,10 @@ function DocumentCard(props: Props) {
   };
 
   const handleUnpin = React.useCallback(
-    (ev) => {
+    async (ev) => {
       ev.preventDefault();
       ev.stopPropagation();
-      pin?.delete();
+      await pin?.delete();
     },
     [pin]
   );
@@ -127,7 +131,7 @@ function DocumentCard(props: Props) {
                   : document.titleWithDefault}
               </Heading>
               <DocumentMeta size="xsmall">
-                <Clock color="currentColor" size={18} />
+                <Clock size={18} />
                 <Time
                   dateTime={document.updatedAt}
                   tooltipDelay={500}
@@ -142,7 +146,7 @@ function DocumentCard(props: Props) {
               {!isDragging && pin && (
                 <Tooltip tooltip={t("Unpin")}>
                   <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                    <CloseIcon color="currentColor" />
+                    <CloseIcon />
                   </PinButton>
                 </Tooltip>
               )}
@@ -164,9 +168,9 @@ const AnimatePresence = styled(m.div)`
 `;
 
 const Fold = styled.svg`
-  fill: ${(props) => props.theme.background};
-  stroke: ${(props) => props.theme.inputBorder};
-  background: ${(props) => props.theme.background};
+  fill: ${s("background")};
+  stroke: ${s("inputBorder")};
+  background: ${s("background")};
 
   position: absolute;
   top: -1px;
@@ -174,11 +178,11 @@ const Fold = styled.svg`
 `;
 
 const PinButton = styled(NudeButton)`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 
-  &:hover,
+  &:${hover},
   &:active {
-    color: ${(props) => props.theme.text};
+    color: ${s("text")};
   }
 `;
 
@@ -188,7 +192,7 @@ const Actions = styled(Flex)`
   right: ${(props) => (props.dir === "rtl" ? "auto" : "4px")};
   left: ${(props) => (props.dir === "rtl" ? "4px" : "auto")};
   opacity: 0;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 
   // move actions above content
   z-index: 2;
@@ -206,7 +210,7 @@ const Reorderable = styled.div<{ $isDragging: boolean }>`
   z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
   pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};
 
-  &:hover ${Actions} {
+  &: ${hover} ${Actions} {
     opacity: 1;
   }
 `;
@@ -217,14 +221,12 @@ const Content = styled(Flex)`
 `;
 
 const DocumentMeta = styled(Text)`
+  ${ellipsis()}
   display: flex;
   align-items: center;
   gap: 2px;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin: 0 0 0 -2px;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
 `;
 
 const DocumentLink = styled(Link)<{
@@ -237,9 +239,9 @@ const DocumentLink = styled(Link)<{
   height: 100%;
   border-radius: 8px;
   cursor: var(--pointer);
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
   transition: transform 50ms ease-in-out;
-  border: 1px solid ${(props) => props.theme.inputBorder};
+  border: 1px solid ${s("inputBorder")};
   border-bottom-width: 2px;
   border-right-width: 2px;
 
@@ -247,7 +249,7 @@ const DocumentLink = styled(Link)<{
     opacity: 0;
   }
 
-  &:hover,
+  &:${hover},
   &:active,
   &:focus,
   &:focus-within {
@@ -276,7 +278,7 @@ const Heading = styled.h3`
   max-height: 66px; // 3*line-height
   overflow: hidden;
 
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

app/components/DocumentContext.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { Editor } from "~/editor";
+
+export type DocumentContextValue = {
+  /** The current editor instance for this document. */
+  editor: Editor | null;
+  /** Set the current editor instance for this document. */
+  setEditor: (editor: Editor) => void;
+};
+
+const DocumentContext = React.createContext<DocumentContextValue>({
+  editor: null,
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
+  setEditor() {},
+});
+
+export const useDocumentContext = () => React.useContext(DocumentContext);
+
+export default DocumentContext;

app/components/DocumentExplorer.tsx

@@ -0,0 +1,414 @@
+import FuzzySearch from "fuzzy-search";
+import { includes, difference, concat, filter, map, fill } from "lodash";
+import { observer } from "mobx-react";
+import { StarredIcon, DocumentIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import AutoSizer from "react-virtualized-auto-sizer";
+import { FixedSizeList as List } from "react-window";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import styled, { useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { NavigationNode } from "@shared/types";
+import parseTitle from "@shared/utils/parseTitle";
+import DocumentExplorerNode from "~/components/DocumentExplorerNode";
+import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
+import Flex from "~/components/Flex";
+import CollectionIcon from "~/components/Icons/CollectionIcon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import { Outline } from "~/components/Input";
+import InputSearch from "~/components/InputSearch";
+import Text from "~/components/Text";
+import useMobile from "~/hooks/useMobile";
+import useStores from "~/hooks/useStores";
+import { isModKey } from "~/utils/keyboard";
+import { ancestors, descendants } from "~/utils/tree";
+
+type Props = {
+  /** Action taken upon submission of selected item, could be publish, move etc. */
+  onSubmit: () => void;
+
+  /** A side-effect of item selection */
+  onSelect: (item: NavigationNode | null) => void;
+
+  /** Items to be shown in explorer */
+  items: NavigationNode[];
+};
+
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
+  const isMobile = useMobile();
+  const { collections, documents } = useStores();
+  const { t } = useTranslation();
+  const theme = useTheme();
+
+  const [searchTerm, setSearchTerm] = React.useState<string>();
+  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
+    null
+  );
+  const [initialScrollOffset, setInitialScrollOffset] =
+    React.useState<number>(0);
+  const [activeNode, setActiveNode] = React.useState<number>(0);
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
+  const [itemRefs, setItemRefs] = React.useState<
+    React.RefObject<HTMLSpanElement>[]
+  >([]);
+
+  const inputSearchRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>(
+    null
+  );
+  const listRef = React.useRef<List<NavigationNode[]>>(null);
+
+  const VERTICAL_PADDING = 6;
+  const HORIZONTAL_PADDING = 24;
+
+  const searchIndex = React.useMemo(
+    () =>
+      new FuzzySearch(items, ["title"], {
+        caseSensitive: false,
+      }),
+    [items]
+  );
+
+  React.useEffect(() => {
+    if (searchTerm) {
+      selectNode(null);
+      setExpandedNodes([]);
+    }
+    setActiveNode(0);
+  }, [searchTerm]);
+
+  React.useEffect(() => {
+    setItemRefs((itemRefs) =>
+      map(
+        fill(Array(items.length), 0),
+        (_, i) => itemRefs[i] || React.createRef()
+      )
+    );
+  }, [items.length]);
+
+  React.useEffect(() => {
+    onSelect(selectedNode);
+  }, [selectedNode, onSelect]);
+
+  function getNodes() {
+    function includeDescendants(item: NavigationNode): NavigationNode[] {
+      return expandedNodes.includes(item.id)
+        ? [item, ...descendants(item, 1).flatMap(includeDescendants)]
+        : [item];
+    }
+
+    return searchTerm
+      ? searchIndex.search(searchTerm)
+      : items
+          .filter((item) => item.type === "collection")
+          .flatMap(includeDescendants);
+  }
+
+  const nodes = getNodes();
+
+  const scrollNodeIntoView = React.useCallback(
+    (node: number) => {
+      if (itemRefs[node] && itemRefs[node].current) {
+        scrollIntoView(itemRefs[node].current as HTMLSpanElement, {
+          behavior: "auto",
+          block: "center",
+        });
+      }
+    },
+    [itemRefs]
+  );
+
+  const handleSearch = (ev: React.ChangeEvent<HTMLInputElement>) => {
+    setSearchTerm(ev.target.value);
+  };
+
+  const isExpanded = (node: number) => includes(expandedNodes, nodes[node].id);
+
+  const calculateInitialScrollOffset = (itemCount: number) => {
+    if (listRef.current) {
+      const { height, itemSize } = listRef.current.props;
+      const { scrollOffset } = listRef.current.state as {
+        scrollOffset: number;
+      };
+      const itemsHeight = itemCount * itemSize;
+      return itemsHeight < Number(height) ? 0 : scrollOffset;
+    }
+    return 0;
+  };
+
+  const collapse = (node: number) => {
+    const descendantIds = descendants(nodes[node]).map((des) => des.id);
+    setExpandedNodes(
+      difference(expandedNodes, [...descendantIds, nodes[node].id])
+    );
+
+    // remove children
+    const newNodes = filter(nodes, (node) => !includes(descendantIds, node.id));
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
+  };
+
+  const expand = (node: number) => {
+    setExpandedNodes(concat(expandedNodes, nodes[node].id));
+
+    // add children
+    const newNodes = nodes.slice();
+    newNodes.splice(node + 1, 0, ...descendants(nodes[node], 1));
+    const scrollOffset = calculateInitialScrollOffset(newNodes.length);
+    setInitialScrollOffset(scrollOffset);
+  };
+
+  React.useEffect(() => {
+    collections.orderedData
+      .filter(
+        (collection) => expandedNodes.includes(collection.id) || searchTerm
+      )
+      .forEach((collection) => {
+        void collection.fetchDocuments();
+      });
+  }, [collections, expandedNodes, searchTerm]);
+
+  const isSelected = (node: number) => {
+    if (!selectedNode) {
+      return false;
+    }
+    const selectedNodeId = selectedNode.id;
+    const nodeId = nodes[node].id;
+
+    return selectedNodeId === nodeId;
+  };
+
+  const hasChildren = (node: number) =>
+    nodes[node].children.length > 0 || nodes[node].type === "collection";
+
+  const toggleCollapse = (node: number) => {
+    if (!hasChildren(node)) {
+      return;
+    }
+    if (isExpanded(node)) {
+      collapse(node);
+    } else {
+      expand(node);
+    }
+  };
+
+  const toggleSelect = (node: number) => {
+    if (isSelected(node)) {
+      selectNode(null);
+    } else {
+      selectNode(nodes[node]);
+    }
+  };
+
+  const ListItem = ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: NavigationNode[];
+    style: React.CSSProperties;
+  }) => {
+    const node = data[index];
+    const isCollection = node.type === "collection";
+    let icon, title, path;
+
+    if (isCollection) {
+      const col = collections.get(node.collectionId as string);
+      icon = col && (
+        <CollectionIcon collection={col} expanded={isExpanded(index)} />
+      );
+      title = node.title;
+    } else {
+      const doc = documents.get(node.id);
+      const { strippedTitle, emoji } = parseTitle(node.title);
+      title = strippedTitle;
+
+      if (emoji) {
+        icon = <EmojiIcon emoji={emoji} />;
+      } else if (doc?.isStarred) {
+        icon = <StarredIcon color={theme.yellow} />;
+      } else {
+        icon = <DocumentIcon color={theme.textSecondary} />;
+      }
+
+      path = ancestors(node)
+        .map((a) => parseTitle(a.title).strippedTitle)
+        .join(" / ");
+    }
+
+    return searchTerm ? (
+      <DocumentExplorerSearchResult
+        selected={isSelected(index)}
+        active={activeNode === index}
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        icon={icon}
+        title={title}
+        path={path}
+      />
+    ) : (
+      <DocumentExplorerNode
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        onDisclosureClick={(ev) => {
+          ev.stopPropagation();
+          toggleCollapse(index);
+        }}
+        selected={isSelected(index)}
+        active={activeNode === index}
+        expanded={isExpanded(index)}
+        icon={icon}
+        title={title}
+        depth={node.depth as number}
+        hasChildren={hasChildren(index)}
+        ref={itemRefs[index]}
+      />
+    );
+  };
+
+  const focusSearchInput = () => {
+    inputSearchRef.current?.focus();
+  };
+
+  const next = () => Math.min(activeNode + 1, nodes.length - 1);
+
+  const prev = () => Math.max(activeNode - 1, 0);
+
+  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    switch (ev.key) {
+      case "ArrowDown": {
+        ev.preventDefault();
+        ev.stopPropagation();
+        setActiveNode(next());
+        scrollNodeIntoView(next());
+        break;
+      }
+      case "ArrowUp": {
+        ev.preventDefault();
+        ev.stopPropagation();
+        if (activeNode === 0) {
+          focusSearchInput();
+        } else {
+          setActiveNode(prev());
+          scrollNodeIntoView(prev());
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        if (!searchTerm && isExpanded(activeNode)) {
+          toggleCollapse(activeNode);
+        }
+        break;
+      }
+      case "ArrowRight": {
+        if (!searchTerm) {
+          toggleCollapse(activeNode);
+          // let the nodes re-render first and then scroll
+          setTimeout(() => scrollNodeIntoView(activeNode), 0);
+        }
+        break;
+      }
+      case "Enter": {
+        if (isModKey(ev)) {
+          onSubmit();
+        } else {
+          toggleSelect(activeNode);
+        }
+        break;
+      }
+    }
+  };
+
+  const innerElementType = React.forwardRef<
+    HTMLDivElement,
+    React.HTMLAttributes<HTMLDivElement>
+  >(({ style, ...rest }, ref) => (
+    <div
+      ref={ref}
+      style={{
+        ...style,
+        height: `${parseFloat(style?.height + "") + VERTICAL_PADDING * 2}px`,
+      }}
+      {...rest}
+    />
+  ));
+
+  return (
+    <Container tabIndex={-1} onKeyDown={handleKeyDown}>
+      <ListSearch
+        ref={inputSearchRef}
+        onChange={handleSearch}
+        placeholder={`${t("Search collections & documents")}…`}
+        autoFocus
+      />
+      <ListContainer>
+        {nodes.length ? (
+          <AutoSizer>
+            {({ width, height }: { width: number; height: number }) => (
+              <Flex role="listbox" column>
+                <List
+                  ref={listRef}
+                  key={nodes.length}
+                  width={width}
+                  height={height}
+                  itemData={nodes}
+                  itemCount={nodes.length}
+                  itemSize={isMobile ? 48 : 32}
+                  innerElementType={innerElementType}
+                  initialScrollOffset={initialScrollOffset}
+                  itemKey={(index, results) => results[index].id}
+                >
+                  {ListItem}
+                </List>
+              </Flex>
+            )}
+          </AutoSizer>
+        ) : (
+          <FlexContainer>
+            <Text type="secondary">{t("No results found")}.</Text>
+          </FlexContainer>
+        )}
+      </ListContainer>
+    </Container>
+  );
+}
+
+const Container = styled.div``;
+
+const FlexContainer = styled(Flex)`
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+`;
+
+const ListSearch = styled(InputSearch)`
+  ${Outline} {
+    border-radius: 16px;
+  }
+  margin-bottom: 4px;
+  padding-left: 24px;
+  padding-right: 24px;
+`;
+
+const ListContainer = styled.div`
+  height: 65vh;
+
+  ${breakpoint("tablet")`
+    height: 40vh;
+  `}
+`;
+
+export default observer(DocumentExplorer);

app/components/DocumentExplorerNode.tsx

@@ -0,0 +1,133 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { s, ellipsis } from "@shared/styles";
+import Flex from "~/components/Flex";
+import Disclosure from "~/components/Sidebar/components/Disclosure";
+import Text from "~/components/Text";
+
+type Props = {
+  selected: boolean;
+  active: boolean;
+  style: React.CSSProperties;
+  expanded: boolean;
+  icon?: React.ReactNode;
+  title: string;
+  depth: number;
+  hasChildren: boolean;
+
+  onDisclosureClick: (ev: React.MouseEvent) => void;
+  onPointerMove: (ev: React.MouseEvent) => void;
+  onClick: (ev: React.MouseEvent) => void;
+};
+
+function DocumentExplorerNode(
+  {
+    selected,
+    active,
+    style,
+    expanded,
+    icon,
+    title,
+    depth,
+    hasChildren,
+    onDisclosureClick,
+    onPointerMove,
+    onClick,
+  }: Props,
+  ref: React.RefObject<HTMLSpanElement>
+) {
+  const { t } = useTranslation();
+  const OFFSET = 12;
+  const ICON_SIZE = 24;
+
+  const width = depth ? depth * ICON_SIZE + OFFSET : ICON_SIZE;
+
+  return (
+    <Node
+      ref={ref}
+      selected={selected}
+      active={active}
+      onClick={onClick}
+      style={style}
+      onPointerMove={onPointerMove}
+      role="option"
+    >
+      <Spacer width={width}>
+        {hasChildren && (
+          <StyledDisclosure
+            expanded={expanded}
+            onClick={onDisclosureClick}
+            tabIndex={-1}
+          />
+        )}
+      </Spacer>
+      {icon}
+      <Title>{title || t("Untitled")}</Title>
+    </Node>
+  );
+}
+
+const Title = styled(Text)`
+  ${ellipsis()}
+  margin: 0 4px 0 4px;
+  color: inherit;
+`;
+
+const StyledDisclosure = styled(Disclosure)`
+  position: relative;
+  left: auto;
+  margin-top: 2px;
+`;
+
+const Spacer = styled(Flex)<{ width: number }>`
+  flex-direction: row-reverse;
+  flex-shrink: 0;
+  width: ${(props) => props.width}px;
+`;
+
+export const Node = styled.span<{
+  active: boolean;
+  selected: boolean;
+  style: React.CSSProperties;
+}>`
+  display: flex;
+  user-select: none;
+  overflow: hidden;
+  font-size: 16px;
+  width: ${(props) => props.style.width};
+  color: ${s("text")};
+  cursor: var(--pointer);
+  padding: 12px;
+  border-radius: 6px;
+  background: ${(props) =>
+    !props.selected && props.active && props.theme.listItemHoverBackground};
+
+  svg {
+    flex-shrink: 0;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  ${(props) =>
+    props.selected &&
+    `
+      background: ${props.theme.accent};
+      color: ${props.theme.white};
+
+      svg {
+        fill: ${props.theme.white};
+      }
+    `}
+
+  ${breakpoint("tablet")`
+    padding: 4px;
+    font-size: 15px;
+  `}
+`;
+
+export default observer(React.forwardRef(DocumentExplorerNode));

app/components/DocumentExplorerSearchResult.tsx

@@ -0,0 +1,84 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import scrollIntoView from "smooth-scroll-into-view-if-needed";
+import styled from "styled-components";
+import { ellipsis } from "@shared/styles";
+import { Node as SearchResult } from "~/components/DocumentExplorerNode";
+import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+
+type Props = {
+  selected: boolean;
+  active: boolean;
+  style: React.CSSProperties;
+  icon?: React.ReactNode;
+  title: string;
+  path?: string;
+
+  onPointerMove: (ev: React.MouseEvent) => void;
+  onClick: (ev: React.MouseEvent) => void;
+};
+
+function DocumentExplorerSearchResult({
+  selected,
+  active,
+  style,
+  icon,
+  title,
+  path,
+  onPointerMove,
+  onClick,
+}: Props) {
+  const { t } = useTranslation();
+
+  const ref = React.useCallback(
+    (node: HTMLSpanElement | null) => {
+      if (active && node) {
+        scrollIntoView(node, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+          block: "nearest",
+        });
+      }
+    },
+    [active]
+  );
+
+  return (
+    <SearchResult
+      ref={ref}
+      selected={selected}
+      active={active}
+      onClick={onClick}
+      style={style}
+      onPointerMove={onPointerMove}
+      role="option"
+    >
+      {icon}
+      <Flex>
+        <Title>{title || t("Untitled")}</Title>
+        <Path $selected={selected} size="xsmall">
+          {path}
+        </Path>
+      </Flex>
+    </SearchResult>
+  );
+}
+
+const Title = styled(Text)`
+  flex-shrink: 0;
+  white-space: nowrap;
+  margin: 0 4px 0 4px;
+  color: inherit;
+`;
+
+const Path = styled(Text)<{ $selected: boolean }>`
+  ${ellipsis()}
+  padding-top: 2px;
+  margin: 0 4px 0 8px;
+  color: ${(props) =>
+    props.$selected ? props.theme.white50 : props.theme.textTertiary};
+`;
+
+export default observer(DocumentExplorerSearchResult);

app/components/DocumentHistory.tsx

@@ -1,158 +0,0 @@
-import { m } from "framer-motion";
-import { observer } from "mobx-react";
-import { CloseIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useHistory, useRouteMatch } from "react-router-dom";
-import styled, { useTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import Event from "~/models/Event";
-import Button from "~/components/Button";
-import Empty from "~/components/Empty";
-import Flex from "~/components/Flex";
-import PaginatedEventList from "~/components/PaginatedEventList";
-import Scrollable from "~/components/Scrollable";
-import useKeyDown from "~/hooks/useKeyDown";
-import useStores from "~/hooks/useStores";
-import { documentUrl } from "~/utils/routeHelpers";
-
-const EMPTY_ARRAY: Event[] = [];
-
-function DocumentHistory() {
-  const { events, documents } = useStores();
-  const { t } = useTranslation();
-  const match = useRouteMatch<{ documentSlug: string }>();
-  const history = useHistory();
-  const theme = useTheme();
-  const document = documents.getByUrl(match.params.documentSlug);
-
-  const eventsInDocument = document
-    ? events.inDocument(document.id)
-    : EMPTY_ARRAY;
-
-  const onCloseHistory = () => {
-    if (document) {
-      history.push(documentUrl(document));
-    } else {
-      history.goBack();
-    }
-  };
-
-  const items = React.useMemo(() => {
-    if (
-      eventsInDocument[0] &&
-      document &&
-      eventsInDocument[0].createdAt !== document.updatedAt
-    ) {
-      eventsInDocument.unshift(
-        new Event(
-          {
-            id: "live",
-            name: "documents.live_editing",
-            documentId: document.id,
-            createdAt: document.updatedAt,
-            actor: document.updatedBy,
-          },
-          events
-        )
-      );
-    }
-
-    return eventsInDocument;
-  }, [eventsInDocument, events, document]);
-
-  useKeyDown("Escape", onCloseHistory);
-
-  return (
-    <Sidebar
-      initial={{
-        width: 0,
-      }}
-      animate={{
-        transition: {
-          type: "spring",
-          bounce: 0.2,
-          duration: 0.6,
-        },
-        width: theme.sidebarWidth,
-      }}
-      exit={{
-        width: 0,
-      }}
-    >
-      {document ? (
-        <Position column>
-          <Header>
-            <Title>{t("History")}</Title>
-            <Button
-              icon={<CloseIcon />}
-              onClick={onCloseHistory}
-              borderOnHover
-              neutral
-            />
-          </Header>
-          <Scrollable topShadow>
-            <PaginatedEventList
-              aria-label={t("History")}
-              fetch={events.fetchPage}
-              events={items}
-              options={{
-                documentId: document.id,
-              }}
-              document={document}
-              empty={<EmptyHistory>{t("No history yet")}</EmptyHistory>}
-            />
-          </Scrollable>
-        </Position>
-      ) : null}
-    </Sidebar>
-  );
-}
-
-const EmptyHistory = styled(Empty)`
-  padding: 0 12px;
-`;
-
-const Position = styled(Flex)`
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: ${(props) => props.theme.sidebarWidth}px;
-`;
-
-const Sidebar = styled(m.div)`
-  display: none;
-  position: relative;
-  flex-shrink: 0;
-  background: ${(props) => props.theme.background};
-  width: ${(props) => props.theme.sidebarWidth}px;
-  border-left: 1px solid ${(props) => props.theme.divider};
-  z-index: 1;
-
-  ${breakpoint("tablet")`
-    display: flex;
-  `};
-`;
-
-const Title = styled(Flex)`
-  font-size: 16px;
-  font-weight: 600;
-  text-align: center;
-  align-items: center;
-  justify-content: flex-start;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-  width: 0;
-  flex-grow: 1;
-`;
-
-const Header = styled(Flex)`
-  align-items: center;
-  position: relative;
-  padding: 16px 12px;
-  color: ${(props) => props.theme.text};
-  flex-shrink: 0;
-`;
-
-export default observer(DocumentHistory);

app/components/DocumentListItem.tsx

@@ -6,6 +6,7 @@ import { Link } from "react-router-dom";
 import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import Button from "~/components/Button";
@@ -177,11 +178,11 @@ const Actions = styled(EventBoundary)`
   margin: 8px;
   flex-shrink: 0;
   flex-grow: 0;
+  color: ${s("textSecondary")};
 
   ${NudeButton} {
-    &:hover,
-    &[aria-expanded="true"] {
-      background: ${(props) => props.theme.sidebarControlHoverBackground};
+    &: ${hover}, &[aria-expanded= "true"] {
+      background: ${s("sidebarControlHoverBackground")};
     }
   }
 
@@ -223,7 +224,7 @@ const DocumentLink = styled(Link)<{
   &:active,
   &:focus,
   &:focus-within {
-    background: ${(props) => props.theme.listItemHoverBackground};
+    background: ${s("listItemHoverBackground")};
 
     ${Actions} {
       opacity: 1;
@@ -232,7 +233,7 @@ const DocumentLink = styled(Link)<{
     ${AnimatedStar} {
       opacity: 0.5;
 
-      &:hover {
+      &:${hover} {
         opacity: 1;
       }
     }
@@ -241,7 +242,7 @@ const DocumentLink = styled(Link)<{
   ${(props) =>
     props.$menuOpen &&
     css`
-      background: ${(props) => props.theme.listItemHoverBackground};
+      background: ${s("listItemHoverBackground")};
 
       ${Actions} {
         opacity: 1;
@@ -260,9 +261,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   height: 24px;
   margin-top: 0;
   margin-bottom: 0.25em;
-  overflow: hidden;
   white-space: nowrap;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;
@@ -280,7 +280,7 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 14px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;

app/components/DocumentMeta.tsx

@@ -4,7 +4,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
+import Revision from "~/models/Revision";
 import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import DocumentTasks from "~/components/DocumentTasks";
 import Flex from "~/components/Flex";
@@ -18,6 +20,7 @@ type Props = {
   showLastViewed?: boolean;
   showParentDocuments?: boolean;
   document: Document;
+  revision?: Revision;
   replace?: boolean;
   to?: LocationDescriptor;
 };
@@ -28,6 +31,7 @@ const DocumentMeta: React.FC<Props> = ({
   showLastViewed,
   showParentDocuments,
   document,
+  revision,
   children,
   replace,
   to,
@@ -56,12 +60,23 @@ const DocumentMeta: React.FC<Props> = ({
     return null;
   }
 
-  const collection = collections.get(document.collectionId);
+  const collection = document.collectionId
+    ? collections.get(document.collectionId)
+    : undefined;
   const lastUpdatedByCurrentUser = user.id === updatedBy.id;
   const userName = updatedBy.name;
   let content;
 
-  if (deletedAt) {
+  if (revision) {
+    content = (
+      <span>
+        {revision.createdBy?.id === user.id
+          ? t("You updated")
+          : t("{{ userName }} updated", { userName })}{" "}
+        <Time dateTime={revision.createdAt} addSuffix />
+      </span>
+    );
+  } else if (deletedAt) {
     content = (
       <span>
         {lastUpdatedByCurrentUser
@@ -184,7 +199,7 @@ const DocumentMeta: React.FC<Props> = ({
 
 const Container = styled(Flex)<{ rtl?: boolean }>`
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   font-size: 13px;
   white-space: nowrap;
   overflow: hidden;
@@ -192,8 +207,7 @@ const Container = styled(Flex)<{ rtl?: boolean }>`
 `;
 
 const Viewed = styled.span`
-  text-overflow: ellipsis;
-  overflow: hidden;
+  ${ellipsis()}
 `;
 
 const Modified = styled.span<{ highlight?: boolean }>`

app/components/DocumentMetaWithViews.tsx

@@ -1,79 +0,0 @@
-import { LocationDescriptor } from "history";
-import { observer, 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?: LocationDescriptor;
-  rtl?: boolean;
-};
-
-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;
-
-  const popover = usePopoverState({
-    gutter: 8,
-    placement: "bottom",
-    modal: true,
-  });
-
-  return (
-    <Meta document={document} to={to} replace {...rest}>
-      {totalViewers && !isDraft ? (
-        <PopoverDisclosure {...popover}>
-          {(props) => (
-            <>
-              &nbsp;•&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)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  margin: -12px 0 2em 0;
-  font-size: 14px;
-  position: relative;
-  z-index: 1;
-
-  a {
-    color: inherit;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-export default observer(DocumentMetaWithViews);

app/components/DocumentTasks.tsx

@@ -1,7 +1,8 @@
+import { TFunction } from "i18next";
 import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
-import { useTranslation, TFunction } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";
 import CircularProgressBar from "~/components/CircularProgressBar";
@@ -43,7 +44,7 @@ function DocumentTasks({ document }: Props) {
     <>
       {completed === total ? (
         <Done
-          color={theme.primary}
+          color={theme.accent}
           size={20}
           $animated={done && previousDone === false}
         />

app/components/DocumentTemplatizeDialog.tsx

@@ -6,7 +6,7 @@ import { useHistory } from "react-router-dom";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
-import { documentUrl } from "~/utils/routeHelpers";
+import { documentPath } from "~/utils/routeHelpers";
 
 type Props = {
   documentId: string;
@@ -23,7 +23,7 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
   const handleSubmit = React.useCallback(async () => {
     const template = await document?.templatize();
     if (template) {
-      history.push(documentUrl(template));
+      history.push(documentPath(template));
       showToast(t("Template created, go ahead and customize it"), {
         type: "info",
       });

app/components/DocumentViews.tsx

@@ -33,9 +33,10 @@ function DocumentViews({ document, isOpen }: Props) {
     documentViews,
     (view) => !presentIds.includes(view.user.id)
   );
-  const users = React.useMemo(() => sortedViews.map((v) => v.user), [
-    sortedViews,
-  ]);
+  const users = React.useMemo(
+    () => sortedViews.map((v) => v.user),
+    [sortedViews]
+  );
 
   return (
     <>
@@ -43,10 +44,10 @@ function DocumentViews({ document, isOpen }: Props) {
         <PaginatedList
           aria-label={t("Viewers")}
           items={users}
-          renderItem={(item: User) => {
-            const view = documentViews.find((v) => v.user.id === item.id);
-            const isPresent = presentIds.includes(item.id);
-            const isEditing = editingIds.includes(item.id);
+          renderItem={(model: User) => {
+            const view = documentViews.find((v) => v.user.id === model.id);
+            const isPresent = presentIds.includes(model.id);
+            const isEditing = editingIds.includes(model.id);
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
@@ -58,10 +59,10 @@ function DocumentViews({ document, isOpen }: Props) {
                 });
             return (
               <ListItem
-                key={item.id}
-                title={item.name}
+                key={model.id}
+                title={model.name}
                 subtitle={subtitle}
-                image={<Avatar key={item.id} src={item.avatarUrl} size={32} />}
+                image={<Avatar key={model.id} model={model} size={32} />}
                 border={false}
                 small
               />

app/components/DocumentsLoader.tsx

@@ -0,0 +1,21 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import Collection from "~/models/Collection";
+
+type Props = {
+  enabled: boolean;
+  collection: Collection;
+  children: React.ReactNode;
+};
+
+function DocumentsLoader({ collection, enabled, children }: Props) {
+  React.useEffect(() => {
+    if (enabled) {
+      void collection.fetchDocuments();
+    }
+  }, [collection, enabled]);
+
+  return <>{children}</>;
+}
+
+export default observer(DocumentsLoader);

app/components/Editor.tsx

@@ -1,13 +1,15 @@
 import { formatDistanceToNow } from "date-fns";
-import { deburr, sortBy } from "lodash";
+import { deburr, difference, sortBy } from "lodash";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
+import { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
-import { Heading } from "@shared/editor/lib/getHeadings";
+import { AttachmentPreset } from "@shared/types";
+import { Heading } from "@shared/utils/ProsemirrorHelper";
 import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isInternalUrl } from "@shared/utils/urls";
@@ -23,19 +25,13 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
-import history from "~/utils/history";
 import { isModKey } from "~/utils/keyboard";
+import lazyWithRetry from "~/utils/lazyWithRetry";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
 import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
-const LazyLoadedEditor = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "preload-shared-editor" */
-      "~/editor"
-    )
-);
+const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
 export type Props = Optional<
   EditorProps,
@@ -49,31 +45,40 @@ export type Props = Optional<
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
-  grow?: boolean;
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
+  editorStyle?: React.CSSProperties;
 };
 
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
-  const { id, shareId, onChange, onHeadingsChange } = props;
-  const { documents } = useStores();
+  const {
+    id,
+    shareId,
+    onChange,
+    onHeadingsChange,
+    onCreateCommentMark,
+    onDeleteCommentMark,
+  } = props;
+  const { auth, comments, documents } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
-  const [
-    activeLinkEvent,
-    setActiveLinkEvent,
-  ] = React.useState<MouseEvent | null>(null);
+  const history = useHistory();
+  const localRef = React.useRef<SharedEditor>();
+  const preferences = auth.user?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
+  const [activeLinkElement, setActiveLink] =
+    React.useState<HTMLAnchorElement | null>(null);
+  const previousCommentIds = React.useRef<string[]>();
 
-  const handleLinkActive = React.useCallback((event: MouseEvent) => {
-    setActiveLinkEvent(event);
+  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
+    setActiveLink(element);
     return false;
   }, []);
 
   const handleLinkInactive = React.useCallback(() => {
-    setActiveLinkEvent(null);
+    setActiveLink(null);
   }, []);
 
   const handleSearchLink = React.useCallback(
@@ -110,13 +115,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       const results = await documents.searchTitles(term);
 
       return sortBy(
-        results.map((document: Document) => {
-          return {
-            title: document.title,
-            subtitle: <DocumentBreadcrumb document={document} onlyText />,
-            url: document.url,
-          };
-        }),
+        results.map((document: Document) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+        })),
         (document) =>
           deburr(document.title)
             .toLowerCase()
@@ -128,17 +131,18 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     [documents]
   );
 
-  const onUploadFile = React.useCallback(
+  const handleUploadFile = React.useCallback(
     async (file: File) => {
       const result = await uploadFile(file, {
         documentId: id,
+        preset: AttachmentPreset.DocumentAttachment,
       });
       return result.url;
     },
     [id]
   );
 
-  const onClickLink = React.useCallback(
+  const handleClickLink = React.useCallback(
     (href: string, event: MouseEvent) => {
       // on page hash
       if (isHash(href)) {
@@ -160,6 +164,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           }
         }
 
+        // Link to our own API should be opened in a new tab, not in the app
+        if (navigateTo.startsWith("/api/")) {
+          window.open(href, "_blank");
+          return;
+        }
+
         // If we're navigating to an internal document link then prepend the
         // share route to the URL so that the document is loaded in context
         if (shareId && navigateTo.includes("/doc/")) {
@@ -171,12 +181,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         window.open(href, "_blank");
       }
     },
-    [shareId]
+    [history, shareId]
   );
 
   const focusAtEnd = React.useCallback(() => {
-    ref?.current?.focusAtEnd();
-  }, [ref]);
+    localRef?.current?.focusAtEnd();
+  }, [localRef]);
 
   const handleDrop = React.useCallback(
     (event: React.DragEvent<HTMLDivElement>) => {
@@ -184,7 +194,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       event.stopPropagation();
       const files = getDataTransferFiles(event);
 
-      const view = ref?.current?.view;
+      const view = localRef?.current?.view;
       if (!view) {
         return;
       }
@@ -219,7 +229,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       );
 
       insertFiles(view, event, pos, files, {
-        uploadFile: onUploadFile,
+        uploadFile: handleUploadFile,
         onFileUploadStart: props.onFileUploadStart,
         onFileUploadStop: props.onFileUploadStop,
         onShowToast: showToast,
@@ -228,11 +238,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       });
     },
     [
-      ref,
+      localRef,
       props.onFileUploadStart,
       props.onFileUploadStop,
       dictionary,
-      onUploadFile,
+      handleUploadFile,
       showToast,
     ]
   );
@@ -249,7 +259,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   // Calculate if headings have changed and trigger callback if so
   const updateHeadings = React.useCallback(() => {
     if (onHeadingsChange) {
-      const headings = ref?.current?.getHeadings();
+      const headings = localRef?.current?.getHeadings();
       if (
         headings &&
         headings.map((h) => h.level + h.title).join("") !==
@@ -259,54 +269,88 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         onHeadingsChange(headings);
       }
     }
-  }, [ref, onHeadingsChange]);
+  }, [localRef, onHeadingsChange]);
+
+  const updateComments = React.useCallback(() => {
+    if (onCreateCommentMark && onDeleteCommentMark) {
+      const commentMarks = localRef.current?.getComments();
+      const commentIds = comments.orderedData.map((c) => c.id);
+      const commentMarkIds = commentMarks?.map((c) => c.id);
+      const newCommentIds = difference(
+        commentMarkIds,
+        previousCommentIds.current ?? [],
+        commentIds
+      );
+
+      newCommentIds.forEach((commentId) => {
+        const mark = commentMarks?.find((c) => c.id === commentId);
+        if (mark) {
+          onCreateCommentMark(mark.id, mark.userId);
+        }
+      });
+
+      const removedCommentIds = difference(
+        previousCommentIds.current ?? [],
+        commentMarkIds ?? []
+      );
+
+      removedCommentIds.forEach((commentId) => {
+        onDeleteCommentMark(commentId);
+      });
+
+      previousCommentIds.current = commentMarkIds;
+    }
+  }, [onCreateCommentMark, onDeleteCommentMark, comments.orderedData]);
 
   const handleChange = React.useCallback(
     (event) => {
       onChange?.(event);
       updateHeadings();
+      updateComments();
     },
-    [onChange, updateHeadings]
+    [onChange, updateComments, updateHeadings]
   );
 
   const handleRefChanged = React.useCallback(
     (node: SharedEditor | null) => {
-      if (node && !previousHeadings.current) {
+      if (node) {
         updateHeadings();
+        updateComments();
       }
     },
-    [updateHeadings]
+    [updateComments, updateHeadings]
   );
 
   return (
-    <ErrorBoundary reloadOnChunkMissing>
+    <ErrorBoundary component="div" reloadOnChunkMissing>
       <>
         <LazyLoadedEditor
-          ref={mergeRefs([ref, handleRefChanged])}
-          uploadFile={onUploadFile}
+          ref={mergeRefs([ref, localRef, handleRefChanged])}
+          uploadFile={handleUploadFile}
           onShowToast={showToast}
           embeds={embeds}
+          userPreferences={preferences}
           dictionary={dictionary}
           {...props}
           onHoverLink={handleLinkActive}
-          onClickLink={onClickLink}
+          onClickLink={handleClickLink}
           onSearchLink={handleSearchLink}
           onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
-        {props.grow && !props.readOnly && (
+        {props.editorStyle?.paddingBottom && !props.readOnly && (
           <ClickablePadding
             onClick={focusAtEnd}
             onDrop={handleDrop}
             onDragOver={handleDragOver}
-            grow
+            minHeight={props.editorStyle.paddingBottom}
           />
         )}
-        {activeLinkEvent && !shareId && (
+        {activeLinkElement && !shareId && (
           <HoverPreview
-            node={activeLinkEvent.target as HTMLAnchorElement}
-            event={activeLinkEvent}
+            id={props.id}
+            element={activeLinkElement}
             onClose={handleLinkInactive}
           />
         )}

app/components/Empty.ts

@@ -1,7 +1,8 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const Empty = styled.p`
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
   user-select: none;
 `;
 

app/components/ErrorBoundary.tsx

@@ -3,7 +3,8 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, Trans, WithTranslation } from "react-i18next";
 import styled from "styled-components";
-import { githubIssuesUrl } from "@shared/utils/urlHelpers";
+import { s } from "@shared/styles";
+import { githubIssuesUrl, feedbackUrl } from "@shared/utils/urlHelpers";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
@@ -13,7 +14,12 @@ import Logger from "~/utils/Logger";
 import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = WithTranslation & {
+  /** Whether to reload the page if a chunk fails to load. */
   reloadOnChunkMissing?: boolean;
+  /** Whether to show a title heading. */
+  showTitle?: boolean;
+  /** The wrapping component to use. */
+  component?: React.ComponentType | string;
 };
 
 @observer
@@ -30,7 +36,7 @@ class ErrorBoundary extends React.Component<Props> {
     if (
       this.props.reloadOnChunkMissing &&
       error.message &&
-      error.message.match(/chunk/)
+      error.message.match(/dynamically imported module/)
     ) {
       // If the editor bundle fails to load then reload the entire window. This
       // can happen if a deploy happens between the user loading the initial JS
@@ -51,24 +57,31 @@ class ErrorBoundary extends React.Component<Props> {
   };
 
   handleReportBug = () => {
-    window.open(githubIssuesUrl());
+    window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl());
   };
 
   render() {
-    const { t } = this.props;
+    const { t, component: Component = CenteredContent, showTitle } = this.props;
 
     if (this.error) {
       const error = this.error;
       const isReported = !!env.SENTRY_DSN && isCloudHosted;
-      const isChunkError = this.error.message.match(/chunk/);
+      const isChunkError = [
+        "module script failed",
+        "dynamically imported module",
+      ].some((msg) => this.error?.message?.includes(msg));
 
       if (isChunkError) {
         return (
-          <CenteredContent>
-            <PageTitle title={t("Module failed to load")} />
-            <h1>
-              <Trans>Loading Failed</Trans>
-            </h1>
+          <Component>
+            {showTitle && (
+              <>
+                <PageTitle title={t("Module failed to load")} />
+                <h1>
+                  <Trans>Loading Failed</Trans>
+                </h1>
+              </>
+            )}
             <Text type="secondary">
               <Trans>
                 Sorry, part of the application failed to load. This may be
@@ -79,16 +92,20 @@ class ErrorBoundary extends React.Component<Props> {
             <p>
               <Button onClick={this.handleReload}>{t("Reload")}</Button>
             </p>
-          </CenteredContent>
+          </Component>
         );
       }
 
       return (
-        <CenteredContent>
-          <PageTitle title={t("Something Unexpected Happened")} />
-          <h1>
-            <Trans>Something Unexpected Happened</Trans>
-          </h1>
+        <Component>
+          {showTitle && (
+            <>
+              <PageTitle title={t("Something Unexpected Happened")} />
+              <h1>
+                <Trans>Something Unexpected Happened</Trans>
+              </h1>
+            </>
+          )}
           <Text type="secondary">
             <Trans
               defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
@@ -112,7 +129,7 @@ class ErrorBoundary extends React.Component<Props> {
               </Button>
             )}
           </p>
-        </CenteredContent>
+        </Component>
       );
     }
 
@@ -121,7 +138,7 @@ class ErrorBoundary extends React.Component<Props> {
 }
 
 const Pre = styled.pre`
-  background: ${(props) => props.theme.secondaryBackground};
+  background: ${s("secondaryBackground")};
   padding: 16px;
   border-radius: 4px;
   font-size: 12px;

app/components/EventListItem.tsx

@@ -7,13 +7,13 @@ import {
   PublishIcon,
   MoveIcon,
   UnpublishIcon,
-  LightningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
@@ -24,7 +24,9 @@ import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
-import { documentHistoryUrl } from "~/utils/routeHelpers";
+import { hover } from "~/styles";
+import Logger from "~/utils/Logger";
+import { documentHistoryPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
@@ -49,33 +51,30 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
     ref.current?.focus();
   };
 
-  const prefetchRevision = () => {
+  const prefetchRevision = async () => {
     if (event.name === "revisions.create" && event.modelId) {
-      revisions.fetch(event.modelId);
+      await revisions.fetch(event.modelId);
     }
   };
 
   switch (event.name) {
     case "revisions.create":
-      icon = <EditIcon color="currentColor" size={16} />;
-      meta = t("{{userName}} edited", opts);
+      icon = <EditIcon size={16} />;
+      meta = latest ? (
+        <>
+          {t("Current version")} &middot; {event.actor.name}
+        </>
+      ) : (
+        t("{{userName}} edited", opts)
+      );
       to = {
-        pathname: documentHistoryUrl(document, event.modelId || ""),
-        state: { retainScrollPosition: true },
-      };
-      break;
-
-    case "documents.live_editing":
-      icon = <LightningIcon color="currentColor" size={16} />;
-      meta = t("Latest");
-      to = {
-        pathname: documentHistoryUrl(document),
+        pathname: documentHistoryPath(document, event.modelId || "latest"),
         state: { retainScrollPosition: true },
       };
       break;
 
     case "documents.archive":
-      icon = <ArchiveIcon color="currentColor" size={16} />;
+      icon = <ArchiveIcon size={16} />;
       meta = t("{{userName}} archived", opts);
       break;
 
@@ -84,7 +83,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.delete":
-      icon = <TrashIcon color="currentColor" size={16} />;
+      icon = <TrashIcon size={16} />;
       meta = t("{{userName}} deleted", opts);
       break;
 
@@ -93,22 +92,22 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       break;
 
     case "documents.publish":
-      icon = <PublishIcon color="currentColor" size={16} />;
+      icon = <PublishIcon size={16} />;
       meta = t("{{userName}} published", opts);
       break;
 
     case "documents.unpublish":
-      icon = <UnpublishIcon color="currentColor" size={16} />;
+      icon = <UnpublishIcon size={16} />;
       meta = t("{{userName}} unpublished", opts);
       break;
 
     case "documents.move":
-      icon = <MoveIcon color="currentColor" size={16} />;
+      icon = <MoveIcon size={16} />;
       meta = t("{{userName}} moved", opts);
       break;
 
     default:
-      console.warn("Unhandled event: ", event.name);
+      Logger.warn("Unhandled event", { event });
   }
 
   if (!meta) {
@@ -142,7 +141,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
           onClick={handleTimeClick}
         />
       }
-      image={<Avatar src={event.actor?.avatarUrl} size={32} />}
+      image={<Avatar model={event.actor} size={32} />}
       subtitle={
         <Subtitle>
           {icon}
@@ -150,7 +149,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         </Subtitle>
       }
       actions={
-        isRevision && isActive && event.modelId ? (
+        isRevision && isActive && event.modelId && !latest ? (
           <RevisionMenu document={document} revisionId={event.modelId} />
         ) : undefined
       }
@@ -197,7 +196,7 @@ const ItemStyle = css`
     left: 23px;
     width: 2px;
     height: calc(100% + 8px);
-    background: ${(props) => props.theme.textSecondary};
+    background: ${s("textSecondary")};
     opacity: 0.25;
   }
 
@@ -218,7 +217,7 @@ const ItemStyle = css`
   ${Actions} {
     opacity: 0.5;
 
-    &:hover {
+    &: ${hover} {
       opacity: 1;
     }
   }

app/components/ExportDialog.tsx

@@ -0,0 +1,150 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { FileOperationFormat, NotificationEventType } from "@shared/types";
+import Collection from "~/models/Collection";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Flex from "~/components/Flex";
+import Text from "~/components/Text";
+import env from "~/env";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+
+type Props = {
+  collection?: Collection;
+  onSubmit: () => void;
+};
+
+function ExportDialog({ collection, onSubmit }: Props) {
+  const [format, setFormat] = React.useState<FileOperationFormat>(
+    FileOperationFormat.MarkdownZip
+  );
+  const [includeAttachments, setIncludeAttachments] =
+    React.useState<boolean>(true);
+  const user = useCurrentUser();
+  const { showToast } = useToasts();
+  const { collections } = useStores();
+  const { t } = useTranslation();
+  const appName = env.APP_NAME;
+
+  const handleFormatChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setFormat(ev.target.value as FileOperationFormat);
+    },
+    []
+  );
+
+  const handleIncludeAttachmentsChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setIncludeAttachments(ev.target.checked);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    if (collection) {
+      await collection.export(format, includeAttachments);
+    } else {
+      await collections.export(format, includeAttachments);
+    }
+    onSubmit();
+    showToast(t("Export started"), { type: "success" });
+  };
+
+  const items = [
+    {
+      title: "Markdown",
+      description: t(
+        "A ZIP file containing the images, and documents in the Markdown format."
+      ),
+      value: FileOperationFormat.MarkdownZip,
+    },
+    {
+      title: "HTML",
+      description: t(
+        "A ZIP file containing the images, and documents as HTML files."
+      ),
+      value: FileOperationFormat.HTMLZip,
+    },
+    {
+      title: "JSON",
+      description: t(
+        "Structured data that can be used to transfer data to another compatible {{ appName }} instance.",
+        {
+          appName,
+        }
+      ),
+      value: FileOperationFormat.JSON,
+    },
+  ];
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
+      {collection && (
+        <Text>
+          <Trans
+            defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
+            values={{
+              collectionName: collection.name,
+            }}
+            components={{
+              em: <strong />,
+            }}
+          />{" "}
+          {user.subscribedToEventType(NotificationEventType.ExportCompleted) &&
+            t("You will receive an email when it's complete.")}
+        </Text>
+      )}
+      <Flex gap={12} column>
+        {items.map((item) => (
+          <Option>
+            <input
+              type="radio"
+              name="format"
+              value={item.value}
+              checked={format === item.value}
+              onChange={handleFormatChange}
+            />
+            <div>
+              <Text size="small" weight="bold">
+                {item.title}
+              </Text>
+              <Text size="small">{item.description}</Text>
+            </div>
+          </Option>
+        ))}
+      </Flex>
+      <hr />
+      <Option>
+        <input
+          type="checkbox"
+          name="includeAttachments"
+          checked={includeAttachments}
+          onChange={handleIncludeAttachmentsChange}
+        />
+        <div>
+          <Text size="small" weight="bold">
+            {t("Include attachments")}
+          </Text>
+          <Text size="small">
+            {t("Including uploaded images and files in the exported data")}.
+          </Text>{" "}
+        </div>
+      </Option>
+    </ConfirmationDialog>
+  );
+}
+
+const Option = styled.label`
+  display: flex;
+  align-items: center;
+  gap: 16px;
+
+  p {
+    margin: 0;
+  }
+`;
+
+export default observer(ExportDialog);

app/components/Facepile.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
@@ -39,7 +40,7 @@ function Facepile({
 }
 
 function DefaultAvatar(user: User) {
-  return <Avatar user={user} src={user.avatarUrl} size={32} />;
+  return <Avatar model={user} size={32} />;
 }
 
 const AvatarWrapper = styled.div`
@@ -59,8 +60,8 @@ const More = styled.div<{ size: number }>`
   height: ${(props) => props.size}px;
   border-radius: 100%;
   background: ${(props) => props.theme.slate};
-  color: ${(props) => props.theme.text};
-  border: 2px solid ${(props) => props.theme.background};
+  color: ${s("text")};
+  border: 2px solid ${s("background")};
   text-align: center;
   font-size: 11px;
   font-weight: 600;

app/components/FilterOptions.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
@@ -10,6 +11,7 @@ type TFilterOption = {
   key: string;
   label: string;
   note?: string;
+  icon?: React.ReactNode;
 };
 
 type Props = {
@@ -57,6 +59,7 @@ const FilterOptions = ({
             selected={option.key === activeKey}
             {...menu}
           >
+            {option.icon && <Icon>{option.icon}</Icon>}
             {option.note ? (
               <LabelWithNote>
                 {option.label}
@@ -78,7 +81,7 @@ const Note = styled(Text)`
   line-height: 1.2em;
   font-size: 14px;
   font-weight: 400;
-  color: ${(props) => props.theme.textTertiary};
+  color: ${s("textTertiary")};
 `;
 
 const LabelWithNote = styled.div`
@@ -106,6 +109,12 @@ const StyledButton = styled(Button)`
   }
 `;
 
+const Icon = styled.div`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+
 const Wrapper = styled.div`
   margin-right: 8px;
 `;

app/components/Flex.tsx

@@ -10,6 +10,7 @@ const Flex = styled.div<{
   column?: boolean;
   align?: AlignValues;
   justify?: JustifyValues;
+  wrap?: boolean;
   shrink?: boolean;
   reverse?: boolean;
   gap?: number;
@@ -26,7 +27,9 @@ const Flex = styled.div<{
       : "row"};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
-  flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};
+  flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
+  flex-shrink: ${({ shrink }) =>
+    shrink === true ? 1 : shrink === false ? 0 : "initial"};
   gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
   min-height: 0;
   min-width: 0;

app/components/GithubLogo.tsx

@@ -1,29 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function GithubLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 36 36"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        fill="#191717"
-        d="M18,1.4C9,1.4,1.7,8.7,1.7,17.7c0,7.2,4.7,13.3,11.1,15.5  c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1  c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4  c-0.2-0.4-0.7-2.1,0.2-4.3c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7  c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5  c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C34.3,8.7,27,1.4,18,1.4z"
-      />
-    </svg>
-  );
-}
-
-export default GithubLogo;

app/components/GroupListItem.tsx

@@ -1,10 +1,10 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import { GroupIcon } from "outline-icons";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "@shared/constants";
-import RootStore from "~/stores/RootStore";
+import { s } from "@shared/styles";
 import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
 import GroupMembers from "~/scenes/GroupMembers";
@@ -12,10 +12,12 @@ import Facepile from "~/components/Facepile";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
-import withStores from "~/components/withStores";
+import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
-type Props = RootStore & {
+type Props = {
   group: Group;
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
@@ -23,71 +25,54 @@ type Props = RootStore & {
   renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
-@observer
-class GroupListItem extends React.Component<Props> {
-  @observable
-  membersModalOpen = false;
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupMemberships } = useStores();
+  const { t } = useTranslation();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
+  const memberCount = group.memberCount;
+  const membershipsInGroup = groupMemberships.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
+  const overflow = memberCount - users.length;
 
-  handleMembersModalOpen = () => {
-    this.membersModalOpen = true;
-  };
-
-  handleMembersModalClose = () => {
-    this.membersModalOpen = false;
-  };
-
-  render() {
-    const { group, groupMemberships, showFacepile, renderActions } = this.props;
-    const memberCount = group.memberCount;
-    const membershipsInGroup = groupMemberships.inGroup(group.id);
-    const users = membershipsInGroup
-      .slice(0, MAX_AVATAR_DISPLAY)
-      .map((gm) => gm.user);
-    const overflow = memberCount - users.length;
-
-    return (
-      <>
-        <ListItem
-          image={
-            <Image>
-              <GroupIcon size={24} />
-            </Image>
-          }
-          title={
-            <Title onClick={this.handleMembersModalOpen}>{group.name}</Title>
-          }
-          subtitle={
-            <>
-              {memberCount} member{memberCount === 1 ? "" : "s"}
-            </>
-          }
-          actions={
-            <Flex align="center" gap={8}>
-              {showFacepile && (
-                <NudeButton
-                  width="auto"
-                  height="auto"
-                  onClick={this.handleMembersModalOpen}
-                >
-                  <Facepile users={users} overflow={overflow} />
-                </NudeButton>
-              )}
-              {renderActions({
-                openMembersModal: this.handleMembersModalOpen,
-              })}
-            </Flex>
-          }
-        />
-        <Modal
-          title="Group members"
-          onRequestClose={this.handleMembersModalClose}
-          isOpen={this.membersModalOpen}
-        >
-          <GroupMembers group={group} />
-        </Modal>
-      </>
-    );
-  }
+  return (
+    <>
+      <ListItem
+        image={
+          <Image>
+            <GroupIcon size={24} />
+          </Image>
+        }
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
+        subtitle={t("{{ count }} member", { count: memberCount })}
+        actions={
+          <Flex align="center" gap={8}>
+            {showFacepile && (
+              <NudeButton
+                width="auto"
+                height="auto"
+                onClick={setMembersModalOpen}
+              >
+                <Facepile users={users} overflow={overflow} />
+              </NudeButton>
+            )}
+            {renderActions({
+              openMembersModal: setMembersModalOpen,
+            })}
+          </Flex>
+        }
+      />
+      <Modal
+        title={t("Group members")}
+        onRequestClose={setMembersModalClosed}
+        isOpen={membersModalOpen}
+      >
+        <GroupMembers group={group} />
+      </Modal>
+    </>
+  );
 }
 
 const Image = styled(Flex)`
@@ -95,15 +80,15 @@ const Image = styled(Flex)`
   justify-content: center;
   width: 32px;
   height: 32px;
-  background: ${(props) => props.theme.secondaryBackground};
+  background: ${s("secondaryBackground")};
   border-radius: 32px;
 `;
 
 const Title = styled.span`
-  &:hover {
+  &: ${hover} {
     text-decoration: underline;
     cursor: var(--pointer);
   }
 `;
 
-export default withStores(GroupListItem);
+export default observer(GroupListItem);

app/components/Guide.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import usePrevious from "~/hooks/usePrevious";
 
@@ -71,7 +71,7 @@ const Backdrop = styled.div`
   left: 0;
   right: 0;
   bottom: 0;
-  background-color: ${(props) => props.theme.backdrop} !important;
+  background-color: ${s("backdrop")} !important;
   z-index: ${depths.modalOverlay};
   transition: opacity 200ms ease-in-out;
   opacity: 0;
@@ -92,8 +92,8 @@ const Scene = styled.div`
   justify-content: center;
   align-items: flex-start;
   width: 350px;
-  background: ${(props) => props.theme.background};
-  transition: ${(props) => props.theme.backgroundTransition};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   border-radius: 8px;
   outline: none;
   opacity: 0;

app/components/Header.tsx

@@ -5,13 +5,15 @@ import { transparentize } from "polished";
 import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
+import Desktop from "~/utils/Desktop";
 import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
@@ -24,7 +26,6 @@ type Props = {
 function Header({ left, title, actions, hasSidebar }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
-
   const hasMobileSidebar = hasSidebar && isMobile;
 
   const passThrough = !actions && !left && !title;
@@ -50,14 +51,18 @@ function Header({ left, title, actions, hasSidebar }: Props) {
   }, []);
 
   return (
-    <Wrapper align="center" shrink={false} $passThrough={passThrough}>
+    <Wrapper
+      align="center"
+      shrink={false}
+      $passThrough={passThrough}
+      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
+    >
       {left || hasMobileSidebar ? (
         <Breadcrumbs>
           {hasMobileSidebar && (
             <MobileMenuButton
               onClick={ui.toggleMobileSidebar}
               icon={<MenuIcon />}
-              iconColor="currentColor"
               neutral
             />
           )}
@@ -98,11 +103,16 @@ const Actions = styled(Flex)`
   `};
 `;
 
-const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
+type WrapperProps = {
+  $passThrough?: boolean;
+  $insetTitleAdjust?: boolean;
+};
+
+const Wrapper = styled(Flex)<WrapperProps>`
   top: 0;
   z-index: ${depths.header};
   position: sticky;
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
 
   ${(props) =>
     props.$passThrough
@@ -120,6 +130,12 @@ const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
   transform: translate3d(0, 0, 0);
   min-height: 64px;
   justify-content: flex-start;
+  ${draggableOnDesktop()}
+
+  button,
+  [role="button"] {
+    ${fadeOnDesktopBackgrounded()}
+  }
 
   @supports (backdrop-filter: blur(20px)) {
     backdrop-filter: blur(20px);
@@ -133,7 +149,8 @@ const Wrapper = styled(Flex)<{ $passThrough?: boolean }>`
   ${breakpoint("tablet")`
     padding: 16px;
     justify-content: center;
-  `};
+    ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
+    `};
 `;
 
 const Title = styled("div")`

app/components/Highlight.tsx

@@ -2,6 +2,7 @@ import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 type Props = React.HTMLAttributes<HTMLSpanElement> & {
   highlight: (string | null | undefined) | RegExp;
@@ -43,7 +44,7 @@ function Highlight({
 }
 
 export const Mark = styled.mark`
-  background: ${(props) => props.theme.searchHighlight};
+  background: ${s("searchHighlight")};
   border-radius: 2px;
   padding: 0 2px;
 `;

app/components/HoverPreview.tsx

@@ -2,26 +2,27 @@ import { transparentize } from "polished";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isExternalUrl } from "@shared/utils/urls";
 import HoverPreviewDocument from "~/components/HoverPreviewDocument";
 import useMobile from "~/hooks/useMobile";
-import useStores from "~/hooks/useStores";
 import { fadeAndSlideDown } from "~/styles/animations";
 
 const DELAY_OPEN = 300;
 const DELAY_CLOSE = 300;
 
 type Props = {
-  node: HTMLAnchorElement;
-  event: MouseEvent;
+  /* The document associated with the editor, if any */
+  id?: string;
+  /* The HTML element that is being hovered over */
+  element: HTMLAnchorElement;
+  /* A callback on close of the hover preview */
   onClose: () => void;
 };
 
-function HoverPreviewInternal({ node, onClose }: Props) {
-  const { documents } = useStores();
-  const slug = parseDocumentSlug(node.href);
+function HoverPreviewInternal({ element, id, onClose }: Props) {
+  const slug = parseDocumentSlug(element.href);
   const [isVisible, setVisible] = React.useState(false);
   const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
   const timerOpen = React.useRef<ReturnType<typeof setTimeout>>();
@@ -54,10 +55,6 @@ function HoverPreviewInternal({ node, onClose }: Props) {
   };
 
   React.useEffect(() => {
-    if (slug) {
-      documents.prefetchDocument(slug);
-    }
-
     startOpenTimer();
 
     if (cardRef.current) {
@@ -68,13 +65,13 @@ function HoverPreviewInternal({ node, onClose }: Props) {
       cardRef.current.addEventListener("mouseleave", startCloseTimer);
     }
 
-    node.addEventListener("mouseout", startCloseTimer);
-    node.addEventListener("mouseover", stopCloseTimer);
-    node.addEventListener("mouseover", startOpenTimer);
+    element.addEventListener("mouseout", startCloseTimer);
+    element.addEventListener("mouseover", stopCloseTimer);
+    element.addEventListener("mouseover", startOpenTimer);
     return () => {
-      node.removeEventListener("mouseout", startCloseTimer);
-      node.removeEventListener("mouseover", stopCloseTimer);
-      node.removeEventListener("mouseover", startOpenTimer);
+      element.removeEventListener("mouseout", startCloseTimer);
+      element.removeEventListener("mouseover", stopCloseTimer);
+      element.removeEventListener("mouseover", startOpenTimer);
 
       if (cardRef.current) {
         cardRef.current.removeEventListener("mouseenter", stopCloseTimer);
@@ -88,9 +85,9 @@ function HoverPreviewInternal({ node, onClose }: Props) {
         clearTimeout(timerClose.current);
       }
     };
-  }, [node, slug]);
+  }, [element, slug]);
 
-  const anchorBounds = node.getBoundingClientRect();
+  const anchorBounds = element.getBoundingClientRect();
   const cardBounds = cardRef.current?.getBoundingClientRect();
   const left = cardBounds
     ? Math.min(anchorBounds.left, window.innerWidth - 16 - 350)
@@ -105,7 +102,7 @@ function HoverPreviewInternal({ node, onClose }: Props) {
         aria-hidden
       >
         <div ref={cardRef}>
-          <HoverPreviewDocument url={node.href}>
+          <HoverPreviewDocument url={element.href} id={id}>
             {(content: React.ReactNode) =>
               isVisible ? (
                 <Animate>
@@ -124,18 +121,18 @@ function HoverPreviewInternal({ node, onClose }: Props) {
   );
 }
 
-function HoverPreview({ node, ...rest }: Props) {
+function HoverPreview({ element, ...rest }: Props) {
   const isMobile = useMobile();
   if (isMobile) {
     return null;
   }
 
   // previews only work for internal doc links for now
-  if (isExternalUrl(node.href)) {
+  if (isExternalUrl(element.href)) {
     return null;
   }
 
-  return <HoverPreviewInternal {...rest} node={node} />;
+  return <HoverPreviewInternal {...rest} element={element} />;
 }
 
 const Animate = styled.div`
@@ -164,7 +161,7 @@ const CardContent = styled.div`
 // &:after — gradient mask for overflow text
 const Card = styled.div`
   backdrop-filter: blur(10px);
-  background: ${(props) => props.theme.background};
+  background: ${s("background")};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
@@ -187,13 +184,13 @@ const Card = styled.div`
       90deg,
       ${(props) => transparentize(1, props.theme.background)} 0%,
       ${(props) => transparentize(1, props.theme.background)} 75%,
-      ${(props) => props.theme.background} 90%
+      ${s("background")} 90%
     );
     bottom: 0;
     left: 0;
     right: 0;
     height: 1.7em;
-    border-bottom: 16px solid ${(props) => props.theme.background};
+    border-bottom: 16px solid ${s("background")};
     border-bottom-left-radius: 4px;
     border-bottom-right-radius: 4px;
   }
@@ -237,7 +234,7 @@ const Pointer = styled.div<{ offset: number }>`
 
   &:after {
     border: 7px solid transparent;
-    border-bottom-color: ${(props) => props.theme.background};
+    border-bottom-color: ${s("background")};
   }
 `;
 

app/components/HoverPreviewDocument.tsx

@@ -2,26 +2,32 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
+import { s } from "@shared/styles";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import DocumentMetaWithViews from "~/components/DocumentMetaWithViews";
+import DocumentMeta from "~/components/DocumentMeta";
 import Editor from "~/components/Editor";
 import useStores from "~/hooks/useStores";
 
 type Props = {
+  /* The document associated with the editor, if any */
+  id?: string;
+  /* The URL we want a preview for */
   url: string;
   children: (content: React.ReactNode) => React.ReactNode;
 };
 
-function HoverPreviewDocument({ url, children }: Props) {
+function HoverPreviewDocument({ url, id, children }: Props) {
   const { documents } = useStores();
   const slug = parseDocumentSlug(url);
 
-  if (slug) {
-    documents.prefetchDocument(slug);
-  }
+  React.useEffect(() => {
+    if (slug) {
+      void documents.prefetchDocument(slug);
+    }
+  }, [documents, slug]);
 
   const document = slug ? documents.getByUrl(slug) : undefined;
-  if (!document) {
+  if (!document || document.id === id) {
     return null;
   }
 
@@ -30,10 +36,7 @@ function HoverPreviewDocument({ url, children }: Props) {
       {children(
         <Content to={document.url}>
           <Heading>{document.titleWithDefault}</Heading>
-          <DocumentMetaWithViews
-            isDraft={document.isDraft}
-            document={document}
-          />
+          <DocumentMeta document={document} />
 
           <React.Suspense fallback={<div />}>
             <Editor
@@ -55,7 +58,7 @@ const Content = styled(Link)`
 
 const Heading = styled.h2`
   margin: 0 0 0.75em;
-  color: ${(props) => props.theme.text};
+  color: ${s("text")};
 `;
 
 export default observer(HoverPreviewDocument);

app/components/IconPicker.tsx

@@ -40,23 +40,23 @@ import { useTranslation } from "react-i18next";
 import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import DelayedMount from "./DelayedMount";
 
 const style = {
   width: 30,
   height: 30,
 };
-const TwitterPicker = React.lazy(
-  () =>
-    import(
-      /* webpackChunkName: "twitter-picker" */
-      "react-color/lib/components/twitter/Twitter"
-    )
+
+const TwitterPicker = lazyWithRetry(
+  () => import("react-color/lib/components/twitter/Twitter")
 );
 
 export const icons = {
@@ -241,24 +241,36 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
         aria-label={t("Choose icon")}
       >
         <Icons>
-          {Object.keys(icons).map((name) => {
-            return (
-              <MenuItem
-                key={name}
-                onClick={() => onChange(color, name)}
-                {...menu}
-              >
-                {(props) => (
-                  <IconButton style={style} {...props}>
-                    <Icon as={icons[name].component} color={color} size={30} />
-                  </IconButton>
-                )}
-              </MenuItem>
-            );
-          })}
+          {Object.keys(icons).map((name, index) => (
+            <MenuItem
+              key={name}
+              onClick={() => onChange(color, name)}
+              {...menu}
+            >
+              {(props) => (
+                <IconButton
+                  style={
+                    {
+                      ...style,
+                      "--delay": `${index * 8}ms`,
+                    } as React.CSSProperties
+                  }
+                  {...props}
+                >
+                  <Icon as={icons[name].component} color={color} size={30} />
+                </IconButton>
+              )}
+            </MenuItem>
+          ))}
         </Icons>
-        <Flex>
-          <React.Suspense fallback={<Loading>{t("Loading")}…</Loading>}>
+        <Colors>
+          <React.Suspense
+            fallback={
+              <DelayedMount>
+                <Text>{t("Loading")}…</Text>
+              </DelayedMount>
+            }
+          >
             <ColorPicker
               color={color}
               onChange={(color) => onChange(color.hex, icon)}
@@ -266,6 +278,10 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               triangle="hide"
               styles={{
                 default: {
+                  body: {
+                    padding: 0,
+                    marginRight: -8,
+                  },
                   hash: {
                     color: theme.text,
                     background: theme.inputBorder,
@@ -279,7 +295,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               }}
             />
           </React.Suspense>
-        </Flex>
+        </Colors>
       </ContextMenu>
     </Wrapper>
   );
@@ -287,6 +303,11 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
 
 const Icon = styled.svg`
   transition: fill 150ms ease-in-out;
+  transition-delay: var(--delay);
+`;
+
+const Colors = styled(Flex)`
+  padding: 8px;
 `;
 
 const Label = styled.label`
@@ -294,7 +315,7 @@ const Label = styled.label`
 `;
 
 const Icons = styled.div`
-  padding: 16px 8px 0 16px;
+  padding: 8px;
 
   ${breakpoint("tablet")`
     width: 276px;
@@ -302,7 +323,7 @@ const Icons = styled.div`
 `;
 
 const Button = styled(NudeButton)`
-  border: 1px solid ${(props) => props.theme.inputBorder};
+  border: 1px solid ${s("inputBorder")};
   width: 32px;
   height: 32px;
 `;
@@ -314,18 +335,10 @@ const IconButton = styled(NudeButton)`
   height: 30px;
 `;
 
-const Loading = styled(Text)`
-  padding: 16px;
-`;
-
 const ColorPicker = styled(TwitterPicker)`
   box-shadow: none !important;
   background: transparent !important;
-  width: auto !important;
-
-  ${breakpoint("tablet")`
-    width: 276px;
-  `};
+  width: 100% !important;
 `;
 
 const Wrapper = styled("div")`

app/components/Icons/CollectionIcon.tsx

@@ -8,9 +8,13 @@ import useStores from "~/hooks/useStores";
 import Logger from "~/utils/Logger";
 
 type Props = {
+  /** The collection to show an icon for */
   collection: Collection;
+  /** Whether the icon should be the "expanded" graphic when displaying the default collection icon */
   expanded?: boolean;
+  /** The size of the icon, 24px is default to match standard icons */
   size?: number;
+  /** The color of the icon, defaults to the collection color */
   color?: string;
 };