lint

* chore: Remove method override middleware

* wip

* CodeQL

* max/min

.babelrc

@@ -35,6 +35,14 @@
             "displayName": false
           }
         ]
+      ],
+      "ignore": [
+        "**/*.test.ts"
+      ]
+    },
+    "development": {
+      "ignore": [
+        "**/*.test.ts"
       ]
     }
   }

.circleci/config.yml

@@ -70,6 +70,15 @@ jobs:
       - run:
           name: test
           command: yarn test:app
+  test-shared:
+    <<: *defaults
+    steps:
+      - checkout
+      - restore_cache:
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: test
+          command: yarn test:shared
   test-server:
     <<: *defaults
     steps:
@@ -81,7 +90,7 @@ jobs:
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: yarn test:server
+          command: yarn test:server --forceExit
   bundle-size:
     <<: *defaults
     steps:
@@ -140,6 +149,9 @@ workflows:
       - test-server:
           requires:
             - build
+      - test-shared:
+          requires:
+            - build
       - test-app:
           requires:
             - build
@@ -149,6 +161,7 @@ workflows:
       - bundle-size:
           requires:
             - test-app
+            - test-shared
             - test-server
 
   build-docker:

.env.sample

@@ -1,5 +1,7 @@
 # –––––––––––––––– REQUIRED ––––––––––––––––
 
+NODE_ENV=production
+
 # Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
 # in your terminal to generate a random value.
 SECRET_KEY=generate_a_new_key
@@ -16,7 +18,15 @@ DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
 # PGSSLMODE=disable
+
+# For redis you can either specify an ioredis compatible url like this
 REDIS_URL=redis://localhost:6379
+# or alternatively, if you would like to provide additional connection options,
+# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
+# for a list of available options.
+# Example: Use Redis Sentinel for high availability
+# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
+# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
@@ -28,7 +38,7 @@ PORT=3000
 COLLABORATION_URL=
 
 # To support uploading of images for avatars and document attachments an
-# s3-compatible storage must be provided. AWS S3 is recommended for redundency
+# s3-compatible storage must be provided. AWS S3 is recommended for redundancy
 # however if you want to keep all file storage local an alternative such as
 # minio (https://github.com/minio/minio) can be used.
 
@@ -57,8 +67,8 @@ AWS_S3_ACL=private
 #
 # When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
 # https://<URL>/auth/slack.callback
-SLACK_KEY=get_a_key_from_slack
-SLACK_SECRET=get_the_secret_of_above_key
+SLACK_CLIENT_ID=get_a_key_from_slack
+SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 
 # To configure Google auth, you'll need to create an OAuth Client ID at
 # => https://console.cloud.google.com/apis/credentials
@@ -121,7 +131,7 @@ ENABLE_UPDATES=true
 # available memory by 512 for a rough estimate
 WEB_CONCURRENCY=1
 
-# Override the maxium size of document imports, could be required if you have
+# Override the maximum size of document imports, could be required if you have
 # especially large Word documents with embedded imagery
 MAXIMUM_IMPORT_SIZE=5120000
 
@@ -129,10 +139,6 @@ MAXIMUM_IMPORT_SIZE=5120000
 # requests and this ends up being duplicative
 DEBUG=http
 
-# Comma separated list of domains to be allowed to signin to the wiki. If not
-# set, all domains are allowed by default when using Google OAuth to signin
-ALLOWED_DOMAINS=
-
 # For a complete Slack integration with search and posting to channels the
 # following configs are also needed, some more details
 # => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
@@ -144,8 +150,11 @@ SLACK_MESSAGE_ACTIONS=true
 # Optionally enable google analytics to track pageviews in the knowledge base
 GOOGLE_ANALYTICS_ID=
 
-# Optionally enable Sentry (sentry.io) to track errors and performance
+# Optionally enable Sentry (sentry.io) to track errors and performance,
+# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
+# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
 SENTRY_DSN=
+SENTRY_TUNNEL=
 
 # To support sending outgoing transactional emails such as "document updated" or
 # "you've been invited" you'll need to provide authentication for an SMTP server
@@ -164,3 +173,10 @@ SMTP_SECURE=true
 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
 DEFAULT_LANGUAGE=en_US
+
+# Optionally enable rate limiter at application web server
+RATE_LIMITER_ENABLED=true
+
+# Configure default throttling parameters for rate limiter
+RATE_LIMITER_REQUESTS=1000
+RATE_LIMITER_DURATION_WINDOW=60

.eslintrc

@@ -12,7 +12,6 @@
     "plugin:@typescript-eslint/recommended",
     "plugin:import/recommended",
     "plugin:import/typescript",
-    "plugin:react-hooks/recommended",
     "plugin:prettier/recommended"
   ],
   "plugins": [
@@ -21,12 +20,12 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "eslint-plugin-react-hooks",
     "import"
   ],
   "rules": {
     "eqeqeq": 2,
     "curly": 2,
+    "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
     "es/no-regexp-lookbehind-assertions": "error",

.github/dependabot.yml

@@ -0,0 +1,11 @@
+# To get started with Dependabot version updates, you'll need to specify which
+# package ecosystems to update and where the package manifests are located.
+# Please see the documentation for all configuration options:
+# https://docs.github.com/github/administering-a-repository/configuration-options-for-dependency-updates
+
+version: 2
+updates:
+  - package-ecosystem: "npm" # See documentation for possible values
+    directory: "/" # Location of package manifests
+    schedule:
+      interval: "weekly"

.github/stale.yml

@@ -1,22 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 120
-
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 14
-
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - security
-  - pinned
-
-# Label to use when marking an issue as stale
-staleLabel: stale
-
-# Comment to post when marking an issue as stale. Set to `false` to disable
-markComment: >
-  Hey! The issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed soon if no further activity occurs. Please
-  reply here if you wish for the issue to be kept open.
-
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/codeql-analysis.yml

@@ -42,7 +42,7 @@ jobs:
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v2
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -53,7 +53,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v2
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -67,4 +67,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v2

.github/workflows/stale.yml

@@ -0,0 +1,29 @@
+name: "Close Stale PRs"
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: "30 1 * * *"
+
+permissions:
+  issues: write
+  pull-requests: write
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v5
+        with:
+          stale-pr-message: "This PR is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          stale-issue-message: "This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this will be closed in 5 days"
+          close-pr-message: "Automatically closed due to inactivity"
+          close-issue-message: "Automatically closed due to inactivity"
+          days-before-issue-stale: 120
+          days-before-pr-stale: 60
+          days-before-close: 5
+          operations-per-run: 60
+          stale-issue-label: stale
+          stale-pr-label: stale
+          exempt-issue-labels: "security,pinned"
+      - name: Print outputs
+        run: echo ${{ join(steps.stale.outputs.*, ',') }}

.gitignore

@@ -3,6 +3,7 @@ build
 node_modules/*
 .env
 .log
+.vscode/*
 npm-debug.log
 stats.json
 .DS_Store
@@ -10,4 +11,4 @@ fakes3/*
 .idea
 *.pem
 *.key
-*.cert
+*.cert

.jestconfig.json

@@ -0,0 +1,88 @@
+{
+  "projects": [
+    {
+      "displayName": "server",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/server"
+      ],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/server/test/setup.ts"
+      ],
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
+    },
+    {
+      "displayName": "app",
+      "verbose": false,
+      "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"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    },
+    {
+      "displayName": "shared-node",
+      "verbose": false,
+      "roots": [
+        "<rootDir>/shared"
+      ],
+      "moduleNameMapper": {
+        "^@server/(.*)$": "<rootDir>/server/$1",
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
+      },
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js"
+      ],
+      "setupFilesAfterEnv": [
+        "<rootDir>/shared/test/setup.ts"
+      ],
+      "testEnvironment": "node"
+    },
+    {
+      "displayName": "shared-jsdom",
+      "verbose": false,
+      "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"
+      ],
+      "testEnvironment": "jsdom",
+      "testEnvironmentOptions": {
+        "url": "http://localhost"
+      }
+    }
+  ]
+}

LICENSE

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

__mocks__/bull.js

@@ -1,17 +0,0 @@
-export default class Queue {
-  name;
-
-  constructor(name) {
-    this.name = name;
-  }
-
-  process = (fn) => {
-    console.log(`Registered function ${this.name}`);
-    this.processFn = fn;
-  };
-
-  add = (data) => {
-    console.log(`Running ${this.name}`);
-    return this.processFn({ data });
-  };
-}

__mocks__/console.js

@@ -1,2 +1 @@
-// Mock for node-uuid
 global.console.warn = () => {};

app.json

@@ -43,10 +43,6 @@
       "value": "true",
       "required": true
     },
-    "ALLOWED_DOMAINS": {
-      "description": "Comma separated list of domains to be allowed (optional). If not set, all domains are allowed by default when using Google OAuth to signin. Consider putting {your app name}.herokuapp.com and any domain you are binding on in this list.",
-      "required": false
-    },
     "URL": {
       "description": "https://{your app name}.herokuapp.com, or the domain you are binding to",
       "required": true
@@ -106,11 +102,11 @@
       "value": "openid profile email",
       "required": false
     },
-    "SLACK_KEY": {
+    "SLACK_CLIENT_ID": {
       "description": "See https://api.slack.com/apps to create a new Slack app. You must configure at least one of Slack or Google to control login.",
       "required": false
     },
-    "SLACK_SECRET": {
+    "SLACK_CLIENT_SECRET": {
       "description": "Your Slack client secret - d2dc414f9953226bad0a356cXXXXYYYY",
       "required": false
     },
@@ -199,6 +195,10 @@
       "description": "An API key for Sentry if you wish to collect error reporting (optional)",
       "required": false
     },
+    "SENTRY_TUNNEL": {
+      "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
@@ -209,4 +209,4 @@
       "required": false
     }
   }
-}
+}

app/.eslintrc

@@ -1,6 +1,10 @@
 {
   "extends": [
-    "../.eslintrc"
+    "../.eslintrc",
+    "plugin:react-hooks/recommended",
+  ],
+  "plugins": [
+    "eslint-plugin-react-hooks",
   ],
   "env": {
     "jest": true,

app/.jestconfig.json

@@ -1,27 +0,0 @@
-{
-  "testURL": "http://localhost",
-  "verbose": false,
-  "rootDir": "..",
-  "roots": [
-    "<rootDir>/app",
-    "<rootDir>/shared"
-  ],
-  "moduleNameMapper": {
-    "^~/(.*)$": "<rootDir>/app/$1",
-    "^@shared/(.*)$": "<rootDir>/shared/$1",
-    "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js"
-  },
-  "moduleDirectories": [
-    "node_modules"
-  ],
-  "modulePaths": [
-    "<rootDir>/app"
-  ],
-  "setupFiles": [
-    "<rootDir>/__mocks__/window.js"
-  ],
-  "setupFilesAfterEnv": [
-    "./app/test/setup.ts"
-  ],
-  "testEnvironment": "jsdom"
-}

app/actions/definitions/collections.tsx

@@ -1,6 +1,7 @@
 import {
   CollectionIcon,
   EditIcon,
+  PadlockIcon,
   PlusIcon,
   StarredIcon,
   UnstarredIcon,
@@ -10,6 +11,7 @@ import stores from "~/stores";
 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 { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
@@ -56,7 +58,8 @@ export const createCollection = createAction({
 });
 
 export const editCollection = createAction({
-  name: ({ t }) => t("Edit collection"),
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? `${t("Edit")}…` : t("Edit collection"),
   section: CollectionSection,
   icon: <EditIcon />,
   visible: ({ stores, activeCollectionId }) =>
@@ -79,6 +82,26 @@ export const editCollection = createAction({
   },
 });
 
+export const editCollectionPermissions = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? `${t("Permissions")}…` : t("Collection permissions"),
+  section: CollectionSection,
+  icon: <PadlockIcon />,
+  visible: ({ stores, activeCollectionId }) =>
+    !!activeCollectionId &&
+    stores.policies.abilities(activeCollectionId).update,
+  perform: ({ t, activeCollectionId }) => {
+    if (!activeCollectionId) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Collection permissions"),
+      content: <CollectionPermissions collectionId={activeCollectionId} />,
+    });
+  },
+});
+
 export const starCollection = createAction({
   name: ({ t }) => t("Star"),
   section: CollectionSection,

app/actions/definitions/debug.tsx

@@ -1,32 +0,0 @@
-import { ToolsIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import stores from "~/stores";
-import { createAction } from "~/actions";
-import { DebugSection } from "~/actions/sections";
-import env from "~/env";
-import { deleteAllDatabases } from "~/utils/developer";
-
-export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
-  icon: <TrashIcon />,
-  keywords: "cache clear database",
-  section: DebugSection,
-  perform: async ({ t }) => {
-    await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
-  },
-});
-
-export const development = createAction({
-  name: ({ t }) => t("Development"),
-  keywords: "debug",
-  icon: <ToolsIcon />,
-  iconInContextMenu: false,
-  section: DebugSection,
-  visible: ({ event }) =>
-    env.ENVIRONMENT === "development" ||
-    (event instanceof KeyboardEvent && event.altKey),
-  children: [clearIndexedDB],
-});
-
-export const rootDebugActions = [development];

app/actions/definitions/developer.tsx

@@ -0,0 +1,50 @@
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { DeveloperSection } from "~/actions/sections";
+import env from "~/env";
+import { client } from "~/utils/ApiClient";
+import { deleteAllDatabases } from "~/utils/developer";
+
+export const clearIndexedDB = createAction({
+  name: ({ t }) => t("Delete IndexedDB cache"),
+  icon: <TrashIcon />,
+  keywords: "cache clear database",
+  section: DeveloperSection,
+  perform: async ({ t }) => {
+    await deleteAllDatabases();
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
+  },
+});
+
+export const createTestUsers = createAction({
+  name: "Create test users",
+  icon: <UserIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    const count = 10;
+
+    try {
+      await client.post("/developer.create_test_users", { count });
+      stores.toasts.showToast(`${count} test users created`);
+    } catch (err) {
+      stores.toasts.showToast(err.message, { type: "error" });
+    }
+  },
+});
+
+export const developer = createAction({
+  name: ({ t }) => t("Developer"),
+  keywords: "debug",
+  icon: <ToolsIcon />,
+  iconInContextMenu: false,
+  section: DeveloperSection,
+  visible: ({ event }) =>
+    env.ENVIRONMENT === "development" ||
+    (event instanceof KeyboardEvent && event.altKey),
+  children: [clearIndexedDB, createTestUsers],
+});
+
+export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -11,9 +11,19 @@ import {
   ImportIcon,
   PinIcon,
   SearchIcon,
+  UnsubscribeIcon,
+  SubscribeIcon,
+  MoveIcon,
+  TrashIcon,
+  CrossIcon,
+  ArchiveIcon,
+  ShuffleIcon,
 } from "outline-icons";
 import * as React from "react";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { getEventFiles } from "@shared/utils/files";
+import DocumentDelete from "~/scenes/DocumentDelete";
+import DocumentMove from "~/scenes/DocumentMove";
+import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
@@ -108,12 +118,74 @@ export const unstarDocument = createAction({
   },
 });
 
-export const downloadDocument = createAction({
-  name: ({ t, isContextMenu }) =>
-    isContextMenu ? t("Download") : t("Download document"),
+export const subscribeDocument = createAction({
+  name: ({ t }) => t("Subscribe"),
   section: DocumentSection,
+  icon: <SubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).subscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.subscribe();
+
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const unsubscribeDocument = createAction({
+  name: ({ t }) => t("Unsubscribe"),
+  section: DocumentSection,
+  icon: <UnsubscribeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    return (
+      !!document?.isSubscribed &&
+      stores.policies.abilities(activeDocumentId).unsubscribe
+    );
+  },
+  perform: ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    document?.unsubscribe(currentUserId);
+
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
+    });
+  },
+});
+
+export const downloadDocumentAsHTML = createAction({
+  name: ({ t }) => t("HTML"),
+  section: DocumentSection,
+  keywords: "html export",
   icon: <DownloadIcon />,
-  keywords: "export",
+  iconInContextMenu: false,
   visible: ({ activeDocumentId, stores }) =>
     !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
   perform: ({ activeDocumentId, stores }) => {
@@ -122,10 +194,37 @@ export const downloadDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
-    document?.download();
+    document?.download("text/html");
   },
 });
 
+export const downloadDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Markdown"),
+  section: DocumentSection,
+  keywords: "md markdown export",
+  icon: <DownloadIcon />,
+  iconInContextMenu: false,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    document?.download("text/markdown");
+  },
+});
+
+export const downloadDocument = createAction({
+  name: ({ t, isContextMenu }) =>
+    isContextMenu ? t("Download") : t("Download document"),
+  section: DocumentSection,
+  icon: <DownloadIcon />,
+  keywords: "export",
+  children: [downloadDocumentAsHTML, downloadDocumentAsMarkdown],
+});
+
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
@@ -260,8 +359,8 @@ export const importDocument = createAction({
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
 
-    input.onchange = async (ev: Event) => {
-      const files = getDataTransferFiles(ev);
+    input.onchange = async (ev) => {
+      const files = getEventFiles(ev);
 
       try {
         const file = files[0];
@@ -296,10 +395,11 @@ export const createTemplate = createAction({
       return false;
     }
     const document = stores.documents.get(activeDocumentId);
-    return (
+    return !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate
+      !document?.isTemplate &&
+      !document?.isDeleted
     );
   },
   perform: ({ activeDocumentId, stores, t, event }) => {
@@ -317,6 +417,24 @@ export const createTemplate = createAction({
   },
 });
 
+export const openRandomDocument = createAction({
+  id: "random",
+  section: DocumentSection,
+  name: ({ t }) => t(`Open random document`),
+  icon: <ShuffleIcon />,
+  perform: ({ stores, activeDocumentId }) => {
+    const documentPaths = stores.collections.pathsToDocuments.filter(
+      (path) => path.type === "document" && path.id !== activeDocumentId
+    );
+    const documentPath =
+      documentPaths[Math.round(Math.random() * documentPaths.length)];
+
+    if (documentPath) {
+      history.push(documentPath.url);
+    }
+  },
+});
+
 export const searchDocumentsForQuery = (searchQuery: string) =>
   createAction({
     id: "search",
@@ -328,15 +446,147 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
+  section: DocumentSection,
+  icon: <MoveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).move;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Move {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        content: (
+          <DocumentMove
+            document={document}
+            onRequestClose={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const archiveDocument = createAction({
+  name: ({ t }) => t("Archive"),
+  section: DocumentSection,
+  icon: <ArchiveIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).archive;
+  },
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      await document.archive();
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
+    }
+  },
+});
+
+export const deleteDocument = createAction({
+  name: ({ t }) => t("Delete"),
+  section: DocumentSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).delete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
+export const permanentlyDeleteDocument = createAction({
+  name: ({ t }) => t("Permanently delete"),
+  section: DocumentSection,
+  icon: <CrossIcon />,
+  dangerous: true,
+  visible: ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    return !!stores.policies.abilities(activeDocumentId).permanentDelete;
+  },
+  perform: ({ activeDocumentId, stores, t }) => {
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (!document) {
+        return;
+      }
+
+      stores.dialogs.openModal({
+        title: t("Permanently delete {{ documentName }}", {
+          documentName: document.noun,
+        }),
+        isCentered: true,
+        content: (
+          <DocumentPermanentDelete
+            document={document}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    }
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
+  archiveDocument,
   createDocument,
   createTemplate,
+  deleteDocument,
   importDocument,
   downloadDocument,
   starDocument,
   unstarDocument,
+  subscribeDocument,
+  unsubscribeDocument,
   duplicateDocument,
+  moveDocument,
+  openRandomDocument,
+  permanentlyDeleteDocument,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,

app/actions/definitions/navigation.tsx

@@ -28,6 +28,7 @@ import history from "~/utils/history";
 import {
   organizationSettingsPath,
   profileSettingsPath,
+  accountPreferencesPath,
   homePath,
   searchPath,
   draftsPath,
@@ -104,6 +105,14 @@ export const navigateToProfileSettings = createAction({
   perform: () => history.push(profileSettingsPath()),
 });
 
+export const navigateToAccountPreferences = createAction({
+  name: ({ t }) => t("Preferences"),
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <SettingsIcon />,
+  perform: () => history.push(accountPreferencesPath()),
+});
+
 export const openAPIDocumentation = createAction({
   name: ({ t }) => t("API documentation"),
   section: NavigationSection,

app/actions/definitions/revisions.tsx

@@ -0,0 +1,85 @@
+import copy from "copy-to-clipboard";
+import { LinkIcon, RestoreIcon } from "outline-icons";
+import * as React from "react";
+import { matchPath } from "react-router-dom";
+import stores from "~/stores";
+import { createAction } from "~/actions";
+import { RevisionSection } from "~/actions/sections";
+import history from "~/utils/history";
+import { documentHistoryUrl, matchDocumentHistory } from "~/utils/routeHelpers";
+
+export const restoreRevision = createAction({
+  name: ({ t }) => t("Restore revision"),
+  icon: <RestoreIcon />,
+  section: RevisionSection,
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+  perform: async ({ t, event, location, activeDocumentId }) => {
+    event?.preventDefault();
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const match = matchPath<{ revisionId: string }>(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    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);
+    }
+  },
+});
+
+export const copyLinkToRevision = createAction({
+  name: ({ t }) => t("Copy link"),
+  icon: <LinkIcon />,
+  section: RevisionSection,
+  perform: async ({ activeDocumentId, stores, t }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const match = matchPath<{ revisionId: string }>(location.pathname, {
+      path: matchDocumentHistory,
+    });
+    const revisionId = match?.params.revisionId;
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    const url = `${window.location.origin}${documentHistoryUrl(
+      document,
+      revisionId
+    )}`;
+
+    copy(url, {
+      format: "text/plain",
+      onCopy: () => {
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
+      },
+    });
+  },
+});
+
+export const rootRevisionActions = [];

app/actions/definitions/teams.tsx

@@ -0,0 +1,64 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import styled from "styled-components";
+import TeamNew from "~/scenes/TeamNew";
+import { createAction } from "~/actions";
+import { loadSessionsFromCookie } from "~/hooks/useSessions";
+import { TeamSection } from "../sections";
+
+export const switchTeamList = getSessions().map((session) => {
+  return createAction({
+    name: session.name,
+    section: TeamSection,
+    keywords: "change switch workspace organization team",
+    icon: () => <Logo alt={session.name} src={session.logoUrl} />,
+    visible: ({ currentTeamId }) => currentTeamId !== session.teamId,
+    perform: () => (window.location.href = session.url),
+  });
+});
+
+const switchTeam = createAction({
+  name: ({ t }) => t("Switch workspace"),
+  placeholder: ({ t }) => t("Select a workspace"),
+  keywords: "change switch workspace organization team",
+  section: TeamSection,
+  visible: ({ currentTeamId }) =>
+    getSessions({ exclude: currentTeamId }).length > 0,
+  children: switchTeamList,
+});
+
+export const createTeam = createAction({
+  name: ({ t }) => `${t("New workspace")}…`,
+  keywords: "create change switch workspace organization team",
+  section: TeamSection,
+  icon: <PlusIcon />,
+  visible: ({ stores, currentTeamId }) => {
+    return stores.policies.abilities(currentTeamId ?? "").createTeam;
+  },
+  perform: ({ t, event, stores }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+    const { user } = stores.auth;
+    user &&
+      stores.dialogs.openModal({
+        title: t("Create a workspace"),
+        content: <TeamNew user={user} />,
+      });
+  },
+});
+
+function getSessions(params?: { exclude?: string }) {
+  const sessions = loadSessionsFromCookie();
+  const otherSessions = sessions.filter(
+    (session) => session.teamId !== params?.exclude
+  );
+  return otherSessions;
+}
+
+const Logo = styled("img")`
+  border-radius: 2px;
+  width: 24px;
+  height: 24px;
+`;
+
+export const rootTeamActions = [switchTeam, createTeam];

app/actions/definitions/users.tsx

@@ -8,7 +8,7 @@ import { UserSection } from "~/actions/sections";
 export const inviteUser = createAction({
   name: ({ t }) => `${t("Invite people")}…`,
   icon: <PlusIcon />,
-  keywords: "team member user",
+  keywords: "team member workspace user",
   section: UserSection,
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").inviteUser,

app/actions/index.ts

@@ -56,6 +56,7 @@ export function actionToMenuItem(
     title,
     icon,
     visible,
+    dangerous: action.dangerous,
     onClick: () => action.perform && action.perform(context),
     selected: action.selected ? action.selected(context) : undefined,
   };

app/actions/root.ts

@@ -1,8 +1,10 @@
 import { rootCollectionActions } from "./definitions/collections";
-import { rootDebugActions } from "./definitions/debug";
+import { rootDeveloperActions } from "./definitions/developer";
 import { rootDocumentActions } from "./definitions/documents";
 import { rootNavigationActions } from "./definitions/navigation";
+import { rootRevisionActions } from "./definitions/revisions";
 import { rootSettingsActions } from "./definitions/settings";
+import { rootTeamActions } from "./definitions/teams";
 import { rootUserActions } from "./definitions/users";
 
 export default [
@@ -10,6 +12,8 @@ export default [
   ...rootDocumentActions,
   ...rootUserActions,
   ...rootNavigationActions,
+  ...rootRevisionActions,
   ...rootSettingsActions,
-  ...rootDebugActions,
+  ...rootDeveloperActions,
+  ...rootTeamActions,
 ];

app/actions/sections.ts

@@ -2,15 +2,19 @@ import { ActionContext } from "~/types";
 
 export const CollectionSection = ({ t }: ActionContext) => t("Collection");
 
-export const DebugSection = ({ t }: ActionContext) => t("Debug");
+export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 
+export const RevisionSection = ({ t }: ActionContext) => t("Revision");
+
 export const SettingsSection = ({ t }: ActionContext) => t("Settings");
 
 export const NavigationSection = ({ t }: ActionContext) => t("Navigation");
 
 export const UserSection = ({ t }: ActionContext) => t("People");
 
+export const TeamSection = ({ t }: ActionContext) => t("Workspace");
+
 export const RecentSearchesSection = ({ t }: ActionContext) =>
   t("Recent searches");

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 = {
+export type Props = React.HTMLAttributes<HTMLButtonElement> & {
   /** Show the button in a disabled state */
   disabled?: boolean;
   /** Hide the button entirely if action is not applicable */

app/components/Analytics.tsx

@@ -2,8 +2,8 @@
 import * as React from "react";
 import env from "~/env";
 
-export default class Analytics extends React.Component {
-  componentDidMount() {
+const Analytics: React.FC = ({ children }) => {
+  React.useEffect(() => {
     if (!env.GOOGLE_ANALYTICS_ID) {
       return;
     }
@@ -33,9 +33,9 @@ export default class Analytics extends React.Component {
     if (document.body) {
       document.body.appendChild(script);
     }
-  }
+  }, []);
 
-  render() {
-    return this.props.children || null;
-  }
-}
+  return <>{children}</>;
+};
+
+export default Analytics;

app/components/ArrowKeyNavigation.tsx

@@ -6,7 +6,7 @@ import {
   CompositeStateReturn,
 } from "reakit/Composite";
 
-type Props = {
+type Props = React.HTMLAttributes<HTMLDivElement> & {
   children: (composite: CompositeStateReturn) => React.ReactNode;
   onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 };

app/components/Authenticated.tsx

@@ -2,9 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
-import { isCustomSubdomain } from "@shared/utils/domains";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import env from "~/env";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 
@@ -25,29 +23,11 @@ const Authenticated = ({ children }: Props) => {
 
   if (auth.authenticated) {
     const { user, team } = auth;
-    const { hostname } = window.location;
 
     if (!team || !user) {
       return <LoadingIndicator />;
     }
 
-    // If we're authenticated but viewing a domain that doesn't match the
-    // current team then kick the user to the teams correct domain.
-    if (team.domain) {
-      if (team.domain !== hostname) {
-        window.location.href = `${team.url}${window.location.pathname}`;
-        return <LoadingIndicator />;
-      }
-    } else if (
-      env.SUBDOMAINS_ENABLED &&
-      team.subdomain &&
-      isCustomSubdomain(hostname) &&
-      !hostname.startsWith(`${team.subdomain}.`)
-    ) {
-      window.location.href = `${team.url}${window.location.pathname}`;
-      return <LoadingIndicator />;
-    }
-
     return children;
   }
 

app/components/AuthenticatedLayout.tsx

@@ -1,23 +1,23 @@
-import { observable } from "mobx";
+import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { withTranslation, WithTranslation } from "react-i18next";
-import { Switch, Route } from "react-router-dom";
-import RootStore from "~/stores/RootStore";
+import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import ErrorSuspended from "~/scenes/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";
 import SettingsSidebar from "~/components/Sidebar/Settings";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import {
   searchPath,
   matchDocumentSlug as slug,
   newDocumentPath,
   settingsPath,
+  matchDocumentHistory,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
-import withStores from "./withStores";
 
 const DocumentHistory = React.lazy(
   () =>
@@ -34,16 +34,13 @@ const CommandBar = React.lazy(
     )
 );
 
-type Props = WithTranslation & RootStore;
+const AuthenticatedLayout: React.FC = ({ children }) => {
+  const { ui, auth } = useStores();
+  const location = useLocation();
+  const can = usePolicy(ui.activeCollectionId);
+  const { user, team } = auth;
 
-@observer
-class AuthenticatedLayout extends React.Component<Props> {
-  scrollable: HTMLDivElement | null | undefined;
-
-  @observable
-  keyboardShortcutsOpen = false;
-
-  goToSearch = (ev: KeyboardEvent) => {
+  const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
       ev.preventDefault();
       ev.stopPropagation();
@@ -51,60 +48,64 @@ class AuthenticatedLayout extends React.Component<Props> {
     }
   };
 
-  goToNewDocument = (event: KeyboardEvent) => {
+  const goToNewDocument = (event: KeyboardEvent) => {
     if (event.metaKey || event.altKey) {
       return;
     }
-
-    const { activeCollectionId } = this.props.ui;
-    if (!activeCollectionId) {
-      return;
-    }
-    const can = this.props.policies.abilities(activeCollectionId);
-    if (!can.update) {
+    const { activeCollectionId } = ui;
+    if (!activeCollectionId || !can.update) {
       return;
     }
     history.push(newDocumentPath(activeCollectionId));
   };
 
-  render() {
-    const { auth } = this.props;
-    const { user, team } = auth;
-    const showSidebar = auth.authenticated && user && team;
-    if (auth.isSuspended) {
-      return <ErrorSuspended />;
-    }
+  if (auth.isSuspended) {
+    return <ErrorSuspended />;
+  }
 
-    const sidebar = showSidebar ? (
-      <Fade>
-        <Switch>
-          <Route path={settingsPath()} component={SettingsSidebar} />
-          <Route component={Sidebar} />
-        </Switch>
-      </Fade>
-    ) : undefined;
+  const showSidebar = auth.authenticated && user && team;
 
-    const rightRail = (
-      <React.Suspense fallback={null}>
-        <Switch>
+  const sidebar = showSidebar ? (
+    <Fade>
+      <Switch>
+        <Route path={settingsPath()} component={SettingsSidebar} />
+        <Route component={Sidebar} />
+      </Switch>
+    </Fade>
+  ) : undefined;
+
+  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>
-      </React.Suspense>
-    );
+      </AnimatePresence>
+    </React.Suspense>
+  );
 
-    return (
-      <Layout title={team?.name} sidebar={sidebar} rightRail={rightRail}>
-        <RegisterKeyDown trigger="n" handler={this.goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={this.goToSearch} />
-        <RegisterKeyDown trigger="/" handler={this.goToSearch} />
-        {this.props.children}
-        <CommandBar />
-      </Layout>
-    );
-  }
-}
+  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>
+  );
+};
 
-export default withTranslation()(withStores(AuthenticatedLayout));
+export default observer(AuthenticatedLayout);

app/components/Avatar/AvatarWithPresence.tsx

@@ -1,141 +1,114 @@
-import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { WithTranslation, withTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import User from "~/models/User";
-import UserProfile from "~/scenes/UserProfile";
 import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
 
-type Props = WithTranslation & {
+type Props = {
   user: User;
   isPresent: boolean;
   isEditing: boolean;
   isObserving: boolean;
   isCurrentUser: boolean;
-  profileOnClick: boolean;
   onClick?: React.MouseEventHandler<HTMLImageElement>;
 };
 
-@observer
-class AvatarWithPresence extends React.Component<Props> {
-  @observable
-  isOpen = false;
+function AvatarWithPresence({
+  onClick,
+  user,
+  isPresent,
+  isEditing,
+  isObserving,
+  isCurrentUser,
+}: Props) {
+  const { t } = useTranslation();
+  const status = isPresent
+    ? isEditing
+      ? t("currently editing")
+      : t("currently viewing")
+    : t("previously edited");
 
-  handleOpenProfile = () => {
-    this.isOpen = true;
-  };
-
-  handleCloseProfile = () => {
-    this.isOpen = false;
-  };
-
-  render() {
-    const {
-      onClick,
-      user,
-      isPresent,
-      isEditing,
-      isObserving,
-      isCurrentUser,
-      t,
-    } = this.props;
-    const status = isPresent
-      ? isEditing
-        ? t("currently editing")
-        : t("currently viewing")
-      : t("previously edited");
-
-    return (
-      <>
-        <Tooltip
-          tooltip={
-            <Centered>
-              <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
-              {status && (
-                <>
-                  <br />
-                  {status}
-                </>
-              )}
-            </Centered>
-          }
-          placement="bottom"
+  return (
+    <>
+      <Tooltip
+        tooltip={
+          <Centered>
+            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
+            {status && (
+              <>
+                <br />
+                {status}
+              </>
+            )}
+          </Centered>
+        }
+        placement="bottom"
+      >
+        <AvatarWrapper
+          $isPresent={isPresent}
+          $isObserving={isObserving}
+          $color={user.color}
         >
-          <AvatarWrapper
-            $isPresent={isPresent}
-            $isObserving={isObserving}
-            $color={user.color}
-          >
-            <Avatar
-              src={user.avatarUrl}
-              onClick={
-                this.props.profileOnClick === false
-                  ? onClick
-                  : this.handleOpenProfile
-              }
-              size={32}
-            />
-          </AvatarWrapper>
-        </Tooltip>
-        {this.props.profileOnClick && (
-          <UserProfile
-            user={user}
-            isOpen={this.isOpen}
-            onRequestClose={this.handleCloseProfile}
-          />
-        )}
-      </>
-    );
-  }
+          <Avatar src={user.avatarUrl} onClick={onClick} size={32} />
+        </AvatarWrapper>
+      </Tooltip>
+    </>
+  );
 }
 
 const Centered = styled.div`
   text-align: center;
 `;
 
-const AvatarWrapper = styled.div<{
+type AvatarWrapperProps = {
   $isPresent: boolean;
   $isObserving: boolean;
   $color: string;
-}>`
+};
+
+const AvatarWrapper = styled.div<AvatarWrapperProps>`
   opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
   transition: opacity 250ms ease-in-out;
   border-radius: 50%;
   position: relative;
 
-  &:after {
-    content: "";
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    border-radius: 50%;
-    transition: border-color 100ms ease-in-out;
-    border: 2px solid transparent;
-    pointer-events: none;
+  ${(props) =>
+    props.$isPresent &&
+    css<AvatarWrapperProps>`
+      &:after {
+        content: "";
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border-radius: 50%;
+        transition: border-color 100ms ease-in-out;
+        border: 2px solid transparent;
+        pointer-events: none;
 
-    ${(props) =>
-      props.$isObserving &&
-      css`
-        border: 2px solid ${props.$color};
-        box-shadow: inset 0 0 0 2px ${props.theme.background};
+        ${(props) =>
+          props.$isObserving &&
+          css`
+            border: 2px solid ${props.$color};
+            box-shadow: inset 0 0 0 2px ${props.theme.background};
 
-        &:hover {
-          top: -1px;
-          left: -1px;
-          right: -1px;
-          bottom: -1px;
-        }
-      `}
-  }
+            &:hover {
+              top: -1px;
+              left: -1px;
+              right: -1px;
+              bottom: -1px;
+            }
+          `}
+      }
 
-  &:hover:after {
-    border: 2px solid ${(props) => props.$color};
-    box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
-  }
+      &:hover:after {
+        border: 2px solid ${(props) => props.$color};
+        box-shadow: inset 0 0 0 2px ${(props) => props.theme.background};
+      }
+    `}
 `;
 
-export default withTranslation()(AvatarWithPresence);
+export default observer(AvatarWithPresence);

app/components/Breadcrumb.tsx

@@ -37,7 +37,7 @@ function Breadcrumb({
   return (
     <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment key={item.to || index}>
+        <React.Fragment key={String(item.to) || index}>
           {item.icon}
           {item.to ? (
             <Item
@@ -67,6 +67,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   display: flex;
   flex-shrink: 1;
   min-width: 0;
+  cursor: var(--pointer);
   color: ${(props) => props.theme.text};
   font-size: 15px;
   height: 24px;

app/components/Button.tsx

@@ -1,15 +1,21 @@
+import { LocationDescriptor } from "history";
 import { ExpandedIcon } from "outline-icons";
 import { darken, lighten } from "polished";
 import * as React from "react";
 import styled from "styled-components";
+import ActionButton, {
+  Props as ActionButtonProps,
+} from "~/components/ActionButton";
 
-const RealButton = styled.button<{
+type RealProps = {
   fullwidth?: boolean;
   borderOnHover?: boolean;
   $neutral?: boolean;
   danger?: boolean;
   iconColor?: string;
-}>`
+};
+
+const RealButton = styled(ActionButton)<RealProps>`
   display: ${(props) => (props.fullwidth ? "block" : "inline-block")};
   width: ${(props) => (props.fullwidth ? "100%" : "auto")};
   margin: 0;
@@ -24,7 +30,7 @@ const RealButton = styled.button<{
   height: 32px;
   text-decoration: none;
   flex-shrink: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
   user-select: none;
   appearance: none !important;
 
@@ -145,7 +151,7 @@ export const Inner = styled.span<{
   ${(props) => props.hasIcon && !props.hasText && "padding: 0 4px;"};
 `;
 
-export type Props<T> = {
+export type Props<T> = ActionButtonProps & {
   icon?: React.ReactNode;
   iconColor?: string;
   children?: React.ReactNode;
@@ -155,7 +161,7 @@ export type Props<T> = {
   primary?: boolean;
   fullwidth?: boolean;
   as?: T;
-  to?: string;
+  to?: LocationDescriptor;
   borderOnHover?: boolean;
   href?: string;
   "data-on"?: string;
@@ -167,12 +173,19 @@ const Button = <T extends React.ElementType = "button">(
   props: Props<T> & React.ComponentPropsWithoutRef<T>,
   ref: React.Ref<HTMLButtonElement>
 ) => {
-  const { type, icon, children, value, disclosure, neutral, ...rest } = props;
+  const { type, children, value, disclosure, neutral, action, ...rest } = props;
   const hasText = children !== undefined || value !== undefined;
+  const icon = action?.icon ?? rest.icon;
   const hasIcon = icon !== undefined;
 
   return (
-    <RealButton type={type || "button"} ref={ref} $neutral={neutral} {...rest}>
+    <RealButton
+      type={type || "button"}
+      ref={ref}
+      $neutral={neutral}
+      action={action}
+      {...rest}
+    >
       <Inner hasIcon={hasIcon} hasText={hasText} disclosure={disclosure}>
         {hasIcon && icon}
         {hasText && <Label hasIcon={hasIcon}>{children || value}</Label>}

app/components/ButtonLink.tsx

@@ -1,17 +1,6 @@
-import * as React from "react";
 import styled from "styled-components";
 
-type Props = {
-  onClick?: React.MouseEventHandler<HTMLButtonElement>;
-};
-
-const ButtonLink: React.FC<Props> = React.forwardRef(
-  (props: Props, ref: React.Ref<HTMLButtonElement>) => {
-    return <Button {...props} ref={ref} />;
-  }
-);
-
-const Button = styled.button`
+const ButtonLink = styled.button`
   margin: 0;
   padding: 0;
   border: 0;

app/components/CenteredContent.tsx

@@ -12,7 +12,7 @@ const Container = styled.div<Props>`
   padding: ${(props) => (props.withStickyHeader ? "4px 12px" : "60px 12px")};
 
   ${breakpoint("tablet")`
-    padding: ${(props: any) =>
+    padding: ${(props: Props) =>
       props.withStickyHeader ? "4px 44px 60px" : "60px 44px"};
   `};
 `;

app/components/Collaborators.tsx

@@ -42,8 +42,9 @@ function Collaborators(props: Props) {
         filter(
           users.orderedData,
           (user) =>
-            presentIds.includes(user.id) ||
-            document.collaboratorIds.includes(user.id)
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
         ),
         (user) => presentIds.includes(user.id)
       ),
@@ -89,7 +90,6 @@ function Collaborators(props: Props) {
                     isEditing={isEditing}
                     isObserving={isObserving}
                     isCurrentUser={currentUserId === collaborator.id}
-                    profileOnClick={false}
                     onClick={
                       isObservable
                         ? (ev) => {

app/components/CollectionDeleteDialog.tsx

@@ -3,12 +3,10 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import Collection from "~/models/Collection";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { homePath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -16,39 +14,29 @@ type Props = {
   onSubmit: () => void;
 };
 
-function CollectionDelete({ collection, onSubmit }: Props) {
-  const [isDeleting, setIsDeleting] = React.useState(false);
+function CollectionDeleteDialog({ collection, onSubmit }: Props) {
   const team = useCurrentTeam();
-  const { showToast } = useToasts();
   const { ui } = useStores();
   const history = useHistory();
   const { t } = useTranslation();
-  const handleSubmit = React.useCallback(
-    async (ev: React.SyntheticEvent) => {
-      ev.preventDefault();
-      setIsDeleting(true);
 
-      try {
-        const redirect = collection.id === ui.activeCollectionId;
-        await collection.delete();
-        onSubmit();
-        if (redirect) {
-          history.push(homePath());
-        }
-      } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
-      } finally {
-        setIsDeleting(false);
-      }
-    },
-    [collection, history, onSubmit, showToast, ui.activeCollectionId]
-  );
+  const handleSubmit = async () => {
+    const redirect = collection.id === ui.activeCollectionId;
+    await collection.delete();
+    onSubmit();
+    if (redirect) {
+      history.push(homePath());
+    }
+  };
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("I’m sure – Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      <>
         <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."
@@ -73,12 +61,9 @@ function CollectionDelete({ collection, onSubmit }: Props) {
             />
           </Text>
         ) : null}
-        <Button type="submit" disabled={isDeleting} autoFocus danger>
-          {isDeleting ? `${t("Deleting")}…` : t("I’m sure – Delete")}
-        </Button>
-      </form>
-    </Flex>
+      </>
+    </ConfirmationDialog>
   );
 }
 
-export default observer(CollectionDelete);
+export default observer(CollectionDeleteDialog);

app/components/CollectionDescription.tsx

@@ -25,7 +25,7 @@ function CollectionDescription({ collection }: Props) {
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
   const [isDirty, setDirty] = React.useState(false);
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
 
   const handleStartEditing = React.useCallback(() => {
     setEditing(true);

app/components/CollectionIcon.tsx

@@ -5,7 +5,7 @@ import * as React from "react";
 import Collection from "~/models/Collection";
 import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
-import Logger from "~/utils/logger";
+import Logger from "~/utils/Logger";
 
 type Props = {
   collection: Collection;

app/components/CommandBar.tsx

@@ -38,10 +38,10 @@ function CommandBar() {
 
   return (
     <>
-      <SearchActions />
       <KBarPortal>
         <Positioner>
           <Animator>
+            <SearchActions />
             <SearchInput
               placeholder={`${
                 rootAction?.placeholder ||

app/components/CommandBarItem.tsx

@@ -98,7 +98,7 @@ const Item = styled.div<{ active?: boolean }>`
   display: flex;
   align-items: center;
   justify-content: space-between;
-  cursor: pointer;
+  cursor: var(--pointer);
 
   text-overflow: ellipsis;
   white-space: nowrap;

app/components/ConfirmationDialog.tsx

@@ -7,20 +7,23 @@ import useStores from "~/hooks/useStores";
 import useToasts from "~/hooks/useToasts";
 
 type Props = {
-  onSubmit: () => void;
-  children: JSX.Element;
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
+  /** Text to display on the submit button */
   submitText?: string;
+  /** Text to display while the form is saving */
   savingText?: string;
+  /** If true, the submit button will be a dangerous red */
   danger?: boolean;
 };
 
-function ConfirmationDialog({
+const ConfirmationDialog: React.FC<Props> = ({
   onSubmit,
   children,
   submitText,
   savingText,
   danger,
-}: Props) {
+}) => {
   const [isSaving, setIsSaving] = React.useState(false);
   const { dialogs } = useStores();
   const { showToast } = useToasts();
@@ -53,6 +56,6 @@ function ConfirmationDialog({
       </form>
     </Flex>
   );
-}
+};
 
 export default observer(ConfirmationDialog);

app/components/ContextMenu/MenuItem.tsx

@@ -1,9 +1,9 @@
+import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { hover } from "~/styles";
 import MenuIconWrapper from "../MenuIconWrapper";
 
 type Props = {
@@ -11,7 +11,7 @@ type Props = {
   selected?: boolean;
   disabled?: boolean;
   dangerous?: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   href?: string;
   target?: "_blank";
   as?: string | React.ComponentType<any>;
@@ -132,16 +132,18 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       ? "pointer-events: none;"
       : `
 
-  &:${hover},
-  &:focus,
-  &.focus-visible {
-    color: ${props.theme.white};
-    background: ${props.dangerous ? props.theme.danger : props.theme.primary};
-    box-shadow: none;
-    cursor: pointer;
+  @media (hover: hover) {
+    &:hover,
+    &:focus,
+    &.focus-visible {
+      color: ${props.theme.white};
+      background: ${props.dangerous ? props.theme.danger : props.theme.primary};
+      box-shadow: none;
+      cursor: var(--pointer);
 
-    svg {
-      fill: ${props.theme.white};
+      svg {
+        fill: ${props.theme.white};
+      }
     }
   }
   `};

app/components/ContextMenu/Separator.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { MenuSeparator } from "reakit/Menu";
 import styled from "styled-components";
 
-export default function Separator(rest: any) {
+export default function Separator(rest: React.HTMLAttributes<HTMLHRElement>) {
   return (
     <MenuSeparator {...rest}>
       {(props) => <HorizontalRule {...props} />}

app/components/ContextMenu/Template.tsx

@@ -69,29 +69,27 @@ const Submenu = React.forwardRef(
 );
 
 export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
-  let filtered = items.filter((item) => item.visible !== false);
-
-  // this block literally just trims unnecessary separators
-  filtered = filtered.reduce((acc, item, index) => {
-    // trim separators from start / end
-    if (item.type === "separator" && index === 0) {
-      return acc;
-    }
-    if (item.type === "separator" && index === filtered.length - 1) {
-      return acc;
-    }
-
-    // trim double separators looking ahead / behind
-    const prev = filtered[index - 1];
-    if (prev && prev.type === "separator" && item.type === "separator") {
-      return acc;
-    }
-
-    // otherwise, continue
-    return [...acc, item];
-  }, []);
-
-  return filtered;
+  return items
+    .filter((item) => item.visible !== false)
+    .reduce((acc, item) => {
+      // trim separator if the previous item was a separator
+      if (
+        item.type === "separator" &&
+        acc[acc.length - 1]?.type === "separator"
+      ) {
+        return acc;
+      }
+      return [...acc, item];
+    }, [] as TMenuItem[])
+    .filter((item, index, arr) => {
+      if (
+        item.type === "separator" &&
+        (index === 0 || index === arr.length - 1)
+      ) {
+        return false;
+      }
+      return true;
+    });
 }
 
 function Template({ items, actions, context, ...menu }: Props) {

app/components/ContextMenu/index.tsx

@@ -1,6 +1,6 @@
+import { disableBodyScroll, enableBodyScroll } from "body-scroll-lock";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Portal } from "react-portal";
 import { Menu } from "reakit/Menu";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -8,6 +8,7 @@ import { depths } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
+import useMobile from "~/hooks/useMobile";
 import usePrevious from "~/hooks/usePrevious";
 import useStores from "~/hooks/useStores";
 import useUnmount from "~/hooks/useUnmount";
@@ -58,6 +59,7 @@ const ContextMenu: React.FC<Props> = ({
   const { ui } = useStores();
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
+  const isMobile = useMobile();
 
   useUnmount(() => {
     setIsMenuOpen(false);
@@ -92,6 +94,19 @@ const ContextMenu: React.FC<Props> = ({
     t,
   ]);
 
+  // We must manually manage scroll lock for iOS support so that the scrollable
+  // element can be passed into body-scroll-lock. See:
+  // https://github.com/ariakit/ariakit/issues/469
+  React.useEffect(() => {
+    const scrollElement = backgroundRef.current;
+    if (rest.visible && scrollElement) {
+      disableBodyScroll(scrollElement);
+    }
+    return () => {
+      scrollElement && enableBodyScroll(scrollElement);
+    };
+  }, [rest.visible]);
+
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -101,7 +116,7 @@ const ContextMenu: React.FC<Props> = ({
   // trigger and the bottom of the window
   return (
     <>
-      <Menu hideOnClickOutside preventBodyScroll {...rest}>
+      <Menu hideOnClickOutside={!isMobile} preventBodyScroll={false} {...rest}>
         {(props) => {
           // kind of hacky, but this is an effective way of telling which way
           // the menu will _actually_ be placed when taking into account screen
@@ -111,32 +126,38 @@ const ContextMenu: React.FC<Props> = ({
           const rightAnchor = props.placement === "bottom-end";
 
           return (
-            <Position {...props}>
-              <Background
-                dir="auto"
-                topAnchor={topAnchor}
-                rightAnchor={rightAnchor}
-                ref={backgroundRef}
-                hiddenScrollbars
-                style={
-                  maxHeight && topAnchor
-                    ? {
-                        maxHeight,
-                      }
-                    : undefined
-                }
-              >
-                {rest.visible || rest.animating ? children : null}
-              </Background>
-            </Position>
+            <>
+              {isMobile && (
+                <Backdrop
+                  onClick={(ev) => {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    rest.hide?.();
+                  }}
+                />
+              )}
+              <Position {...props}>
+                <Background
+                  dir="auto"
+                  topAnchor={topAnchor}
+                  rightAnchor={rightAnchor}
+                  ref={backgroundRef}
+                  hiddenScrollbars
+                  style={
+                    maxHeight && topAnchor
+                      ? {
+                          maxHeight,
+                        }
+                      : undefined
+                  }
+                >
+                  {rest.visible || rest.animating ? children : null}
+                </Background>
+              </Position>
+            </>
           );
         }}
       </Menu>
-      {(rest.visible || rest.animating) && (
-        <Portal>
-          <Backdrop onClick={rest.hide} />
-        </Portal>
-      )}
     </>
   );
 };
@@ -152,10 +173,6 @@ export const Backdrop = styled.div`
   bottom: 0;
   background: ${(props) => props.theme.backdrop};
   z-index: ${depths.menu - 1};
-
-  ${breakpoint("tablet")`
-    display: none;
-  `};
 `;
 
 export const Position = styled.div`

app/components/CopyToClipboard.ts

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
+import env from "~/env";
 
 type Props = {
   text: string;
@@ -14,7 +15,7 @@ class CopyToClipboard extends React.PureComponent<Props> {
     const elem = React.Children.only(children);
 
     copy(text, {
-      debug: process.env.NODE_ENV !== "production",
+      debug: env.ENVIRONMENT !== "production",
       format: "text/plain",
     });
 

app/components/DocumentCard.tsx

@@ -3,11 +3,10 @@ import { CSS } from "@dnd-kit/utilities";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon, DocumentIcon, ClockIcon } from "outline-icons";
-import { getLuminance, transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
-import styled, { css } from "styled-components";
+import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
@@ -15,6 +14,8 @@ import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import CollectionIcon from "./CollectionIcon";
+import EmojiIcon from "./EmojiIcon";
+import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
 
@@ -32,6 +33,7 @@ type Props = {
 function DocumentCard(props: Props) {
   const { t } = useTranslation();
   const { collections } = useStores();
+  const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
   const collection = collections.get(document.collectionId);
   const {
@@ -41,16 +43,24 @@ function DocumentCard(props: Props) {
     transform,
     transition,
     isDragging,
-  } = useSortable({ id: props.document.id });
+  } = useSortable({
+    id: props.document.id,
+    disabled: !isDraggable || !canUpdatePin,
+  });
 
   const style = {
     transform: CSS.Transform.toString(transform),
     transition,
   };
 
-  const handleUnpin = React.useCallback(() => {
-    pin?.delete();
-  }, [pin]);
+  const handleUnpin = React.useCallback(
+    (ev) => {
+      ev.preventDefault();
+      ev.stopPropagation();
+      pin?.delete();
+    },
+    [pin]
+  );
 
   return (
     <Reorderable
@@ -58,6 +68,8 @@ function DocumentCard(props: Props) {
       style={style}
       $isDragging={isDragging}
       {...attributes}
+      {...listeners}
+      tabIndex={-1}
     >
       <AnimatePresence
         initial={{ opacity: 0, scale: 0.95 }}
@@ -73,12 +85,6 @@ function DocumentCard(props: Props) {
       >
         <DocumentLink
           dir={document.dir}
-          style={{
-            background:
-              collection?.color && getLuminance(collection.color) < 0.6
-                ? collection.color
-                : undefined,
-          }}
           $isDragging={isDragging}
           to={{
             pathname: document.url,
@@ -88,89 +94,117 @@ function DocumentCard(props: Props) {
           }}
         >
           <Content justify="space-between" column>
-            {collection?.icon &&
-            collection?.icon !== "collection" &&
-            !pin?.collectionId ? (
-              <CollectionIcon collection={collection} color="white" />
+            <Fold
+              width="20"
+              height="21"
+              viewBox="0 0 20 21"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path d="M19.5 20.5H6C2.96243 20.5 0.5 18.0376 0.5 15V0.5H0.792893L19.5 19.2071V20.5Z" />
+              <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
+            </Fold>
+
+            {document.emoji ? (
+              <Squircle color={theme.slateLight}>
+                <EmojiIcon emoji={document.emoji} size={26} />
+              </Squircle>
             ) : (
-              <DocumentIcon color="white" />
+              <Squircle color={collection?.color}>
+                {collection?.icon &&
+                collection?.icon !== "collection" &&
+                !pin?.collectionId ? (
+                  <CollectionIcon collection={collection} color="white" />
+                ) : (
+                  <DocumentIcon color="white" />
+                )}
+              </Squircle>
             )}
             <div>
-              <Heading dir={document.dir}>{document.titleWithDefault}</Heading>
+              <Heading dir={document.dir}>
+                {document.emoji
+                  ? document.titleWithDefault.replace(document.emoji, "")
+                  : document.titleWithDefault}
+              </Heading>
               <DocumentMeta size="xsmall">
-                <ClockIcon color="currentColor" size={18} />{" "}
-                <Time dateTime={document.updatedAt} addSuffix shorten />
+                <Clock color="currentColor" size={18} />
+                <Time
+                  dateTime={document.updatedAt}
+                  tooltipDelay={500}
+                  addSuffix
+                  shorten
+                />
               </DocumentMeta>
             </div>
           </Content>
+          {canUpdatePin && (
+            <Actions dir={document.dir} gap={4}>
+              {!isDragging && pin && (
+                <Tooltip tooltip={t("Unpin")}>
+                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
+                    <CloseIcon color="currentColor" />
+                  </PinButton>
+                </Tooltip>
+              )}
+            </Actions>
+          )}
         </DocumentLink>
-        {canUpdatePin && (
-          <Actions dir={document.dir} gap={4}>
-            {!isDragging && pin && (
-              <Tooltip tooltip={t("Unpin")}>
-                <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
-                  <CloseIcon color="currentColor" />
-                </PinButton>
-              </Tooltip>
-            )}
-            {isDraggable && (
-              <DragHandle $isDragging={isDragging} {...listeners}>
-                :::
-              </DragHandle>
-            )}
-          </Actions>
-        )}
       </AnimatePresence>
     </Reorderable>
   );
 }
 
+const Clock = styled(ClockIcon)`
+  flex-shrink: 0;
+`;
+
+const AnimatePresence = styled(m.div)`
+  width: 100%;
+  height: 100%;
+`;
+
+const Fold = styled.svg`
+  fill: ${(props) => props.theme.background};
+  stroke: ${(props) => props.theme.inputBorder};
+  background: ${(props) => props.theme.background};
+
+  position: absolute;
+  top: -1px;
+  right: -2px;
+`;
+
 const PinButton = styled(NudeButton)`
-  color: ${(props) => props.theme.white75};
+  color: ${(props) => props.theme.textTertiary};
 
   &:hover,
   &:active {
-    color: ${(props) => props.theme.white};
+    color: ${(props) => props.theme.text};
   }
 `;
 
 const Actions = styled(Flex)`
   position: absolute;
-  top: 12px;
-  right: ${(props) => (props.dir === "rtl" ? "auto" : "12px")};
-  left: ${(props) => (props.dir === "rtl" ? "12px" : "auto")};
+  top: 4px;
+  right: ${(props) => (props.dir === "rtl" ? "auto" : "4px")};
+  left: ${(props) => (props.dir === "rtl" ? "4px" : "auto")};
   opacity: 0;
-  transition: opacity 100ms ease-in-out;
+  color: ${(props) => props.theme.textTertiary};
 
   // move actions above content
   z-index: 2;
 `;
 
-const DragHandle = styled.div<{ $isDragging: boolean }>`
-  cursor: ${(props) => (props.$isDragging ? "grabbing" : "grab")};
-  padding: 0 4px;
-  font-weight: bold;
-  color: ${(props) => props.theme.white75};
-  line-height: 1.35;
-
-  &:hover,
-  &:active {
-    color: ${(props) => props.theme.white};
-  }
-`;
-
-const AnimatePresence = m.div;
-
 const Reorderable = styled.div<{ $isDragging: boolean }>`
   position: relative;
   user-select: none;
-  border-radius: 8px;
+  touch-action: none;
+  width: 170px;
+  height: 180px;
+  transition: box-shadow 200ms ease;
 
   // move above other cards when dragging
   z-index: ${(props) => (props.$isDragging ? 1 : "inherit")};
-  transform: scale(${(props) => (props.$isDragging ? "1.025" : "1")});
-  box-shadow: ${(props) =>
-    props.$isDragging ? "0 0 20px rgba(0,0,0,0.3);" : "0 0 0 rgba(0,0,0,0)"};
+  pointer-events: ${(props) => (props.$isDragging ? "none" : "inherit")};
 
   &:hover ${Actions} {
     opacity: 1;
@@ -180,45 +214,34 @@ const Reorderable = styled.div<{ $isDragging: boolean }>`
 const Content = styled(Flex)`
   min-width: 0;
   height: 100%;
-
-  // move content above ::after
-  position: relative;
-  z-index: 1;
 `;
 
 const DocumentMeta = styled(Text)`
   display: flex;
   align-items: center;
   gap: 2px;
-  color: ${(props) => transparentize(0.25, props.theme.white)};
-  margin: 0;
+  color: ${(props) => props.theme.textTertiary};
+  margin: 0 0 0 -2px;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
 `;
 
 const DocumentLink = styled(Link)<{
-  $menuOpen?: boolean;
   $isDragging?: boolean;
 }>`
   position: relative;
   display: block;
   padding: 12px;
+  width: 100%;
+  height: 100%;
   border-radius: 8px;
-  height: 160px;
-  background: ${(props) => props.theme.slate};
-  color: ${(props) => props.theme.white};
+  cursor: var(--pointer);
+  background: ${(props) => props.theme.background};
   transition: transform 50ms ease-in-out;
-
-  &:after {
-    content: "";
-    display: block;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(transparent, rgba(0, 0, 0, 0.1));
-    border-radius: 8px;
-    pointer-events: none;
-  }
+  border: 1px solid ${(props) => props.theme.inputBorder};
+  border-bottom-width: 2px;
+  border-right-width: 2px;
 
   ${Actions} {
     opacity: 0;
@@ -228,28 +251,22 @@ const DocumentLink = styled(Link)<{
   &:active,
   &:focus,
   &:focus-within {
+    transform: ${(props) => (props.$isDragging ? "scale(1.1)" : "scale(1.08)")}
+      rotate(-2deg);
+    box-shadow: ${(props) =>
+      props.$isDragging
+        ? "0 0 20px rgba(0,0,0,0.2);"
+        : "0 0 10px rgba(0,0,0,0.1)"};
+    z-index: 1;
+
+    ${Fold} {
+      display: none;
+    }
+
     ${Actions} {
       opacity: 1;
     }
-
-    ${(props) =>
-      !props.$isDragging &&
-      css`
-        &:after {
-          background: rgba(0, 0, 0, 0.1);
-        }
-      `}
   }
-
-  ${(props) =>
-    props.$menuOpen &&
-    css`
-      background: ${(props) => props.theme.listItemHoverBackground};
-
-      ${Actions} {
-        opacity: 1;
-      }
-    `}
 `;
 
 const Heading = styled.h3`
@@ -259,7 +276,7 @@ const Heading = styled.h3`
   max-height: 66px; // 3*line-height
   overflow: hidden;
 
-  color: ${(props) => props.theme.white};
+  color: ${(props) => props.theme.text};
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
     Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

app/components/DocumentHistory.tsx

@@ -1,9 +1,10 @@
+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 from "styled-components";
+import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Event from "~/models/Event";
 import Button from "~/components/Button";
@@ -11,6 +12,7 @@ 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";
 
@@ -21,6 +23,7 @@ function DocumentHistory() {
   const { t } = useTranslation();
   const match = useRouteMatch<{ documentSlug: string }>();
   const history = useHistory();
+  const theme = useTheme();
   const document = documents.getByUrl(match.params.documentSlug);
 
   const eventsInDocument = document
@@ -44,7 +47,8 @@ function DocumentHistory() {
       eventsInDocument.unshift(
         new Event(
           {
-            name: "documents.latest_version",
+            id: "live",
+            name: "documents.live_editing",
             documentId: document.id,
             createdAt: document.updatedAt,
             actor: document.updatedBy,
@@ -57,8 +61,25 @@ function DocumentHistory() {
     return eventsInDocument;
   }, [eventsInDocument, events, document]);
 
+  useKeyDown("Escape", onCloseHistory);
+
   return (
-    <Sidebar>
+    <Sidebar
+      initial={{
+        width: 0,
+      }}
+      animate={{
+        transition: {
+          type: "spring",
+          bounce: 0.2,
+          duration: 0.6,
+        },
+        width: theme.sidebarWidth,
+      }}
+      exit={{
+        width: 0,
+      }}
+    >
       {document ? (
         <Position column>
           <Header>
@@ -79,7 +100,7 @@ function DocumentHistory() {
                 documentId: document.id,
               }}
               document={document}
-              empty={<Empty>{t("Oh weird, there's nothing here")}</Empty>}
+              empty={<EmptyHistory>{t("No history yet")}</EmptyHistory>}
             />
           </Scrollable>
         </Position>
@@ -88,6 +109,10 @@ function DocumentHistory() {
   );
 }
 
+const EmptyHistory = styled(Empty)`
+  padding: 0 12px;
+`;
+
 const Position = styled(Flex)`
   position: fixed;
   top: 0;
@@ -95,7 +120,7 @@ const Position = styled(Flex)`
   width: ${(props) => props.theme.sidebarWidth}px;
 `;
 
-const Sidebar = styled(Flex)`
+const Sidebar = styled(m.div)`
   display: none;
   position: relative;
   flex-shrink: 0;
@@ -125,7 +150,7 @@ const Title = styled(Flex)`
 const Header = styled(Flex)`
   align-items: center;
   position: relative;
-  padding: 12px;
+  padding: 16px 12px;
   color: ${(props) => props.theme.text};
   flex-shrink: 0;
 `;

app/components/DocumentListItem.tsx

@@ -49,8 +49,8 @@ function DocumentListItem(
   ref: React.RefObject<HTMLAnchorElement>
 ) {
   const { t } = useTranslation();
-  const currentUser = useCurrentUser();
-  const currentTeam = useCurrentTeam();
+  const user = useCurrentUser();
+  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -70,7 +70,7 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(currentTeam.id);
+  const can = usePolicy(team);
   const canCollection = usePolicy(document.collectionId);
 
   return (
@@ -96,7 +96,7 @@ function DocumentListItem(
             highlight={highlight}
             dir={document.dir}
           />
-          {document.isBadgedNew && document.createdBy.id !== currentUser.id && (
+          {document.isBadgedNew && document.createdBy.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (
@@ -201,6 +201,7 @@ const DocumentLink = styled(Link)<{
   border-radius: 8px;
   max-height: 50vh;
   width: calc(100vw - 8px);
+  cursor: var(--pointer);
 
   &:focus-visible {
     outline: none;

app/components/DocumentMeta.tsx

@@ -1,3 +1,4 @@
+import { LocationDescriptor } from "history";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -11,31 +12,14 @@ import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
-const Container = styled(Flex)<{ rtl?: boolean }>`
-  justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
-  color: ${(props) => props.theme.textTertiary};
-  font-size: 13px;
-  white-space: nowrap;
-  overflow: hidden;
-  min-width: 0;
-`;
-
-const Viewed = styled.span`
-  text-overflow: ellipsis;
-  overflow: hidden;
-`;
-
-const Modified = styled.span<{ highlight?: boolean }>`
-  font-weight: ${(props) => (props.highlight ? "600" : "400")};
-`;
-
 type Props = {
   showCollection?: boolean;
   showPublished?: boolean;
   showLastViewed?: boolean;
   showParentDocuments?: boolean;
   document: Document;
-  to?: string;
+  replace?: boolean;
+  to?: LocationDescriptor;
 };
 
 const DocumentMeta: React.FC<Props> = ({
@@ -45,6 +29,7 @@ const DocumentMeta: React.FC<Props> = ({
   showParentDocuments,
   document,
   children,
+  replace,
   to,
   ...rest
 }) => {
@@ -162,7 +147,13 @@ const DocumentMeta: React.FC<Props> = ({
 
   return (
     <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
-      {to ? <Link to={to}>{content}</Link> : content}
+      {to ? (
+        <Link to={to} replace={replace}>
+          {content}
+        </Link>
+      ) : (
+        content
+      )}
       {showCollection && collection && (
         <span>
           &nbsp;{t("in")}&nbsp;
@@ -191,4 +182,22 @@ 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};
+  font-size: 13px;
+  white-space: nowrap;
+  overflow: hidden;
+  min-width: 0;
+`;
+
+const Viewed = styled.span`
+  text-overflow: ellipsis;
+  overflow: hidden;
+`;
+
+const Modified = styled.span<{ highlight?: boolean }>`
+  font-weight: ${(props) => (props.highlight ? "600" : "400")};
+`;
+
 export default observer(DocumentMeta);

app/components/DocumentMetaWithViews.tsx

@@ -1,4 +1,5 @@
-import { useObserver } from "mobx-react";
+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";
@@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores";
 type Props = {
   document: Document;
   isDraft: boolean;
-  to?: string;
+  to?: LocationDescriptor;
   rtl?: boolean;
 };
 
@@ -23,14 +24,6 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   const totalViewers = documentViews.length;
   const onlyYou = totalViewers === 1 && documentViews[0].user.id;
 
-  React.useEffect(() => {
-    if (!document.isDeleted) {
-      views.fetchPage({
-        documentId: document.id,
-      });
-    }
-  }, [views, document.id, document.isDeleted]);
-
   const popover = usePopoverState({
     gutter: 8,
     placement: "bottom",
@@ -38,7 +31,7 @@ function DocumentMetaWithViews({ to, isDraft, document, ...rest }: Props) {
   });
 
   return (
-    <Meta document={document} to={to} {...rest}>
+    <Meta document={document} to={to} replace {...rest}>
       {totalViewers && !isDraft ? (
         <PopoverDisclosure {...popover}>
           {(props) => (
@@ -83,4 +76,4 @@ const Meta = styled(DocumentMeta)<{ rtl?: boolean }>`
   }
 `;
 
-export default DocumentMetaWithViews;
+export default observer(DocumentMetaWithViews);

app/components/DocumentTasks.tsx

@@ -1,3 +1,4 @@
+import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, TFunction } from "react-i18next";
@@ -60,4 +61,4 @@ const Done = styled(DoneIcon)<{ $animated: boolean }>`
   transform-origin: center center;
 `;
 
-export default DocumentTasks;
+export default observer(DocumentTasks);

app/components/Editor.tsx

@@ -1,33 +1,38 @@
 import { formatDistanceToNow } from "date-fns";
 import { deburr, 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 { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
-import embeds from "@shared/editor/embeds";
-import { supportedImageMimeTypes } from "@shared/utils/files";
-import getDataTransferFiles from "@shared/utils/getDataTransferFiles";
+import { Heading } from "@shared/editor/lib/getHeadings";
+import { getDataTransferFiles } from "@shared/utils/files";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isInternalUrl } from "@shared/utils/urls";
+import { AttachmentValidation } from "@shared/validations";
 import Document from "~/models/Document";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
 import HoverPreview from "~/components/HoverPreview";
 import type { Props as EditorProps, Editor as SharedEditor } from "~/editor";
 import useDictionary from "~/hooks/useDictionary";
+import useEmbeds from "~/hooks/useEmbeds";
 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 { sharedDocumentPath } from "~/utils/routeHelpers";
 import { isHash } from "~/utils/urls";
 import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
 const LazyLoadedEditor = React.lazy(
   () =>
     import(
-      /* webpackChunkName: "shared-editor" */
+      /* webpackChunkName: "preload-shared-editor" */
       "~/editor"
     )
 );
@@ -45,19 +50,22 @@ export type Props = Optional<
   shareId?: string | undefined;
   embedsDisabled?: boolean;
   grow?: boolean;
+  onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
   onPublish?: (event: React.MouseEvent) => any;
 };
 
-function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
-  const { id, shareId } = props;
+function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
+  const { id, shareId, onChange, onHeadingsChange } = props;
   const { documents } = useStores();
   const { showToast } = useToasts();
   const dictionary = useDictionary();
+  const embeds = useEmbeds(!shareId);
   const [
     activeLinkEvent,
     setActiveLinkEvent,
   ] = React.useState<MouseEvent | null>(null);
+  const previousHeadings = React.useRef<Heading[] | null>(null);
 
   const handleLinkActive = React.useCallback((event: MouseEvent) => {
     setActiveLinkEvent(event);
@@ -152,8 +160,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
           }
         }
 
-        if (shareId) {
-          navigateTo = `/share/${shareId}${navigateTo}`;
+        // 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/")) {
+          navigateTo = sharedDocumentPath(shareId, navigateTo);
         }
 
         history.push(navigateTo);
@@ -165,7 +175,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
   );
 
   const focusAtEnd = React.useCallback(() => {
-    ref.current?.focusAtEnd();
+    ref?.current?.focusAtEnd();
   }, [ref]);
 
   const handleDrop = React.useCallback(
@@ -173,21 +183,41 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
       event.preventDefault();
       event.stopPropagation();
       const files = getDataTransferFiles(event);
-      const view = ref.current?.view;
+
+      const view = ref?.current?.view;
       if (!view) {
         return;
       }
 
+      // Find a valid position at the end of the document to insert our content
+      const pos = TextSelection.near(
+        view.state.doc.resolve(view.state.doc.nodeSize - 2)
+      ).from;
+
+      // If there are no files in the drop event attempt to parse the html
+      // as a fragment and insert it at the end of the document
+      if (files.length === 0) {
+        const text =
+          event.dataTransfer.getData("text/html") ||
+          event.dataTransfer.getData("text/plain");
+
+        const dom = new DOMParser().parseFromString(text, "text/html");
+
+        view.dispatch(
+          view.state.tr.insert(
+            pos,
+            ProsemirrorDOMParser.fromSchema(view.state.schema).parse(dom)
+          )
+        );
+
+        return;
+      }
+
       // Insert all files as attachments if any of the files are not images.
       const isAttachment = files.some(
-        (file) => !supportedImageMimeTypes.includes(file.type)
+        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
       );
 
-      // Find a valid position at the end of the document
-      const pos = TextSelection.near(
-        view.state.doc.resolve(view.state.doc.nodeSize - 2)
-      ).from;
-
       insertFiles(view, event, pos, files, {
         uploadFile: onUploadFile,
         onFileUploadStart: props.onFileUploadStart,
@@ -216,11 +246,43 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
     []
   );
 
+  // Calculate if headings have changed and trigger callback if so
+  const updateHeadings = React.useCallback(() => {
+    if (onHeadingsChange) {
+      const headings = ref?.current?.getHeadings();
+      if (
+        headings &&
+        headings.map((h) => h.level + h.title).join("") !==
+          previousHeadings.current?.map((h) => h.level + h.title).join("")
+      ) {
+        previousHeadings.current = headings;
+        onHeadingsChange(headings);
+      }
+    }
+  }, [ref, onHeadingsChange]);
+
+  const handleChange = React.useCallback(
+    (event) => {
+      onChange?.(event);
+      updateHeadings();
+    },
+    [onChange, updateHeadings]
+  );
+
+  const handleRefChanged = React.useCallback(
+    (node: SharedEditor | null) => {
+      if (node && !previousHeadings.current) {
+        updateHeadings();
+      }
+    },
+    [updateHeadings]
+  );
+
   return (
     <ErrorBoundary reloadOnChunkMissing>
       <>
         <LazyLoadedEditor
-          ref={ref}
+          ref={mergeRefs([ref, handleRefChanged])}
           uploadFile={onUploadFile}
           onShowToast={showToast}
           embeds={embeds}
@@ -229,6 +291,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
           onHoverLink={handleLinkActive}
           onClickLink={onClickLink}
           onSearchLink={handleSearchLink}
+          onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
@@ -252,4 +315,4 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor>) {
   );
 }
 
-export default React.forwardRef(Editor);
+export default observer(React.forwardRef(Editor));

app/components/Empty.ts

@@ -2,6 +2,7 @@ import styled from "styled-components";
 
 const Empty = styled.p`
   color: ${(props) => props.theme.textTertiary};
+  user-select: none;
 `;
 
 export default Empty;

app/components/ErrorBoundary.tsx

@@ -9,8 +9,8 @@ import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
-import isHosted from "~/utils/isHosted";
-import Logger from "~/utils/logger";
+import Logger from "~/utils/Logger";
+import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = WithTranslation & {
   reloadOnChunkMissing?: boolean;
@@ -59,7 +59,7 @@ class ErrorBoundary extends React.Component<Props> {
 
     if (this.error) {
       const error = this.error;
-      const isReported = !!env.SENTRY_DSN && isHosted;
+      const isReported = !!env.SENTRY_DSN && isCloudHosted;
       const isChunkError = this.error.message.match(/chunk/);
 
       if (isChunkError) {

app/components/EventListItem.tsx

@@ -1,10 +1,13 @@
+import { LocationDescriptor } from "history";
+import { observer } from "mobx-react";
 import {
   TrashIcon,
   ArchiveIcon,
   EditIcon,
   PublishIcon,
   MoveIcon,
-  CheckboxIcon,
+  UnpublishIcon,
+  LightningIcon,
 } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -19,7 +22,7 @@ import CompositeItem, {
 } from "~/components/List/CompositeItem";
 import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
-import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
 import { documentHistoryUrl } from "~/utils/routeHelpers";
 
@@ -31,36 +34,45 @@ type Props = {
 
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
+  const { revisions } = useStores();
   const location = useLocation();
-  const can = usePolicy(document.id);
   const opts = {
     userName: event.actor.name,
   };
   const isRevision = event.name === "revisions.create";
-  let meta, icon, to;
+  let meta, icon, to: LocationDescriptor | undefined;
 
   const ref = React.useRef<HTMLAnchorElement>(null);
   // the time component tends to steal focus when clicked
   // ...so forward the focus back to the parent item
-  const handleTimeClick = React.useCallback(() => {
+  const handleTimeClick = () => {
     ref.current?.focus();
-  }, [ref]);
+  };
+
+  const prefetchRevision = () => {
+    if (event.name === "revisions.create" && event.modelId) {
+      revisions.fetch(event.modelId);
+    }
+  };
 
   switch (event.name) {
     case "revisions.create":
-    case "documents.latest_version": {
-      if (latest) {
-        icon = <CheckboxIcon color="currentColor" size={16} checked />;
-        meta = t("Latest version");
-        to = documentHistoryUrl(document);
-        break;
-      } else {
-        icon = <EditIcon color="currentColor" size={16} />;
-        meta = t("{{userName}} edited", opts);
-        to = documentHistoryUrl(document, event.modelId || "");
-        break;
-      }
-    }
+      icon = <EditIcon color="currentColor" size={16} />;
+      meta = 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),
+        state: { retainScrollPosition: true },
+      };
+      break;
 
     case "documents.archive":
       icon = <ArchiveIcon color="currentColor" size={16} />;
@@ -85,6 +97,11 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       meta = t("{{userName}} published", opts);
       break;
 
+    case "documents.unpublish":
+      icon = <UnpublishIcon color="currentColor" size={16} />;
+      meta = t("{{userName}} unpublished", opts);
+      break;
+
     case "documents.move":
       icon = <MoveIcon color="currentColor" size={16} />;
       meta = t("{{userName}} moved", opts);
@@ -98,7 +115,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
     return null;
   }
 
-  const isActive = location.pathname === to;
+  const isActive =
+    typeof to === "string"
+      ? location.pathname === to
+      : location.pathname === to?.pathname;
 
   if (document.isDeleted) {
     to = undefined;
@@ -113,7 +133,10 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         <Time
           dateTime={event.createdAt}
           tooltipDelay={500}
-          format="MMM do, h:mm a"
+          format={{
+            en_US: "MMM do, h:mm a",
+            fr_FR: "'Le 'd MMMM 'à' H:mm",
+          }}
           relative={false}
           addSuffix
           onClick={handleTimeClick}
@@ -127,10 +150,11 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
         </Subtitle>
       }
       actions={
-        isRevision && isActive && event.modelId && can.update ? (
+        isRevision && isActive && event.modelId ? (
           <RevisionMenu document={document} revisionId={event.modelId} />
         ) : undefined
       }
+      onMouseEnter={prefetchRevision}
       ref={ref}
       {...rest}
     />
@@ -157,7 +181,7 @@ const Subtitle = styled.span`
 const ItemStyle = css`
   border: 0;
   position: relative;
-  margin: 8px;
+  margin: 8px 0;
   padding: 8px;
   border-radius: 8px;
 
@@ -208,4 +232,4 @@ const CompositeListItem = styled(CompositeItem)`
   ${ItemStyle}
 `;
 
-export default EventListItem;
+export default observer(EventListItem);

app/components/Facepile.tsx

@@ -9,7 +9,7 @@ type Props = {
   users: User[];
   size?: number;
   overflow?: number;
-  onClick?: React.MouseEventHandler<HTMLDivElement>;
+  limit?: number;
   renderAvatar?: (user: User) => React.ReactNode;
 };
 
@@ -17,6 +17,7 @@ function Facepile({
   users,
   overflow = 0,
   size = 32,
+  limit = 8,
   renderAvatar = DefaultAvatar,
   ...rest
 }: Props) {
@@ -24,10 +25,13 @@ function Facepile({
     <Avatars {...rest}>
       {overflow > 0 && (
         <More size={size}>
-          <span>+{overflow}</span>
+          <span>
+            {users.length ? "+" : ""}
+            {overflow}
+          </span>
         </More>
       )}
-      {users.map((user) => (
+      {users.slice(0, limit).map((user) => (
         <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
       ))}
     </Avatars>
@@ -65,7 +69,7 @@ const More = styled.div<{ size: number }>`
 const Avatars = styled(Flex)`
   align-items: center;
   flex-direction: row-reverse;
-  cursor: pointer;
+  cursor: var(--pointer);
 `;
 
 export default observer(Facepile);

app/components/Flex.tsx

@@ -11,11 +11,19 @@ const Flex = styled.div<{
   align?: AlignValues;
   justify?: JustifyValues;
   shrink?: boolean;
+  reverse?: boolean;
   gap?: number;
 }>`
   display: flex;
   flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
-  flex-direction: ${({ column }) => (column ? "column" : "row")};
+  flex-direction: ${({ column, reverse }) =>
+    reverse
+      ? column
+        ? "column-reverse"
+        : "row-reverse"
+      : column
+      ? "column"
+      : "row"};
   align-items: ${({ align }) => align};
   justify-content: ${({ justify }) => justify};
   flex-shrink: ${({ shrink }) => (shrink ? 1 : "initial")};

app/components/GroupListItem.tsx

@@ -13,13 +13,14 @@ import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
 import withStores from "~/components/withStores";
+import NudeButton from "./NudeButton";
 
 type Props = RootStore & {
   group: Group;
   membership?: CollectionGroupMembership;
   showFacepile?: boolean;
   showAvatar?: boolean;
-  renderActions: (arg0: { openMembersModal: () => void }) => React.ReactNode;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };
 
 @observer
@@ -63,11 +64,13 @@ class GroupListItem extends React.Component<Props> {
           actions={
             <Flex align="center" gap={8}>
               {showFacepile && (
-                <Facepile
+                <NudeButton
+                  width="auto"
+                  height="auto"
                   onClick={this.handleMembersModalOpen}
-                  users={users}
-                  overflow={overflow}
-                />
+                >
+                  <Facepile users={users} overflow={overflow} />
+                </NudeButton>
               )}
               {renderActions({
                 openMembersModal: this.handleMembersModalOpen,
@@ -99,7 +102,7 @@ const Image = styled(Flex)`
 const Title = styled.span`
   &:hover {
     text-decoration: underline;
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 `;
 

app/components/Header.tsx

@@ -15,19 +15,19 @@ import useStores from "~/hooks/useStores";
 import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
-  breadcrumb?: React.ReactNode;
+  left?: React.ReactNode;
   title: React.ReactNode;
   actions?: React.ReactNode;
   hasSidebar?: boolean;
 };
 
-function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
+function Header({ left, title, actions, hasSidebar }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
 
   const hasMobileSidebar = hasSidebar && isMobile;
 
-  const passThrough = !actions && !breadcrumb && !title;
+  const passThrough = !actions && !left && !title;
 
   const [isScrolled, setScrolled] = React.useState(false);
   const handleScroll = React.useMemo(
@@ -51,7 +51,7 @@ function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
 
   return (
     <Wrapper align="center" shrink={false} $passThrough={passThrough}>
-      {breadcrumb || hasMobileSidebar ? (
+      {left || hasMobileSidebar ? (
         <Breadcrumbs>
           {hasMobileSidebar && (
             <MobileMenuButton
@@ -61,7 +61,7 @@ function Header({ breadcrumb, title, actions, hasSidebar }: Props) {
               neutral
             />
           )}
-          {breadcrumb}
+          {left}
         </Breadcrumbs>
       ) : null}
 
@@ -143,7 +143,7 @@ const Title = styled("div")`
   text-overflow: ellipsis;
   white-space: nowrap;
   overflow: hidden;
-  cursor: pointer;
+  cursor: var(--pointer);
   min-width: 0;
 
   ${breakpoint("tablet")`

app/components/HoverPreviewDocument.tsx

@@ -50,7 +50,7 @@ function HoverPreviewDocument({ url, children }: Props) {
 }
 
 const Content = styled(Link)`
-  cursor: pointer;
+  cursor: var(--pointer);
 `;
 
 const Heading = styled.h2`

app/components/IconPicker.tsx

@@ -40,6 +40,7 @@ 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 { colorPalette } from "@shared/utils/collections";
 import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
 import { LabelText } from "~/components/Input";
@@ -200,18 +201,7 @@ export const icons = {
     keywords: "warning alert error",
   },
 };
-const colors = [
-  "#4E5C6E",
-  "#0366d6",
-  "#9E5CF7",
-  "#FF825C",
-  "#FF5C80",
-  "#FFBE0B",
-  "#42DED1",
-  "#00D084",
-  "#FF4DFA",
-  "#2F362F",
-];
+
 type Props = {
   onOpen?: () => void;
   onClose?: () => void;
@@ -272,7 +262,7 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
             <ColorPicker
               color={color}
               onChange={(color) => onChange(color.hex, icon)}
-              colors={colors}
+              colors={colorPalette}
               triangle="hide"
               styles={{
                 default: {

app/components/Input.tsx

@@ -38,6 +38,13 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
     color: ${(props) => props.theme.placeholder};
   }
 
+  &:-webkit-autofill,
+  &:-webkit-autofill:hover,
+  &:-webkit-autofill:focus {
+    -webkit-box-shadow: 0 0 0px 1000px ${(props) => props.theme.background}
+      inset;
+  }
+
   &::-webkit-search-cancel-button {
     -webkit-appearance: none;
   }
@@ -51,11 +58,13 @@ const Wrapper = styled.div<{
   flex?: boolean;
   short?: boolean;
   minHeight?: number;
+  minWidth?: number;
   maxHeight?: number;
 }>`
   flex: ${(props) => (props.flex ? "1" : "0")};
   width: ${(props) => (props.short ? "49%" : "auto")};
   max-width: ${(props) => (props.short ? "350px" : "100%")};
+  min-width: ${({ minWidth }) => (minWidth ? `${minWidth}px` : "initial")};
   min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
   max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "initial")};
 `;
@@ -97,30 +106,17 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.HTMLAttributes<HTMLInputElement> & {
+export type Props = React.InputHTMLAttributes<
+  HTMLInputElement | HTMLTextAreaElement
+> & {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
-  value?: string;
-  label?: string;
-  className?: string;
   labelHidden?: boolean;
+  label?: string;
   flex?: boolean;
   short?: boolean;
   margin?: string | number;
   icon?: React.ReactNode;
-  name?: string;
-  minLength?: number;
-  maxLength?: number;
-  autoFocus?: boolean;
-  autoComplete?: boolean | string;
-  readOnly?: boolean;
-  required?: boolean;
-  disabled?: boolean;
-  placeholder?: string;
-  onChange?: (
-    ev: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>
-  ) => unknown;
-  innerRef?: React.RefObject<HTMLInputElement | HTMLTextAreaElement>;
-  onKeyDown?: (ev: React.KeyboardEvent<HTMLInputElement>) => unknown;
+  innerRef?: React.Ref<any>;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
 };
@@ -163,8 +159,6 @@ class Input extends React.Component<Props> {
       ...rest
     } = this.props;
 
-    const InputComponent: React.ComponentType =
-      type === "textarea" ? RealTextarea : RealInput;
     const wrappedLabel = <LabelText>{label}</LabelText>;
 
     return (
@@ -178,15 +172,24 @@ class Input extends React.Component<Props> {
             ))}
           <Outline focused={this.focused} margin={margin}>
             {icon && <IconWrapper>{icon}</IconWrapper>}
-            <InputComponent
-              // @ts-expect-error no idea why this is not working
-              ref={this.input}
-              onBlur={this.handleBlur}
-              onFocus={this.handleFocus}
-              hasIcon={!!icon}
-              type={type === "textarea" ? undefined : type}
-              {...rest}
-            />
+            {type === "textarea" ? (
+              <RealTextarea
+                ref={this.props.innerRef}
+                onBlur={this.handleBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                {...rest}
+              />
+            ) : (
+              <RealInput
+                ref={this.props.innerRef}
+                onBlur={this.handleBlur}
+                onFocus={this.handleFocus}
+                hasIcon={!!icon}
+                type={type}
+                {...rest}
+              />
+            )}
           </Outline>
         </label>
       </Wrapper>
@@ -194,4 +197,10 @@ class Input extends React.Component<Props> {
   }
 }
 
+export const ReactHookWrappedInput = React.forwardRef(
+  (props: Omit<Props, "innerRef">, ref: React.Ref<any>) => {
+    return <Input {...{ ...props, innerRef: ref }} />;
+  }
+);
+
 export default Input;

app/components/InputSearchPage.tsx

@@ -35,14 +35,11 @@ function InputSearchPage({
   const history = useHistory();
   const { t } = useTranslation();
   const [isFocused, setFocused, setUnfocused] = useBoolean(false);
-  const focus = React.useCallback(() => {
-    inputRef.current?.focus();
-  }, []);
 
   useKeyDown("f", (ev: KeyboardEvent) => {
-    if (isModKey(ev)) {
+    if (isModKey(ev) && document.activeElement !== inputRef.current) {
       ev.preventDefault();
-      focus();
+      inputRef.current?.focus();
     }
   });
 
@@ -57,6 +54,10 @@ function InputSearchPage({
           })
         );
       }
+      if (ev.key === "Escape") {
+        ev.preventDefault();
+        inputRef.current?.blur();
+      }
 
       if (onKeyDown) {
         onKeyDown(ev);

app/components/InputSelect.tsx

@@ -13,7 +13,13 @@ import styled, { css } from "styled-components";
 import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
-import { Position, Background, Backdrop, Placement } from "./ContextMenu";
+import { fadeAndScaleIn } from "~/styles/animations";
+import {
+  Position,
+  Background as ContextMenuBackground,
+  Backdrop,
+  Placement,
+} from "./ContextMenu";
 import { MenuAnchorCSS } from "./ContextMenu/MenuItem";
 import { LabelText } from "./Input";
 
@@ -170,6 +176,7 @@ const InputSelect = (props: Props) => {
                   ref={contentRef}
                   topAnchor={topAnchor}
                   rightAnchor={rightAnchor}
+                  hiddenScrollbars
                   style={
                     maxHeight && topAnchor
                       ? {
@@ -216,6 +223,10 @@ const InputSelect = (props: Props) => {
   );
 };
 
+const Background = styled(ContextMenuBackground)`
+  animation: ${fadeAndScaleIn} 200ms ease;
+`;
+
 const Placeholder = styled.span`
   color: ${(props) => props.theme.placeholder};
 `;
@@ -277,7 +288,7 @@ const Positioner = styled(Position)`
         color: ${(props) => props.theme.white};
         background: ${(props) => props.theme.primary};
         box-shadow: none;
-        cursor: pointer;
+        cursor: var(--pointer);
 
         svg {
           fill: ${(props) => props.theme.white};

app/components/InputSelectPermission.tsx

@@ -1,6 +1,7 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { $Diff } from "utility-types";
+import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props, Option } from "./InputSelect";
 
 export default function InputSelectPermission(
@@ -31,11 +32,11 @@ export default function InputSelectPermission(
       options={[
         {
           label: t("View and edit"),
-          value: "read_write",
+          value: CollectionPermission.ReadWrite,
         },
         {
           label: t("View only"),
-          value: "read",
+          value: CollectionPermission.Read,
         },
         {
           label: t("No access"),

app/components/Layout.tsx

@@ -15,10 +15,15 @@ import { isModKey } from "~/utils/keyboard";
 type Props = {
   title?: string;
   sidebar?: React.ReactNode;
-  rightRail?: React.ReactNode;
+  sidebarRight?: React.ReactNode;
 };
 
-const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
+const Layout: React.FC<Props> = ({
+  title,
+  children,
+  sidebar,
+  sidebarRight,
+}) => {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.isEditing || ui.sidebarCollapsed;
 
@@ -60,7 +65,7 @@ const Layout: React.FC<Props> = ({ title, children, sidebar, rightRail }) => {
           {children}
         </Content>
 
-        {rightRail}
+        {sidebarRight}
       </Container>
     </Container>
   );

app/components/LazyPolyfills.tsx

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { loadPolyfills } from "~/utils/polyfills";
+
+/**
+ * Asyncronously load required polyfills. Should wrap the React tree.
+ */
+export const LazyPolyfill: React.FC = ({ children }) => {
+  const [isLoaded, setIsLoaded] = React.useState(false);
+
+  React.useEffect(() => {
+    loadPolyfills().then(() => {
+      setIsLoaded(true);
+    });
+  }, []);
+
+  if (!isLoaded) {
+    return null;
+  }
+
+  return <>{children}</>;
+};
+
+export default LazyPolyfill;

app/components/List/Error.tsx

@@ -0,0 +1,53 @@
+import { DisconnectedIcon, WarningIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Empty from "~/components/Empty";
+import useEventListener from "~/hooks/useEventListener";
+import { OfflineError } from "~/utils/errors";
+import ButtonLink from "../ButtonLink";
+import Flex from "../Flex";
+
+type Props = {
+  error: Error;
+  retry: () => void;
+};
+
+export default function LoadingError({ error, retry, ...rest }: Props) {
+  const { t } = useTranslation();
+  useEventListener("online", retry);
+
+  const message =
+    error instanceof OfflineError ? (
+      <>
+        <DisconnectedIcon color="currentColor" /> {t("You’re offline.")}
+      </>
+    ) : (
+      <>
+        <WarningIcon color="currentColor" /> {t("Sorry, an error occurred.")}
+      </>
+    );
+
+  return (
+    <Content {...rest}>
+      <Flex align="center" gap={4}>
+        {message}{" "}
+        <ButtonLink onClick={() => retry()}>{t("Click to retry")}…</ButtonLink>
+      </Flex>
+    </Content>
+  );
+}
+
+const Content = styled(Empty)`
+  padding: 8px 0;
+  white-space: nowrap;
+
+  ${ButtonLink} {
+    color: ${(props) => props.theme.textTertiary};
+
+    &:hover {
+      color: ${(props) => props.theme.textSecondary};
+      text-decoration: underline;
+    }
+  }
+`;

app/components/List/Item.tsx

@@ -1,11 +1,12 @@
+import { LocationDescriptor } from "history";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
 
-export type Props = {
+export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   image?: React.ReactNode;
-  to?: string;
+  to?: LocationDescriptor;
   exact?: boolean;
   title: React.ReactNode;
   subtitle?: React.ReactNode;
@@ -69,7 +70,11 @@ const ListItem = (
   );
 };
 
-const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>`
+const Wrapper = styled.a<{
+  $small?: boolean;
+  $border?: boolean;
+  to?: LocationDescriptor;
+}>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
   margin: ${(props) =>
@@ -82,7 +87,7 @@ const Wrapper = styled.a<{ $small?: boolean; $border?: boolean; to?: string }>`
     border-bottom: 0;
   }
 
-  cursor: ${({ to }) => (to ? "pointer" : "default")};
+  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
 `;
 
 const Image = styled(Flex)`

app/components/List/Placeholder.tsx

@@ -14,7 +14,7 @@ type Props = {
   body?: PlaceholderTextProps;
 };
 
-const ListPlaceHolder = ({ count, className, header, body }: Props) => {
+const Placeholder = ({ count, className, header, body }: Props) => {
   return (
     <Fade>
       {times(count || 2, (index) => (
@@ -31,4 +31,4 @@ const Item = styled(Flex)`
   padding: 10px 0;
 `;
 
-export default ListPlaceHolder;
+export default Placeholder;

app/components/LocaleTime.tsx

@@ -2,7 +2,7 @@ import { format as formatDate, formatDistanceToNow } from "date-fns";
 import * as React from "react";
 import Tooltip from "~/components/Tooltip";
 import useUserLocale from "~/hooks/useUserLocale";
-import { dateLocale } from "~/utils/i18n";
+import { dateLocale, locales } from "~/utils/i18n";
 
 let callbacks: (() => void)[] = [];
 
@@ -26,7 +26,7 @@ type Props = {
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
-  format?: string;
+  format?: Partial<Record<keyof typeof locales, string>>;
 };
 
 const LocaleTime: React.FC<Props> = ({
@@ -38,7 +38,13 @@ const LocaleTime: React.FC<Props> = ({
   relative,
   tooltipDelay,
 }) => {
-  const userLocale = useUserLocale();
+  const userLocale: string = useUserLocale() || "";
+  const dateFormatLong = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong = dateFormatLong[userLocale] ?? "MMMM do, yyyy h:mm a";
+  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
   const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
   const callback = React.useRef<() => void>();
 
@@ -66,17 +72,13 @@ const LocaleTime: React.FC<Props> = ({
       .replace("minute", "min");
   }
 
-  const tooltipContent = formatDate(
-    Date.parse(dateTime),
-    "MMMM do, yyyy h:mm a",
-    {
-      locale,
-    }
-  );
+  const tooltipContent = formatDate(Date.parse(dateTime), formatLocaleLong, {
+    locale,
+  });
   const content =
     relative !== false
       ? relativeContent
-      : formatDate(Date.parse(dateTime), format || "MMMM do, yyyy h:mm a", {
+      : formatDate(Date.parse(dateTime), formatLocale, {
           locale,
         });
 

app/components/Modal.tsx

@@ -67,6 +67,7 @@ const Modal: React.FC<Props> = ({
         <Backdrop $isCentered={isCentered} {...props}>
           <Dialog
             {...dialog}
+            aria-label={typeof title === "string" ? title : undefined}
             preventBodyScroll
             hideOnEsc
             hideOnClickOutside={!!isCentered}
@@ -75,7 +76,12 @@ const Modal: React.FC<Props> = ({
             {(props) =>
               isCentered && !isMobile ? (
                 <Small {...props}>
-                  <Centered onClick={(ev) => ev.stopPropagation()} column>
+                  <Centered
+                    onClick={(ev) => ev.stopPropagation()}
+                    column
+                    reverse
+                  >
+                    <SmallContent shadow>{children}</SmallContent>
                     <Header>
                       {title && (
                         <Text as="span" size="large">
@@ -88,7 +94,6 @@ const Modal: React.FC<Props> = ({
                         </NudeButton>
                       </Text>
                     </Header>
-                    <SmallContent shadow>{children}</SmallContent>
                   </Centered>
                 </Small>
               ) : (

app/components/NavLink.tsx

@@ -1,11 +1,19 @@
+import { LocationDescriptor } from "history";
 import * as React from "react";
-import { NavLink, Route } from "react-router-dom";
+import { match, NavLink, Route } from "react-router-dom";
 
 type Props = React.ComponentProps<typeof NavLink> & {
-  children?: (match: any) => React.ReactNode;
+  children?: (
+    match:
+      | match<{
+          [x: string]: string | undefined;
+        }>
+      | boolean
+      | null
+  ) => React.ReactNode;
   exact?: boolean;
   activeStyle?: React.CSSProperties;
-  to: string;
+  to: LocationDescriptor;
 };
 
 function NavLinkWithChildrenFunc(
@@ -13,7 +21,7 @@ function NavLinkWithChildrenFunc(
   ref?: React.Ref<HTMLAnchorElement>
 ) {
   return (
-    <Route path={to} exact={exact}>
+    <Route path={typeof to === "string" ? to : to?.pathname} exact={exact}>
       {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
           {children

app/components/NudeButton.tsx

@@ -4,26 +4,32 @@ import ActionButton, {
 } from "~/components/ActionButton";
 
 type Props = ActionButtonProps & {
-  width?: number;
-  height?: number;
+  width?: number | string;
+  height?: number | string;
   size?: number;
   type?: "button" | "submit" | "reset";
 };
 
-const StyledNudeButton = styled(ActionButton).attrs((props: Props) => ({
+const NudeButton = styled(ActionButton).attrs((props: Props) => ({
   type: "type" in props ? props.type : "button",
 }))<Props>`
-  width: ${(props) => props.width || props.size || 24}px;
-  height: ${(props) => props.height || props.size || 24}px;
+  width: ${(props) =>
+    typeof props.width === "string"
+      ? props.width
+      : `${props.width || props.size || 24}px`};
+  height: ${(props) =>
+    typeof props.height === "string"
+      ? props.height
+      : `${props.height || props.size || 24}px`};
   background: none;
   border-radius: 4px;
   display: inline-block;
   line-height: 0;
   border: 0;
   padding: 0;
-  cursor: pointer;
+  cursor: var(--pointer);
   user-select: none;
   color: inherit;
 `;
 
-export default StyledNudeButton;
+export default NudeButton;

app/components/PaginatedDocumentList.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import Document from "~/models/Document";
 import DocumentListItem from "~/components/DocumentListItem";
+import Error from "~/components/List/Error";
 import PaginatedList from "~/components/PaginatedList";
 
 type Props = {
@@ -40,6 +41,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       heading={heading}
       fetch={fetch}
       options={options}
+      renderError={(props) => <Error {...props} />}
       renderItem={(item: Document, _index, compositeProps) => (
         <DocumentListItem
           key={item.id}

app/components/PaginatedEventList.tsx

@@ -13,6 +13,7 @@ type Props = {
   heading?: React.ReactNode;
   empty?: React.ReactNode;
 };
+
 const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
   empty,
   heading,
@@ -23,32 +24,34 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
   ...rest
 }: Props) {
   return (
-    <PaginatedList
+    <StyledPaginatedList
       items={events}
       empty={empty}
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event, index, compositeProps) => {
-        return (
-          <EventListItem
-            key={item.id}
-            event={item}
-            document={document}
-            latest={index === 0}
-            {...compositeProps}
-          />
-        );
-      }}
+      renderItem={(item: Event, index, compositeProps) => (
+        <EventListItem
+          key={item.id}
+          event={item}
+          document={document}
+          latest={index === 0}
+          {...compositeProps}
+        />
+      )}
       renderHeading={(name) => <Heading>{name}</Heading>}
       {...rest}
     />
   );
 });
 
+const StyledPaginatedList = styled(PaginatedList)`
+  padding: 0 8px;
+`;
+
 const Heading = styled("h3")`
   font-size: 14px;
-  padding: 0 12px;
+  padding: 0 4px;
 `;
 
 export default PaginatedEventList;

app/components/PaginatedList.tsx

@@ -29,17 +29,25 @@ type Props<T> = WithTranslation &
     empty?: React.ReactNode;
     loading?: React.ReactElement;
     items?: T[];
+    className?: string;
     renderItem: (
       item: T,
       index: number,
       compositeProps: CompositeStateReturn
     ) => React.ReactNode;
+    renderError?: (options: {
+      error: Error;
+      retry: () => void;
+    }) => React.ReactNode;
     renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
     onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
   };
 
 @observer
 class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
+  @observable
+  error?: Error;
+
   @observable
   isFetchingMore = false;
 
@@ -80,6 +88,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     this.isFetchingMore = false;
   };
 
+  @action
   fetchResults = async () => {
     if (!this.props.fetch) {
       return;
@@ -87,25 +96,30 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     this.isFetching = true;
     const counter = ++this.fetchCounter;
     const limit = DEFAULT_PAGINATION_LIMIT;
+    this.error = undefined;
 
-    const results = await this.props.fetch({
-      limit,
-      offset: this.offset,
-      ...this.props.options,
-    });
+    try {
+      const results = await this.props.fetch({
+        limit,
+        offset: this.offset,
+        ...this.props.options,
+      });
 
-    if (results && (results.length === 0 || results.length < limit)) {
-      this.allowLoadMore = false;
-    } else {
-      this.offset += limit;
-    }
+      if (results && (results.length === 0 || results.length < limit)) {
+        this.allowLoadMore = false;
+      } else {
+        this.offset += limit;
+      }
 
-    this.renderCount += limit;
-
-    // only the most recent fetch should end the loading state
-    if (counter >= this.fetchCounter) {
-      this.isFetching = false;
-      this.isFetchingMore = false;
+      this.renderCount += limit;
+    } catch (err) {
+      this.error = err;
+    } finally {
+      // only the most recent fetch should end the loading state
+      if (counter >= this.fetchCounter) {
+        this.isFetching = false;
+        this.isFetchingMore = false;
+      }
     }
   };
 
@@ -119,7 +133,7 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
     // of lazy rendering then show another page.
     const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
-    if (leftToRender > 1) {
+    if (leftToRender > 0) {
       this.renderCount += DEFAULT_PAGINATION_LIMIT;
     }
 
@@ -138,9 +152,9 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
       auth,
       empty = null,
       renderHeading,
+      renderError,
       onEscape,
     } = this.props;
-    let previousHeading = "";
 
     const showLoading =
       this.isFetching &&
@@ -151,13 +165,19 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
       return (
         this.props.loading || (
           <DelayedMount>
-            <PlaceholderList count={5} />
+            <div className={this.props.className}>
+              <PlaceholderList count={5} />
+            </div>
           </DelayedMount>
         )
       );
     }
 
     if (items?.length === 0) {
+      if (this.error && renderError) {
+        return renderError({ error: this.error, retry: this.fetchResults });
+      }
+
       return empty;
     }
 
@@ -167,9 +187,11 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
         <ArrowKeyNavigation
           aria-label={this.props["aria-label"]}
           onEscape={onEscape}
+          className={this.props.className}
         >
-          {(composite: CompositeStateReturn) =>
-            items.slice(0, this.renderCount).map((item, index) => {
+          {(composite: CompositeStateReturn) => {
+            let previousHeading = "";
+            return items.slice(0, this.renderCount).map((item, index) => {
               const children = this.props.renderItem(item, index, composite);
 
               // If there is no renderHeading method passed then no date
@@ -202,8 +224,8 @@ class PaginatedList<T extends PaginatedItem> extends React.Component<Props<T>> {
               }
 
               return children;
-            })
-          }
+            });
+          }}
         </ArrowKeyNavigation>
         {this.allowLoadMore && (
           <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />

app/components/PathToDocument.tsx

@@ -14,7 +14,7 @@ type Props = {
   collection: Collection | null | undefined;
   onSuccess?: () => void;
   style?: React.CSSProperties;
-  ref?: (arg0: React.ElementRef<"div"> | null | undefined) => void;
+  ref?: (element: React.ElementRef<"div"> | null | undefined) => void;
 };
 
 @observer

app/components/PinnedDocuments.tsx

@@ -42,7 +42,12 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
   }, [pins]);
 
   const sensors = useSensors(
-    useSensor(PointerSensor),
+    useSensor(PointerSensor, {
+      activationConstraint: {
+        delay: 100,
+        tolerance: 5,
+      },
+    }),
     useSensor(KeyboardSensor, {
       coordinateGetter: sortableKeyboardCoordinates,
     })
@@ -54,8 +59,8 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
 
       if (over && active.id !== over.id) {
         setItems((items) => {
-          const activePos = items.indexOf(active.id);
-          const overPos = items.indexOf(over.id);
+          const activePos = items.indexOf(active.id as string);
+          const overPos = items.indexOf(over.id as string);
 
           const overIndex = pins[overPos]?.index || null;
           const nextIndex = pins[overPos + 1]?.index || null;
@@ -121,7 +126,7 @@ function PinnedDocuments({ limit, pins, canUpdate, ...rest }: Props) {
 const List = styled.div`
   display: grid;
   column-gap: 8px;
-  row-gap: 8px;
+  row-gap: 12px;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   padding: 0;
   list-style: none;
@@ -131,11 +136,11 @@ const List = styled.div`
     display: none;
   }
 
-  ${breakpoint("tablet")`
+  ${breakpoint("mobileLarge")`
     grid-template-columns: repeat(3, minmax(0, 1fr));
   `};
 
-  ${breakpoint("desktop")`
+  ${breakpoint("tablet")`
     grid-template-columns: repeat(4, minmax(0, 1fr));
   `};
 `;

app/components/Popover.tsx

@@ -46,7 +46,7 @@ const Contents = styled.div<{ $shrink?: boolean; $width?: number }>`
   border-radius: 6px;
   padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
   max-height: 50vh;
-  overflow-y: scroll;
+  overflow-y: auto;
   box-shadow: ${(props) => props.theme.menuShadow};
   width: ${(props) => props.$width}px;
 

app/components/Scene.tsx

@@ -8,7 +8,7 @@ type Props = {
   icon?: React.ReactNode;
   title?: React.ReactNode;
   textTitle?: string;
-  breadcrumb?: React.ReactNode;
+  left?: React.ReactNode;
   actions?: React.ReactNode;
   centered?: boolean;
 };
@@ -18,7 +18,7 @@ const Scene: React.FC<Props> = ({
   icon,
   textTitle,
   actions,
-  breadcrumb,
+  left,
   children,
   centered,
 }) => {
@@ -37,7 +37,7 @@ const Scene: React.FC<Props> = ({
           )
         }
         actions={actions}
-        breadcrumb={breadcrumb}
+        left={left}
       />
       {centered !== false ? (
         <CenteredContent withStickyHeader>{children}</CenteredContent>

app/components/ScrollToTop.ts

@@ -8,11 +8,14 @@ type Props = {
 };
 
 export default function ScrollToTop({ children }: Props) {
-  const location = useLocation();
+  const location = useLocation<{ retainScrollPosition?: boolean }>();
   const previousLocationPathname = usePrevious(location.pathname);
 
   React.useEffect(() => {
-    if (location.pathname === previousLocationPathname) {
+    if (
+      location.pathname === previousLocationPathname ||
+      location.state?.retainScrollPosition
+    ) {
       return;
     }
     // exception for when entering or exiting document edit, scroll position should not reset
@@ -23,7 +26,11 @@ export default function ScrollToTop({ children }: Props) {
       return;
     }
     window.scrollTo(0, 0);
-  }, [location.pathname, previousLocationPathname]);
+  }, [
+    location.pathname,
+    previousLocationPathname,
+    location.state?.retainScrollPosition,
+  ]);
 
   return children;
 }

app/components/Scrollable.tsx

@@ -92,7 +92,7 @@ const Wrapper = styled.div<{
 
     return "none";
   }};
-  transition: all 100ms ease-in-out;
+  transition: box-shadow 100ms ease-in-out;
 
   ${(props) =>
     props.$hiddenScrollbars &&

app/components/SearchActions.ts

@@ -10,7 +10,9 @@ export default function SearchActions() {
   const { searches } = useStores();
 
   React.useEffect(() => {
-    searches.fetchPage({});
+    if (!searches.isLoaded) {
+      searches.fetchPage({});
+    }
   }, [searches]);
 
   const { searchQuery } = useKBar((state) => ({

app/components/SearchListItem.tsx

@@ -7,6 +7,7 @@ import breakpoint from "styled-components-breakpoint";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
 import { hover } from "~/styles";
+import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
@@ -38,7 +39,9 @@ function DocumentListItem(
       ref={ref}
       dir={document.dir}
       to={{
-        pathname: shareId ? `/share/${shareId}${document.url}` : document.url,
+        pathname: shareId
+          ? sharedDocumentPath(shareId, document.url)
+          : document.url,
         state: {
           title: document.titleWithDefault,
         },
@@ -80,6 +83,7 @@ const DocumentLink = styled(Link)<{
   align-items: center;
   padding: 6px 12px;
   max-height: 50vh;
+  cursor: var(--pointer);
 
   &:not(:last-child) {
     margin-bottom: 4px;

app/components/Sidebar/App.tsx

@@ -10,6 +10,7 @@ import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
 import { inviteUser } from "~/actions/definitions/users";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
@@ -34,12 +35,15 @@ function AppSidebar() {
   const { t } = useTranslation();
   const { documents } = useStores();
   const team = useCurrentTeam();
-  const can = usePolicy(team.id);
+  const user = useCurrentUser();
+  const can = usePolicy(team);
 
   React.useEffect(() => {
-    documents.fetchDrafts();
-    documents.fetchTemplates();
-  }, [documents]);
+    if (!user.isViewer) {
+      documents.fetchDrafts();
+      documents.fetchTemplates();
+    }
+  }, [documents, user.isViewer]);
 
   const [dndArea, setDndArea] = React.useState();
   const handleSidebarRef = React.useCallback((node) => setDndArea(node), []);

app/components/Sidebar/Settings.tsx

@@ -8,7 +8,7 @@ import styled from "styled-components";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useAuthorizedSettingsConfig from "~/hooks/useAuthorizedSettingsConfig";
-import isHosted from "~/utils/isHosted";
+import isCloudHosted from "~/utils/isCloudHosted";
 import Sidebar from "./Sidebar";
 import Header from "./components/Header";
 import Section from "./components/Section";
@@ -51,7 +51,7 @@ function SettingsSidebar() {
               </Header>
             </Section>
           ))}
-          {!isHosted && (
+          {!isCloudHosted && (
             <Section>
               <Header title={t("Installation")} />
               <Version />

app/components/Sidebar/Sidebar.tsx

@@ -65,8 +65,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(
     const handleStopDrag = React.useCallback(() => {
       setResizing(false);
 
-      if (document.activeElement) {
-        // @ts-expect-error ts-migrate(2339) FIXME: Property 'blur' does not exist on type 'Element'.
+      if (document.activeElement instanceof HTMLElement) {
         document.activeElement.blur();
       }
 

app/components/Sidebar/components/CollectionLink.tsx

@@ -44,7 +44,7 @@ const CollectionLink: React.FC<Props> = ({
   const { dialogs, documents, collections } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const [isEditing, setIsEditing] = React.useState(false);
-  const canUpdate = usePolicy(collection.id).update;
+  const canUpdate = usePolicy(collection).update;
   const { t } = useTranslation();
   const history = useHistory();
   const inStarredSection = useStarredContext();

app/components/Sidebar/components/CollectionLinkChildren.tsx

@@ -25,7 +25,7 @@ function CollectionLinkChildren({
   expanded,
   prefetchDocument,
 }: Props) {
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const { showToast } = useToasts();
   const manualSort = collection.sort.field === "index";
   const { documents } = useStores();
@@ -37,7 +37,7 @@ function CollectionLinkChildren({
   const [{ isOverReorder, isDraggingAnyDocument }, dropToReorder] = useDrop({
     accept: "document",
     drop: (item: DragObject) => {
-      if (!manualSort) {
+      if (!manualSort && item.collectionId === collection?.id) {
         showToast(
           t(
             "You can't reorder documents in an alphabetically sorted collection"

app/components/Sidebar/components/Collections.tsx

@@ -3,12 +3,13 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
+import styled from "styled-components";
 import Collection from "~/models/Collection";
-import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
+import Error from "~/components/List/Error";
+import PaginatedList from "~/components/PaginatedList";
 import { createCollection } from "~/actions/definitions/collections";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import DraggableCollectionLink from "./DraggableCollectionLink";
 import DropCursor from "./DropCursor";
 import Header from "./Header";
@@ -18,39 +19,10 @@ import SidebarAction from "./SidebarAction";
 import { DragObject } from "./SidebarLink";
 
 function Collections() {
-  const [isFetching, setFetching] = React.useState(false);
-  const [fetchError, setFetchError] = React.useState();
   const { documents, collections } = useStores();
-  const { showToast } = useToasts();
-  const isPreloaded = !!collections.orderedData.length;
   const { t } = useTranslation();
   const orderedCollections = collections.orderedData;
 
-  React.useEffect(() => {
-    async function load() {
-      if (!collections.isLoaded && !isFetching && !fetchError) {
-        try {
-          setFetching(true);
-          await collections.fetchPage({
-            limit: 100,
-          });
-        } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
-          );
-          setFetchError(error);
-        } finally {
-          setFetching(false);
-        }
-      }
-    }
-
-    load();
-  }, [collections, isFetching, showToast, fetchError, t]);
-
   const [
     { isCollectionDropping, isDraggingAnyCollection },
     dropToReorderCollection,
@@ -71,45 +43,48 @@ function Collections() {
     }),
   });
 
-  const content = (
-    <>
-      {isDraggingAnyCollection && (
-        <DropCursor
-          isActiveDrop={isCollectionDropping}
-          innerRef={dropToReorderCollection}
-          position="top"
-        />
-      )}
-      {orderedCollections.map((collection: Collection, index: number) => (
-        <DraggableCollectionLink
-          key={collection.id}
-          collection={collection}
-          activeDocument={documents.active}
-          prefetchDocument={documents.prefetchDocument}
-          belowCollection={orderedCollections[index + 1]}
-        />
-      ))}
-      <SidebarAction action={createCollection} depth={0} />
-    </>
-  );
-
-  if (!collections.isLoaded || fetchError) {
-    return (
-      <Flex column>
-        <Header id="collections" title={t("Collections")}>
-          <PlaceholderCollections />
-        </Header>
-      </Flex>
-    );
-  }
+  React.useEffect(() => {
+    collections.fetchPage({ limit: 100 });
+  }, [collections]);
 
   return (
     <Flex column>
       <Header id="collections" title={t("Collections")}>
-        <Relative>{isPreloaded ? content : <Fade>{content}</Fade>}</Relative>
+        <Relative>
+          <PaginatedList
+            aria-label={t("Collections")}
+            items={collections.orderedData}
+            loading={<PlaceholderCollections />}
+            heading={
+              isDraggingAnyCollection ? (
+                <DropCursor
+                  isActiveDrop={isCollectionDropping}
+                  innerRef={dropToReorderCollection}
+                  position="top"
+                />
+              ) : undefined
+            }
+            renderError={(props) => <StyledError {...props} />}
+            renderItem={(item: Collection, index) => (
+              <DraggableCollectionLink
+                key={item.id}
+                collection={item}
+                activeDocument={documents.active}
+                prefetchDocument={documents.prefetchDocument}
+                belowCollection={orderedCollections[index + 1]}
+              />
+            )}
+          />
+          <SidebarAction action={createCollection} depth={0} />
+        </Relative>
       </Header>
     </Flex>
   );
 }
 
+const StyledError = styled(Error)`
+  font-size: 15px;
+  padding: 0 8px;
+`;
+
 export default observer(Collections);

app/components/Sidebar/components/Disclosure.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import NudeButton from "~/components/NudeButton";
 
-type Props = {
+type Props = React.ComponentProps<typeof Button> & {
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
   expanded: boolean;
   root?: boolean;

app/components/Sidebar/components/DocumentLink.tsx

@@ -6,8 +6,8 @@ import { useDrag, useDrop } from "react-dnd";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { MAX_TITLE_LENGTH } from "@shared/constants";
 import { sortNavigationNodes } from "@shared/utils/collections";
+import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
@@ -148,7 +148,7 @@ function InnerDocumentLink(
       collectionId: collection?.id || "",
     }),
     collect: (monitor) => ({
-      isDragging: !!monitor.isDragging(),
+      isDragging: monitor.isDragging(),
     }),
     canDrag: () => {
       return (
@@ -213,7 +213,7 @@ function InnerDocumentLink(
       }
     },
     collect: (monitor) => ({
-      isOverReparent: !!monitor.isOver({
+      isOverReparent: monitor.isOver({
         shallow: true,
       }),
       canDropToReparent: monitor.canDrop(),
@@ -252,25 +252,24 @@ function InnerDocumentLink(
       documents.move(item.id, collection.id, parentId, index + 1);
     },
     collect: (monitor) => ({
-      isOverReorder: !!monitor.isOver(),
-      isDraggingAnyDocument: !!monitor.canDrop(),
+      isOverReorder: monitor.isOver(),
+      isDraggingAnyDocument: monitor.canDrop(),
     }),
   });
 
   const nodeChildren = React.useMemo(() => {
-    if (
-      collection &&
+    const insertDraftDocument =
       activeDocument?.isDraft &&
       activeDocument?.isActive &&
-      activeDocument?.parentDocumentId === node.id
-    ) {
-      return sortNavigationNodes(
-        [activeDocument?.asNavigationNode, ...node.children],
-        collection.sort
-      );
-    }
+      activeDocument?.parentDocumentId === node.id;
 
-    return node.children;
+    return collection && insertDraftDocument
+      ? sortNavigationNodes(
+          [activeDocument?.asNavigationNode, ...node.children],
+          collection.sort,
+          false
+        )
+      : node.children;
   }, [
     activeDocument?.isActive,
     activeDocument?.isDraft,
@@ -292,6 +291,21 @@ function InnerDocumentLink(
   const isExpanded = expanded && !isDragging;
   const hasChildren = nodeChildren.length > 0;
 
+  const handleKeyDown = React.useCallback(
+    (ev: React.KeyboardEvent) => {
+      if (!hasChildren) {
+        return;
+      }
+      if (ev.key === "ArrowRight" && !expanded) {
+        setExpanded(true);
+      }
+      if (ev.key === "ArrowLeft" && expanded) {
+        setExpanded(false);
+      }
+    },
+    [hasChildren, expanded]
+  );
+
   return (
     <>
       <Relative onDragLeave={resetHoverExpanding}>
@@ -300,6 +314,7 @@ function InnerDocumentLink(
           ref={drag}
           $isDragging={isDragging}
           $isMoving={isMoving}
+          onKeyDown={handleKeyDown}
         >
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
@@ -320,7 +335,7 @@ function InnerDocumentLink(
                     onSubmit={handleTitleChange}
                     onEditing={handleTitleEditing}
                     canUpdate={canUpdate}
-                    maxLength={MAX_TITLE_LENGTH}
+                    maxLength={DocumentValidation.maxTitleLength}
                   />
                 }
                 isActive={(match, location: Location<{ starred?: boolean }>) =>

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -39,7 +39,7 @@ function DraggableCollectionLink({
   const [expanded, setExpanded] = React.useState(
     collection.id === ui.activeCollectionId && !locationStateStarred
   );
-  const can = usePolicy(collection.id);
+  const can = usePolicy(collection);
   const belowCollectionIndex = belowCollection ? belowCollection.index : null;
 
   // Drop to reorder collection

app/components/Sidebar/components/Header.tsx

@@ -14,7 +14,7 @@ type Props = {
  */
 export const Header: React.FC<Props> = ({ id, title, children }) => {
   const [firstRender, setFirstRender] = React.useState(true);
-  const [expanded, setExpanded] = usePersistedState(
+  const [expanded, setExpanded] = usePersistedState<boolean>(
     `sidebar-header-${id}`,
     true
   );
@@ -80,7 +80,7 @@ const Button = styled.button`
   &:not(:disabled):hover,
   &:not(:disabled):active {
     color: ${(props) => props.theme.textSecondary};
-    cursor: pointer;
+    cursor: var(--pointer);
   }
 `;
 

app/components/Sidebar/components/NavLink.tsx

@@ -2,7 +2,7 @@
 // This file is pulled almost 100% from react-router with the addition of one
 // thing, automatic scroll to the active link. It's worth the copy paste because
 // it avoids recalculating the link match again.
-import { Location, createLocation } from "history";
+import { Location, createLocation, LocationDescriptor } from "history";
 import * as React from "react";
 import {
   __RouterContext as RouterContext,
@@ -13,12 +13,12 @@ import { Link } from "react-router-dom";
 import scrollIntoView from "smooth-scroll-into-view-if-needed";
 
 const resolveToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor | ((location: Location) => LocationDescriptor),
   currentLocation: Location
 ) => (typeof to === "function" ? to(currentLocation) : to);
 
 const normalizeToLocation = (
-  to: string | Record<string, any>,
+  to: LocationDescriptor,
   currentLocation: Location
 ) => {
   return typeof to === "string"
@@ -30,17 +30,15 @@ const joinClassnames = (...classnames: (string | undefined)[]) => {
   return classnames.filter((i) => i).join(" ");
 };
 
-export type Props = React.HTMLAttributes<HTMLAnchorElement> & {
+export type Props = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
   activeClassName?: string;
   activeStyle?: React.CSSProperties;
-  className?: string;
   scrollIntoViewIfNeeded?: boolean;
   exact?: boolean;
   isActive?: (match: match | null, location: Location) => boolean;
   location?: Location;
   strict?: boolean;
-  style?: React.CSSProperties;
-  to: string | Record<string, any>;
+  to: LocationDescriptor;
 };
 
 /**