0.75.0

Bumps [@faker-js/faker](https://github.com/faker-js/faker) from 8.0.2 to 8.4.1.
- [Release notes](https://github.com/faker-js/faker/releases)
- [Changelog](https://github.com/faker-js/faker/blob/next/CHANGELOG.md)
- [Commits](https://github.com/faker-js/faker/compare/v8.0.2...v8.4.1)

---
updated-dependencies:
- dependency-name: "@faker-js/faker"
  dependency-type: direct:development
  update-type: version-update:semver-minor
...

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

.babelrc

@@ -1,29 +1,28 @@
 {
   "presets": [
     "@babel/preset-react",
-    "@babel/preset-typescript",
-    [
-      "@babel/preset-env",
-      {
-        "corejs": {
-          "version": "3",
-          "proposals": true
-        },
-        "useBuiltIns": "usage"
-      }
-    ]
+    "@babel/preset-env",
+    "@babel/preset-typescript"
   ],
   "plugins": [
-    "styled-components",
+    "babel-plugin-transform-typescript-metadata",
     [
       "@babel/plugin-proposal-decorators",
       {
         "legacy": true
       }
     ],
-    "@babel/plugin-transform-destructuring",
-    "@babel/plugin-transform-regenerator",
-    "transform-class-properties"
+    "@babel/plugin-proposal-class-properties",
+    [
+      "transform-inline-environment-variables",
+      {
+        "include": [
+          "SOURCE_COMMIT",
+          "SOURCE_VERSION"
+        ]
+      }
+    ],
+    "tsconfig-paths-module-resolver"
   ],
   "env": {
     "production": {
@@ -36,13 +35,29 @@
         ]
       ],
       "ignore": [
+        "**/__mocks__",
         "**/*.test.ts"
       ]
     },
     "development": {
       "ignore": [
+        "**/__mocks__",
         "**/*.test.ts"
       ]
+    },
+    "test": {
+      "presets": [
+        [
+          "@babel/preset-env",
+          {
+            "corejs": {
+              "version": "3",
+              "proposals": true
+            },
+            "useBuiltIns": "usage"
+          }
+        ]
+      ]
     }
   }
 }

.circleci/config.yml

@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
   working_directory: ~/outline
   docker:
-    - image: cimg/node:18.12
+    - image: cimg/node:20.10
     - image: cimg/redis:5.0
     - image: cimg/postgres:14.2
       environment:
@@ -36,12 +36,12 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: install-deps
           command: yarn install --frozen-lockfile
       - save_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
           paths:
             - ./node_modules
   lint:
@@ -49,7 +49,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: lint
           command: yarn lint
@@ -58,7 +58,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: typescript
           command: yarn tsc
@@ -67,7 +67,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: test
           command: yarn test:app
@@ -76,22 +76,25 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: test
           command: yarn test:shared
   test-server:
     <<: *defaults
+    parallelism: 3
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: migrate
           command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
       - run:
           name: test
-          command: yarn test:server --forceExit
+          command: |
+            TESTFILES=$(circleci tests glob "server/**/*.test.ts" | circleci tests split)
+            yarn test --maxWorkers=2 $TESTFILES
   bundle-size:
     <<: *defaults
     environment:
@@ -99,7 +102,7 @@ jobs:
     steps:
       - checkout
       - restore_cache:
-          key: dependency-cache-{{ checksum "package.json" }}
+          key: dependency-cache-v1-{{ checksum "package.json" }}
       - run:
           name: build-vite
           command: yarn vite:build
@@ -142,7 +145,12 @@ jobs:
           command: docker push $BASE_IMAGE_NAME:latest
       - run:
           name: Build and push Docker image
-          command: docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+          command: |
+            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
+              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            else
+              docker buildx build -t $IMAGE_NAME:latest -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
+            fi
 
 workflows:
   version: 2
@@ -166,9 +174,8 @@ workflows:
             - build
       - bundle-size:
           requires:
-            - test-app
-            - test-shared
-            - test-server
+            - build
+            - types
 
   build-docker:
     jobs:

.dockerignore

@@ -13,5 +13,4 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
-fakes3
 node_modules

.env.sample

@@ -30,7 +30,7 @@ REDIS_URL=redis://localhost:6379
 
 # URL should point to the fully qualified, publicly accessible URL. If using a
 # proxy the port in URL and PORT may be different.
-URL=http://localhost:3000
+URL=https://app.outline.dev:3000
 PORT=3000
 
 # See [documentation](docs/SERVICES.md) on running a separate collaboration
@@ -51,10 +51,20 @@ AWS_REGION=xx-xxxx-x
 AWS_S3_ACCELERATE_URL=
 AWS_S3_UPLOAD_BUCKET_URL=http://s3:4569
 AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
-AWS_S3_UPLOAD_MAX_SIZE=26214400
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private
 
+# Specify what storage system to use. Possible value is one of "s3" or "local".
+# For "local", the avatar images and document attachments will be saved on local disk. 
+FILE_STORAGE=local
+
+# If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
+# which all attachments/images go. Make sure that the process has permissions to create
+# this path and also to write files to it.
+FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
+
+# Maximum allowed size for the uploaded attachment.
+FILE_STORAGE_UPLOAD_MAX_SIZE=262144000
 
 # –––––––––––––– AUTHENTICATION ––––––––––––––
 
@@ -183,5 +193,10 @@ RATE_LIMITER_REQUESTS=1000
 RATE_LIMITER_DURATION_WINDOW=60
 
 # Iframely API config
-IFRAMELY_URL=
-IFRAMELY_API_KEY=
+# IFRAMELY_URL=
+# IFRAMELY_API_KEY=
+
+# Enable unsafe-inline in script-src CSP directive
+# Setting it to true allows React dev tools add-on in
+# Firefox to successfully detect the project
+DEVELOPMENT_UNSAFE_INLINE_CSP=false

.eslintrc

@@ -21,7 +21,7 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "import"
+    "eslint-plugin-lodash"
   ],
   "rules": {
     "eqeqeq": 2,
@@ -37,6 +37,7 @@
       "component": true,
       "html": true
     }],
+    "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-floating-promises": "error",
     "@typescript-eslint/await-thenable": "error",
     "@typescript-eslint/no-misused-promises": [
@@ -55,6 +56,7 @@
     ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "lodash/import-scope": ["warn", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,

.gitignore

@@ -7,7 +7,7 @@ node_modules/*
 npm-debug.log
 stats.json
 .DS_Store
-fakes3/*
+data/*
 .idea
 *.pem
 *.key

.jestconfig.json

@@ -1,5 +1,6 @@
 {
   "workerIdleMemoryLimit": "0.75",
+  "maxWorkers": "50%",
   "projects": [
     {
       "displayName": "server",
@@ -8,13 +9,11 @@
         "^@server/(.*)$": "<rootDir>/server/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/env.ts"
-      ],
+      "setupFiles": ["<rootDir>/__mocks__/console.js", "<rootDir>/server/test/env.ts"],
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "testEnvironment": "node",
-      "runner": "@getoutline/jest-runner-serial"
+      "globalSetup": "<rootDir>/server/test/globalSetup.js",
+      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
+      "testEnvironment": "node"
     },
     {
       "displayName": "app",

Dockerfile

@@ -5,7 +5,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:18-alpine AS runner
+FROM node:20-alpine AS runner
 
 RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
 
@@ -24,7 +24,16 @@ COPY --from=base $APP_PATH/package.json ./package.json
 
 RUN addgroup -g 1001 -S nodejs && \
   adduser -S nodejs -u 1001 && \
-  chown -R nodejs:nodejs $APP_PATH/build
+  chown -R nodejs:nodejs $APP_PATH/build && \
+  mkdir -p /var/lib/outline && \
+	chown -R nodejs:nodejs /var/lib/outline
+
+ENV FILE_STORAGE_LOCAL_ROOT_DIR /var/lib/outline/data
+RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
+  chown -R nodejs:nodejs "$FILE_STORAGE_LOCAL_ROOT_DIR" && \
+  chmod 1777 "$FILE_STORAGE_LOCAL_ROOT_DIR"
+
+VOLUME /var/lib/outline/data
 
 USER nodejs
 

Dockerfile.base

@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:18-alpine AS deps
+FROM node:20-alpine AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.64.0
+Licensed Work:        Outline 0.71.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-05-23
+Change Date:          2027-08-18
 
 Change License:       Apache License, Version 2.0
 

Makefile

@@ -1,5 +1,6 @@
 up:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
+	yarn install-local-ssl
 	yarn install --pure-lockfile
 	yarn dev:watch
 
@@ -7,17 +8,17 @@ build:
 	docker-compose build --pull outline
 
 test:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	NODE_ENV=test yarn sequelize db:migrate --env=test
 	yarn test
 
 watch:
-	docker-compose up -d redis postgres s3
+	docker-compose up -d redis postgres
 	yarn sequelize db:drop --env=test
 	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	NODE_ENV=test yarn sequelize db:migrate --env=test
 	yarn test:watch
 
 destroy:

README.md

@@ -96,6 +96,10 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```
 
-## License
+# Activity
+
+![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
+
+# License
 
 Outline is [BSL 1.1 licensed](LICENSE).

app.json

@@ -128,11 +128,6 @@
       "description": "Live web link to your bucket. For CNAMEs, https://yourbucket.example.com",
       "required": false
     },
-    "AWS_S3_UPLOAD_MAX_SIZE": {
-      "description": "Maximum file upload size in bytes",
-      "value": "26214400",
-      "required": false
-    },
     "AWS_S3_FORCE_PATH_STYLE": {
       "description": "Use path-style URL's for connecting to S3 instead of subdomain. This is useful for S3-compatible storage.",
       "value": "true",
@@ -148,6 +143,11 @@
       "description": "S3 canned ACL for document attachments",
       "required": false
     },
+    "FILE_STORAGE_UPLOAD_MAX_SIZE": {
+      "description": "Maximum file upload size in bytes",
+      "value": "26214400",
+      "required": false
+    },
     "SMTP_HOST": {
       "description": "smtp.example.com (optional)",
       "required": false

app/.eslintrc

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

app/actions/definitions/collections.tsx

@@ -10,9 +10,9 @@ import {
 import * as React from "react";
 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 { CollectionEdit } from "~/components/Collection/CollectionEdit";
+import { CollectionNew } from "~/components/Collection/CollectionNew";
 import CollectionDeleteDialog from "~/components/CollectionDeleteDialog";
 import DynamicCollectionIcon from "~/components/Icons/CollectionIcon";
 import { createAction } from "~/actions";
@@ -34,11 +34,11 @@ export const openCollection = createAction({
     return collections.map((collection) => ({
       // Note: using url which includes the slug rather than id here to bust
       // cache if the collection is renamed
-      id: collection.url,
+      id: collection.path,
       name: collection.name,
       icon: <ColorCollectionIcon collection={collection} />,
       section: CollectionSection,
-      perform: () => history.push(collection.url),
+      perform: () => history.push(collection.path),
     }));
   },
 });
@@ -103,6 +103,7 @@ export const editCollectionPermissions = createAction({
 
     stores.dialogs.openModal({
       title: t("Collection permissions"),
+      fullscreen: true,
       content: <CollectionPermissions collectionId={activeCollectionId} />,
     });
   },
@@ -161,9 +162,10 @@ export const unstarCollection = createAction({
 });
 
 export const deleteCollection = createAction({
-  name: ({ t }) => t("Delete"),
+  name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete collection",
   section: CollectionSection,
+  dangerous: true,
   icon: <TrashIcon />,
   visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
@@ -182,7 +184,6 @@ export const deleteCollection = createAction({
     }
 
     stores.dialogs.openModal({
-      isCentered: true,
       title: t("Delete collection"),
       content: (
         <CollectionDeleteDialog

app/actions/definitions/developer.tsx

@@ -1,6 +1,7 @@
-import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import copy from "copy-to-clipboard";
+import { CopyIcon, ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import stores from "~/stores";
+import { toast } from "sonner";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
 import env from "~/env";
@@ -8,6 +9,71 @@ import { client } from "~/utils/ApiClient";
 import Logger from "~/utils/Logger";
 import { deleteAllDatabases } from "~/utils/developer";
 
+export const copyId = createAction({
+  name: ({ t }) => t("Copy ID"),
+  icon: <CopyIcon />,
+  keywords: "uuid",
+  section: DeveloperSection,
+  children: ({
+    currentTeamId,
+    currentUserId,
+    activeCollectionId,
+    activeDocumentId,
+  }) => {
+    function copyAndToast(text: string | null | undefined) {
+      if (text) {
+        copy(text);
+        toast.success("Copied to clipboard");
+      }
+    }
+
+    return [
+      createAction({
+        name: "Copy User ID",
+        section: DeveloperSection,
+        icon: <CopyIcon />,
+        visible: () => !!currentUserId,
+        perform: () => copyAndToast(currentUserId),
+      }),
+      createAction({
+        name: "Copy Team ID",
+        section: DeveloperSection,
+        icon: <CopyIcon />,
+        visible: () => !!currentTeamId,
+        perform: () => copyAndToast(currentTeamId),
+      }),
+      createAction({
+        name: "Copy Collection ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!activeCollectionId,
+        perform: () => copyAndToast(activeCollectionId),
+      }),
+      createAction({
+        name: "Copy Document ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!activeDocumentId,
+        perform: () => copyAndToast(activeDocumentId),
+      }),
+      createAction({
+        name: "Copy Team ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!currentTeamId,
+        perform: () => copyAndToast(currentTeamId),
+      }),
+      createAction({
+        name: "Copy Release ID",
+        icon: <CopyIcon />,
+        section: DeveloperSection,
+        visible: () => !!env.RELEASE,
+        perform: () => copyAndToast(env.RELEASE),
+      }),
+    ];
+  },
+});
+
 export const clearIndexedDB = createAction({
   name: ({ t }) => t("Delete IndexedDB cache"),
   icon: <TrashIcon />,
@@ -15,24 +81,30 @@ export const clearIndexedDB = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
+    toast.message(t("IndexedDB cache deleted"));
   },
 });
 
 export const createTestUsers = createAction({
-  name: "Create test users",
+  name: "Create 10 test users",
   icon: <UserIcon />,
   section: DeveloperSection,
   visible: () => env.ENVIRONMENT === "development",
   perform: async () => {
     const count = 10;
+    await client.post("/developer.create_test_users", { count });
+    toast.message(`${count} test users created`);
+  },
+});
 
-    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 createToast = createAction({
+  name: "Create toast",
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  perform: async () => {
+    toast.message("Hello world", {
+      duration: 30000,
+    });
   },
 });
 
@@ -42,7 +114,7 @@ export const toggleDebugLogging = createAction({
   section: DeveloperSection,
   perform: async ({ t }) => {
     Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    stores.toasts.showToast(
+    toast.message(
       Logger.debugLoggingEnabled
         ? t("Debug logging enabled")
         : t("Debug logging disabled")
@@ -56,7 +128,13 @@ export const developer = createAction({
   icon: <ToolsIcon />,
   iconInContextMenu: false,
   section: DeveloperSection,
-  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
+  children: [
+    copyId,
+    clearIndexedDB,
+    toggleDebugLogging,
+    createToast,
+    createTestUsers,
+  ],
 });
 
 export const rootDeveloperActions = [developer];

app/actions/definitions/documents.tsx

@@ -1,3 +1,4 @@
+import copy from "copy-to-clipboard";
 import invariant from "invariant";
 import {
   DownloadIcon,
@@ -19,19 +20,25 @@ import {
   ArchiveIcon,
   ShuffleIcon,
   HistoryIcon,
-  LightBulbIcon,
+  GraphIcon,
   UnpublishIcon,
   PublishIcon,
   CommentIcon,
+  GlobeIcon,
+  CopyIcon,
 } from "outline-icons";
 import * as React from "react";
+import { toast } from "sonner";
 import { ExportContentType, TeamPreference } from "@shared/types";
+import MarkdownHelper from "@shared/utils/MarkdownHelper";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import DuplicateDialog from "~/components/DuplicateDialog";
+import SharePopover from "~/components/Sharing";
 import { createAction } from "~/actions";
 import { DocumentSection } from "~/actions/sections";
 import env from "~/env";
@@ -42,6 +49,8 @@ import {
   homePath,
   newDocumentPath,
   searchPath,
+  documentPath,
+  urlify,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -86,6 +95,48 @@ export const createDocument = createAction({
     }),
 });
 
+export const createDocumentFromTemplate = createAction({
+  name: ({ t }) => t("New from template"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    !!stores.documents.get(activeDocumentId)?.template &&
+    stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
+      {
+        starred: inStarredSection,
+      }
+    ),
+});
+
+export const createNestedDocument = createAction({
+  name: ({ t }) => t("New nested document"),
+  analyticsName: "New document",
+  section: DocumentSection,
+  icon: <NewDocumentIcon />,
+  keywords: "create",
+  visible: ({ currentTeamId, activeDocumentId, stores }) =>
+    !!currentTeamId &&
+    !!activeDocumentId &&
+    stores.policies.abilities(currentTeamId).createDocument &&
+    stores.policies.abilities(activeDocumentId).createChildDocument,
+  perform: ({ activeCollectionId, activeDocumentId, inStarredSection }) =>
+    history.push(
+      newDocumentPath(activeCollectionId, {
+        parentDocumentId: activeDocumentId,
+      }),
+      {
+        starred: inStarredSection,
+      }
+    ),
+});
+
 export const starDocument = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star document",
@@ -148,7 +199,7 @@ export const publishDocument = createAction({
     }
     const document = stores.documents.get(activeDocumentId);
     return (
-      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
+      !!document?.isDraft && stores.policies.abilities(activeDocumentId).publish
     );
   },
   perform: async ({ activeDocumentId, stores, t }) => {
@@ -165,13 +216,14 @@ export const publishDocument = createAction({
       await document.save(undefined, {
         publish: true,
       });
-      stores.toasts.showToast(t("Document published"), {
-        type: "success",
-      });
+      toast.success(
+        t("Published {{ documentName }}", {
+          documentName: document.noun,
+        })
+      );
     } else if (document) {
       stores.dialogs.openModal({
         title: t("Publish document"),
-        isCentered: true,
         content: <DocumentPublish document={document} />,
       });
     }
@@ -195,12 +247,17 @@ export const unpublishDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
 
-    await document?.unpublish();
+    await document.unpublish();
 
-    stores.toasts.showToast(t("Document unpublished"), {
-      type: "success",
-    });
+    toast.success(
+      t("Unpublished {{ documentName }}", {
+        documentName: document.noun,
+      })
+    );
   },
 });
 
@@ -227,12 +284,8 @@ export const subscribeDocument = createAction({
     }
 
     const document = stores.documents.get(activeDocumentId);
-
     await document?.subscribe();
-
-    stores.toasts.showToast(t("Subscribed to document notifications"), {
-      type: "success",
-    });
+    toast.success(t("Subscribed to document notifications"));
   },
 });
 
@@ -262,8 +315,38 @@ export const unsubscribeDocument = createAction({
 
     await document?.unsubscribe(currentUserId);
 
-    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
-      type: "success",
+    toast.success(t("Unsubscribed from document notifications"));
+  },
+});
+
+export const shareDocument = createAction({
+  name: ({ t }) => t("Share"),
+  analyticsName: "Share document",
+  section: DocumentSection,
+  icon: <GlobeIcon />,
+  perform: async ({ activeDocumentId, stores, currentUserId, t }) => {
+    if (!activeDocumentId || !currentUserId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+    const share = stores.shares.getByDocumentId(activeDocumentId);
+    const sharedParent = stores.shares.getByDocumentParents(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    stores.dialogs.openModal({
+      title: t("Share this document"),
+      content: (
+        <SharePopover
+          document={document}
+          share={share}
+          sharedParent={sharedParent}
+          onRequestClose={stores.dialogs.closeAllModals}
+          visible
+        />
+      ),
     });
   },
 });
@@ -303,15 +386,11 @@ export const downloadDocumentAsPDF = createAction({
       return;
     }
 
-    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
-      type: "loading",
-      timeout: 30 * 1000,
-    });
-
+    const id = toast.loading(`${t("Exporting")}…`);
     const document = stores.documents.get(activeDocumentId);
-    document
+    return document
       ?.download(ExportContentType.Pdf)
-      .finally(() => id && stores.toasts.hideToast(id));
+      .finally(() => id && toast.dismiss(id));
   },
 });
 
@@ -348,6 +427,47 @@ export const downloadDocument = createAction({
   ],
 });
 
+export const copyDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Copy as Markdown"),
+  section: DocumentSection,
+  keywords: "clipboard",
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  perform: ({ stores, activeDocumentId, t }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document) {
+      copy(MarkdownHelper.toMarkdown(document));
+      toast.success(t("Markdown copied to clipboard"));
+    }
+  },
+});
+
+export const copyDocumentLink = createAction({
+  name: ({ t }) => t("Copy link"),
+  section: DocumentSection,
+  keywords: "clipboard",
+  visible: ({ activeDocumentId }) => !!activeDocumentId,
+  perform: ({ stores, activeDocumentId, t }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document) {
+      copy(urlify(documentPath(document)));
+      toast.success(t("Link copied to clipboard"));
+    }
+  },
+});
+
+export const copyDocument = createAction({
+  name: ({ t }) => t("Copy"),
+  analyticsName: "Copy document",
+  section: DocumentSection,
+  icon: <CopyIcon />,
+  keywords: "clipboard",
+  children: [copyDocumentLink, copyDocumentAsMarkdown],
+});
+
 export const duplicateDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Duplicate") : t("Duplicate document"),
@@ -356,7 +476,7 @@ export const duplicateDocument = createAction({
   icon: <DuplicateIcon />,
   keywords: "copy",
   visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).duplicate,
   perform: async ({ activeDocumentId, t, stores }) => {
     if (!activeDocumentId) {
       return;
@@ -364,11 +484,18 @@ export const duplicateDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
     invariant(document, "Document must exist");
-    const duped = await document.duplicate();
-    // when duplicating, go straight to the duplicated document content
-    history.push(duped.url);
-    stores.toasts.showToast(t("Document duplicated"), {
-      type: "success",
+
+    stores.dialogs.openModal({
+      title: t("Copy document"),
+      content: (
+        <DuplicateDialog
+          document={document}
+          onSubmit={(response) => {
+            stores.dialogs.closeAllModals();
+            history.push(documentPath(response[0]));
+          }}
+        />
+      ),
     });
   },
 });
@@ -407,19 +534,13 @@ export const pinDocumentToCollection = createAction({
       return;
     }
 
-    try {
-      const document = stores.documents.get(activeDocumentId);
-      await document?.pin(document.collectionId);
+    const document = stores.documents.get(activeDocumentId);
+    await document?.pin(document.collectionId);
 
-      const collection = stores.collections.get(activeCollectionId);
+    const collection = stores.collections.get(activeCollectionId);
 
-      if (!collection || !location.pathname.startsWith(collection?.url)) {
-        stores.toasts.showToast(t("Pinned to collection"));
-      }
-    } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+    if (!collection || !location.pathname.startsWith(collection?.url)) {
+      toast.success(t("Pinned to collection"));
     }
   },
 });
@@ -452,16 +573,10 @@ export const pinDocumentToHome = createAction({
     }
     const document = stores.documents.get(activeDocumentId);
 
-    try {
-      await document?.pin();
+    await document?.pin();
 
-      if (location.pathname !== homePath()) {
-        stores.toasts.showToast(t("Pinned to team home"));
-      }
-    } catch (err) {
-      stores.toasts.showToast(err.message, {
-        type: "error",
-      });
+    if (location.pathname !== homePath()) {
+      toast.success(t("Pinned to home"));
     }
   },
 });
@@ -504,7 +619,7 @@ export const importDocument = createAction({
     return false;
   },
   perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents, toasts } = stores;
+    const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
     input.accept = documents.importFileTypes.join(", ");
@@ -512,23 +627,16 @@ export const importDocument = createAction({
     input.onchange = async (ev) => {
       const files = getEventFiles(ev);
 
-      try {
-        const file = files[0];
-        const document = await documents.import(
-          file,
-          activeDocumentId,
-          activeCollectionId,
-          {
-            publish: true,
-          }
-        );
-        history.push(document.url);
-      } catch (err) {
-        toasts.showToast(err.message, {
-          type: "error",
-        });
-        throw err;
-      }
+      const file = files[0];
+      const document = await documents.import(
+        file,
+        activeDocumentId,
+        activeCollectionId,
+        {
+          publish: true,
+        }
+      );
+      history.push(document.url);
     };
 
     input.click();
@@ -562,7 +670,6 @@ export const createTemplate = createAction({
 
     stores.dialogs.openModal({
       title: t("Create template"),
-      isCentered: true,
       content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
     });
   },
@@ -621,7 +728,6 @@ export const moveDocument = createAction({
         title: t("Move {{ documentType }}", {
           documentType: document.noun,
         }),
-        isCentered: true,
         content: <DocumentMove document={document} />,
       });
     }
@@ -647,15 +753,13 @@ export const archiveDocument = createAction({
       }
 
       await document.archive();
-      stores.toasts.showToast(t("Document archived"), {
-        type: "success",
-      });
+      toast.success(t("Document archived"));
     }
   },
 });
 
 export const deleteDocument = createAction({
-  name: ({ t }) => t("Delete"),
+  name: ({ t }) => `${t("Delete")}…`,
   analyticsName: "Delete document",
   section: DocumentSection,
   icon: <TrashIcon />,
@@ -677,7 +781,6 @@ export const deleteDocument = createAction({
         title: t("Delete {{ documentName }}", {
           documentName: document.noun,
         }),
-        isCentered: true,
         content: (
           <DocumentDelete
             document={document}
@@ -712,7 +815,6 @@ export const permanentlyDeleteDocument = createAction({
         title: t("Permanently delete {{ documentName }}", {
           documentName: document.noun,
         }),
-        isCentered: true,
         content: (
           <DocumentPermanentDelete
             document={document}
@@ -733,8 +835,7 @@ export const openDocumentComments = createAction({
     const can = stores.policies.abilities(activeDocumentId ?? "");
     return (
       !!activeDocumentId &&
-      can.read &&
-      !can.restore &&
+      can.comment &&
       !!stores.auth.team?.getPreference(TeamPreference.Commenting)
     );
   },
@@ -772,10 +873,19 @@ export const openDocumentInsights = createAction({
   name: ({ t }) => t("Insights"),
   analyticsName: "Open document insights",
   section: DocumentSection,
-  icon: <LightBulbIcon />,
+  icon: <GraphIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.read;
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+
+    return (
+      !!activeDocumentId &&
+      can.read &&
+      !document?.isTemplate &&
+      !document?.isDeleted
+    );
   },
   perform: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -797,6 +907,8 @@ export const rootDocumentActions = [
   deleteDocument,
   importDocument,
   downloadDocument,
+  copyDocumentLink,
+  copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,
   publishDocument,
@@ -813,4 +925,5 @@ export const rootDocumentActions = [
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
+  shareDocument,
 ];

app/actions/definitions/navigation.tsx

@@ -6,14 +6,15 @@ import {
   EditIcon,
   OpenIcon,
   SettingsIcon,
-  ShapesIcon,
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
   ProfileIcon,
   BrowserIcon,
+  ShapesIcon,
 } from "outline-icons";
 import * as React from "react";
+import { isMac } from "@shared/utils/browser";
 import {
   developersUrl,
   changelogUrl,
@@ -26,14 +27,12 @@ import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
 import Desktop from "~/utils/Desktop";
-import { isMac } from "~/utils/browser";
 import history from "~/utils/history";
 import isCloudHosted from "~/utils/isCloudHosted";
 import {
   homePath,
   searchPath,
   draftsPath,
-  templatesPath,
   archivePath,
   trashPath,
   settingsPath,
@@ -67,15 +66,6 @@ export const navigateToDrafts = createAction({
   visible: ({ location }) => location.pathname !== draftsPath(),
 });
 
-export const navigateToTemplates = createAction({
-  name: ({ t }) => t("Templates"),
-  analyticsName: "Navigate to templates",
-  section: NavigationSection,
-  icon: <ShapesIcon />,
-  perform: () => history.push(templatesPath()),
-  visible: ({ location }) => location.pathname !== templatesPath(),
-});
-
 export const navigateToArchive = createAction({
   name: ({ t }) => t("Archive"),
   analyticsName: "Navigate to archive",
@@ -103,7 +93,7 @@ export const navigateToSettings = createAction({
   icon: <SettingsIcon />,
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  perform: () => history.push(settingsPath()),
 });
 
 export const navigateToProfileSettings = createAction({
@@ -115,6 +105,15 @@ export const navigateToProfileSettings = createAction({
   perform: () => history.push(settingsPath()),
 });
 
+export const navigateToTemplateSettings = createAction({
+  name: ({ t }) => t("Templates"),
+  analyticsName: "Navigate to template settings",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <ShapesIcon />,
+  perform: () => history.push(settingsPath("templates")),
+});
+
 export const navigateToNotificationSettings = createAction({
   name: ({ t }) => t("Notifications"),
   analyticsName: "Navigate to notification settings",
@@ -216,7 +215,6 @@ export const logout = createAction({
 export const rootNavigationActions = [
   navigateToHome,
   navigateToDrafts,
-  navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
   downloadApp,

app/actions/definitions/revisions.tsx

@@ -2,6 +2,7 @@ import copy from "copy-to-clipboard";
 import { LinkIcon, RestoreIcon } from "outline-icons";
 import * as React from "react";
 import { matchPath } from "react-router-dom";
+import { toast } from "sonner";
 import stores from "~/stores";
 import { createAction } from "~/actions";
 import { RevisionSection } from "~/actions/sections";
@@ -68,9 +69,7 @@ export const copyLinkToRevision = createAction({
     copy(url, {
       format: "text/plain",
       onCopy: () => {
-        stores.toasts.showToast(t("Link copied"), {
-          type: "info",
-        });
+        toast.message(t("Link copied"));
       },
     });
   },

app/actions/definitions/teams.tsx

@@ -60,6 +60,7 @@ export const createTeam = createAction({
     user &&
       stores.dialogs.openModal({
         title: t("Create a workspace"),
+        fullscreen: true,
         content: <TeamNew user={user} />,
       });
   },

app/actions/definitions/users.tsx

@@ -17,6 +17,7 @@ export const inviteUser = createAction({
   perform: ({ t }) => {
     stores.dialogs.openModal({
       title: t("Invite people"),
+      fullscreen: true,
       content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
     });
   },
@@ -38,7 +39,6 @@ export const deleteUserActionFactory = (userId: string) =>
 
       stores.dialogs.openModal({
         title: t("Delete user"),
-        isCentered: true,
         content: (
           <UserDeleteDialog
             user={user}

app/actions/index.ts

@@ -1,5 +1,6 @@
-import { flattenDeep } from "lodash";
+import flattenDeep from "lodash/flattenDeep";
 import * as React from "react";
+import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -73,15 +74,7 @@ export function actionToMenuItem(
     icon,
     visible,
     dangerous: action.dangerous,
-    onClick: () => {
-      try {
-        action.perform?.(context);
-      } catch (err) {
-        context.stores.toasts.showToast(err.message, {
-          type: "error",
-        });
-      }
-    },
+    onClick: () => performAction(action, context),
     selected: action.selected?.(context),
   };
 }
@@ -115,8 +108,24 @@ export function actionToKBar(
       keywords: action.keywords ?? "",
       shortcut: action.shortcut || [],
       icon: resolvedIcon,
-      perform: action.perform ? () => action.perform?.(context) : undefined,
+      perform: action.perform
+        ? () => performAction(action, context)
+        : undefined,
     },
+  ].concat(
     // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-  ].concat(children.map((child) => ({ ...child, parent: action.id })));
+    children.map((child) => ({ ...child, parent: child.parent ?? action.id }))
+  );
+}
+
+export async function performAction(action: Action, context: ActionContext) {
+  const result = action.perform?.(context);
+
+  if (result instanceof Promise) {
+    return result.catch((err: Error) => {
+      toast.error(err.message);
+    });
+  }
+
+  return result;
 }

app/components/ActionButton.tsx

@@ -1,6 +1,8 @@
 /* eslint-disable react/prop-types */
 import * as React from "react";
 import Tooltip, { Props as TooltipProps } from "~/components/Tooltip";
+import { performAction } from "~/actions";
+import useIsMounted from "~/hooks/useIsMounted";
 import { Action, ActionContext } from "~/types";
 
 export type Props = React.HTMLAttributes<HTMLButtonElement> & {
@@ -24,6 +26,7 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
     { action, context, tooltip, hideOnActionDisabled, ...rest }: Props,
     ref: React.Ref<HTMLButtonElement>
   ) {
+    const isMounted = useIsMounted();
     const [executing, setExecuting] = React.useState(false);
     const disabled = rest.disabled;
 
@@ -60,10 +63,12 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
             ? (ev) => {
                 ev.preventDefault();
                 ev.stopPropagation();
-                const response = action.perform?.(actionContext);
+                const response = performAction(action, actionContext);
                 if (response?.finally) {
                   setExecuting(true);
-                  response.finally(() => setExecuting(false));
+                  void response.finally(
+                    () => isMounted() && setExecuting(false)
+                  );
                 }
               }
             : rest.onClick

app/components/Analytics.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable prefer-rest-params */
 /* global ga */
-import { escape } from "lodash";
+import escape from "lodash/escape";
 import * as React from "react";
 import { IntegrationService } from "@shared/types";
 import env from "~/env";

app/components/AuthLogo/SlackLogo.tsx

@@ -1,41 +0,0 @@
-import * as React from "react";
-
-type Props = {
-  size?: number;
-  fill?: string;
-  className?: string;
-};
-
-function SlackLogo({ size = 34, fill = "#FFF", className }: Props) {
-  return (
-    <svg
-      fill={fill}
-      width={size}
-      height={size}
-      viewBox="0 0 34 34"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <g stroke="none" strokeWidth="1" fillRule="evenodd">
-        <g transform="translate(0.000000, 17.822581)">
-          <path d="M7.23870968,3.61935484 C7.23870968,5.56612903 5.6483871,7.15645161 3.7016129,7.15645161 C1.75483871,7.15645161 0.164516129,5.56612903 0.164516129,3.61935484 C0.164516129,1.67258065 1.75483871,0.0822580645 3.7016129,0.0822580645 L7.23870968,0.0822580645 L7.23870968,3.61935484 Z" />
-          <path d="M9.02096774,3.61935484 C9.02096774,1.67258065 10.6112903,0.0822580645 12.5580645,0.0822580645 C14.5048387,0.0822580645 16.0951613,1.67258065 16.0951613,3.61935484 L16.0951613,12.4758065 C16.0951613,14.4225806 14.5048387,16.0129032 12.5580645,16.0129032 C10.6112903,16.0129032 9.02096774,14.4225806 9.02096774,12.4758065 C9.02096774,12.4758065 9.02096774,3.61935484 9.02096774,3.61935484 Z" />
-        </g>
-        <g>
-          <path d="M12.5580645,7.23870968 C10.6112903,7.23870968 9.02096774,5.6483871 9.02096774,3.7016129 C9.02096774,1.75483871 10.6112903,0.164516129 12.5580645,0.164516129 C14.5048387,0.164516129 16.0951613,1.75483871 16.0951613,3.7016129 L16.0951613,7.23870968 L12.5580645,7.23870968 Z" />
-          <path d="M12.5580645,9.02096774 C14.5048387,9.02096774 16.0951613,10.6112903 16.0951613,12.5580645 C16.0951613,14.5048387 14.5048387,16.0951613 12.5580645,16.0951613 L3.7016129,16.0951613 C1.75483871,16.0951613 0.164516129,14.5048387 0.164516129,12.5580645 C0.164516129,10.6112903 1.75483871,9.02096774 3.7016129,9.02096774 C3.7016129,9.02096774 12.5580645,9.02096774 12.5580645,9.02096774 Z" />
-        </g>
-        <g transform="translate(17.822581, 0.000000)">
-          <path d="M8.93870968,12.5580645 C8.93870968,10.6112903 10.5290323,9.02096774 12.4758065,9.02096774 C14.4225806,9.02096774 16.0129032,10.6112903 16.0129032,12.5580645 C16.0129032,14.5048387 14.4225806,16.0951613 12.4758065,16.0951613 L8.93870968,16.0951613 L8.93870968,12.5580645 Z" />
-          <path d="M7.15645161,12.5580645 C7.15645161,14.5048387 5.56612903,16.0951613 3.61935484,16.0951613 C1.67258065,16.0951613 0.0822580645,14.5048387 0.0822580645,12.5580645 L0.0822580645,3.7016129 C0.0822580645,1.75483871 1.67258065,0.164516129 3.61935484,0.164516129 C5.56612903,0.164516129 7.15645161,1.75483871 7.15645161,3.7016129 L7.15645161,12.5580645 Z" />
-        </g>
-        <g transform="translate(17.822581, 17.822581)">
-          <path d="M3.61935484,8.93870968 C5.56612903,8.93870968 7.15645161,10.5290323 7.15645161,12.4758065 C7.15645161,14.4225806 5.56612903,16.0129032 3.61935484,16.0129032 C1.67258065,16.0129032 0.0822580645,14.4225806 0.0822580645,12.4758065 L0.0822580645,8.93870968 L3.61935484,8.93870968 Z" />
-          <path d="M3.61935484,7.15645161 C1.67258065,7.15645161 0.0822580645,5.56612903 0.0822580645,3.61935484 C0.0822580645,1.67258065 1.67258065,0.0822580645 3.61935484,0.0822580645 L12.4758065,0.0822580645 C14.4225806,0.0822580645 16.0129032,1.67258065 16.0129032,3.61935484 C16.0129032,5.56612903 14.4225806,7.15645161 12.4758065,7.15645161 L3.61935484,7.15645161 Z" />
-        </g>
-      </g>
-    </svg>
-  );
-}
-
-export default SlackLogo;

app/components/Authenticated.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
 import LoadingIndicator from "./LoadingIndicator";
@@ -13,10 +14,11 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
   const { auth } = useStores();
   const { i18n } = useTranslation();
-  const language = auth.user?.language;
+  const user = useCurrentUser({ rejectOnEmpty: false });
+  const language = user?.language;
 
-  // Watching for language changes here as this is the earliest point we have
-  // the user available and means we can start loading translations faster
+  // Watching for language changes here as this is the earliest point we might have the user
+  // available and means we can start loading translations faster
   React.useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);

app/components/AuthenticatedLayout.tsx

@@ -12,6 +12,7 @@ import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
 import type { Editor as TEditor } from "~/editor";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -25,6 +26,7 @@ import {
   matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
+import { PortalContext } from "./Portal";
 
 const DocumentComments = lazyWithRetry(
   () => import("~/scenes/Document/components/Comments")
@@ -44,8 +46,9 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
+  const layoutRef = React.useRef<HTMLDivElement>(null);
   const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
+  const team = useCurrentTeam();
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
     editor: null,
     setEditor: (editor: TEditor) => {
@@ -76,16 +79,14 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     return <ErrorSuspended />;
   }
 
-  const showSidebar = auth.authenticated && user && team;
-
-  const sidebar = showSidebar ? (
+  const sidebar = (
     <Fade>
       <Switch>
         <Route path={settingsPath()} component={SettingsSidebar} />
         <Route component={Sidebar} />
       </Switch>
     </Fade>
-  ) : undefined;
+  );
 
   const showHistory = !!matchPath(location.pathname, {
     path: matchDocumentHistory,
@@ -98,7 +99,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     !showHistory &&
     ui.activeDocumentId &&
     ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team?.getPreference(TeamPreference.Commenting);
+    team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence
@@ -121,15 +122,22 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
 
   return (
     <DocumentContext.Provider value={documentContext}>
-      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
-        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
-        <RegisterKeyDown trigger="t" handler={goToSearch} />
-        <RegisterKeyDown trigger="/" handler={goToSearch} />
-        {children}
-        <React.Suspense fallback={null}>
-          <CommandBar />
-        </React.Suspense>
-      </Layout>
+      <PortalContext.Provider value={layoutRef.current}>
+        <Layout
+          title={team.name}
+          sidebar={sidebar}
+          sidebarRight={sidebarRight}
+          ref={layoutRef}
+        >
+          <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+          <RegisterKeyDown trigger="t" handler={goToSearch} />
+          <RegisterKeyDown trigger="/" handler={goToSearch} />
+          {children}
+          <React.Suspense fallback={null}>
+            <CommandBar />
+          </React.Suspense>
+        </Layout>
+      </PortalContext.Provider>
     </DocumentContext.Provider>
   );
 };

app/components/Avatar/Avatar.tsx

@@ -5,6 +5,7 @@ import Initials from "./Initials";
 
 export enum AvatarSize {
   Small = 16,
+  Toast = 18,
   Medium = 24,
   Large = 32,
   XLarge = 48,

app/components/Avatar/AvatarWithPresence.tsx

@@ -34,7 +34,7 @@ function AvatarWithPresence({
   return (
     <>
       <Tooltip
-        tooltip={
+        content={
           <Centered>
             <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
             {status && (

app/components/Branding.tsx

@@ -34,16 +34,17 @@ const Link = styled.a`
     fill: ${s("text")};
   }
 
-  &:hover {
-    background: ${s("sidebarBackground")};
-  }
-
   ${breakpoint("tablet")`
     z-index: ${depths.sidebar + 1};
+    background: ${s("sidebarBackground")};
     position: fixed;
     bottom: 0;
-    left: 0;
+    right: 0;
     padding: 16px;
+
+    &:hover {
+      background: ${s("sidebarControlHoverBackground")};
+    }
   `};
 `;
 

app/components/Button.tsx

@@ -171,7 +171,7 @@ const Button = <T extends React.ElementType = "button">(
     danger,
     ...rest
   } = props;
-  const hasText = children !== undefined || value !== undefined;
+  const hasText = !!children || value !== undefined;
   const ic = hideIcon ? undefined : action?.icon ?? icon;
   const hasIcon = ic !== undefined;
 

app/components/CenteredContent.tsx

@@ -4,6 +4,7 @@ import breakpoint from "styled-components-breakpoint";
 
 type Props = {
   children?: React.ReactNode;
+  maxWidth?: string;
   withStickyHeader?: boolean;
 };
 
@@ -18,18 +19,24 @@ const Container = styled.div<Props>`
   `};
 `;
 
-const Content = styled.div`
-  max-width: 46em;
+type ContentProps = { $maxWidth?: string };
+
+const Content = styled.div<ContentProps>`
+  max-width: ${(props) => props.$maxWidth ?? "46em"};
   margin: 0 auto;
 
   ${breakpoint("desktopLarge")`
-    max-width: 52em;
+    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
   `};
 `;
 
-const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
+const CenteredContent: React.FC<Props> = ({
+  children,
+  maxWidth,
+  ...rest
+}: Props) => (
   <Container {...rest}>
-    <Content>{children}</Content>
+    <Content $maxWidth={maxWidth}>{children}</Content>
   </Container>
 );
 

app/components/ChangeLanguage.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { changeLanguage } from "~/utils/language";
+
+type Props = {
+  locale: string;
+};
+
+export default function ChangeLanguage({ locale }: Props) {
+  const { i18n } = useTranslation();
+
+  React.useEffect(() => {
+    void changeLanguage(locale, i18n);
+  }, [locale, i18n]);
+
+  return null;
+}

app/components/Collaborators.tsx

@@ -1,4 +1,7 @@
-import { sortBy, filter, uniq, isEqual } from "lodash";
+import filter from "lodash/filter";
+import isEqual from "lodash/isEqual";
+import sortBy from "lodash/sortBy";
+import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";

app/components/Collection/CollectionEdit.tsx

@@ -0,0 +1,32 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { toast } from "sonner";
+import useStores from "~/hooks/useStores";
+import { CollectionForm, FormData } from "./CollectionForm";
+
+type Props = {
+  collectionId: string;
+  onSubmit: () => void;
+};
+
+export const CollectionEdit = observer(function CollectionEdit_({
+  collectionId,
+  onSubmit,
+}: Props) {
+  const { collections } = useStores();
+  const collection = collections.get(collectionId);
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        await collection?.save(data);
+        onSubmit?.();
+      } catch (error) {
+        toast.error(error.message);
+      }
+    },
+    [collection, onSubmit]
+  );
+
+  return <CollectionForm collection={collection} handleSubmit={handleSubmit} />;
+});

app/components/Collection/CollectionForm.tsx

@@ -0,0 +1,168 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Controller, useForm } from "react-hook-form";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { randomElement } from "@shared/random";
+import { CollectionPermission } from "@shared/types";
+import { colorPalette } from "@shared/utils/collections";
+import { CollectionValidation } from "@shared/validations";
+import Collection from "~/models/Collection";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import IconPicker from "~/components/IconPicker";
+import { IconLibrary } from "~/components/Icons/IconLibrary";
+import Input from "~/components/Input";
+import InputSelectPermission from "~/components/InputSelectPermission";
+import Switch from "~/components/Switch";
+import Text from "~/components/Text";
+import useBoolean from "~/hooks/useBoolean";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+
+export interface FormData {
+  name: string;
+  icon: string;
+  color: string;
+  sharing: boolean;
+  permission: CollectionPermission | undefined;
+}
+
+export const CollectionForm = observer(function CollectionForm_({
+  handleSubmit,
+  collection,
+}: {
+  handleSubmit: (data: FormData) => void;
+  collection?: Collection;
+}) {
+  const team = useCurrentTeam();
+  const { t } = useTranslation();
+  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
+  const {
+    register,
+    handleSubmit: formHandleSubmit,
+    formState,
+    watch,
+    control,
+    setValue,
+    setFocus,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      name: collection?.name ?? "",
+      icon: collection?.icon,
+      sharing: collection?.sharing ?? true,
+      permission: collection?.permission,
+      color: collection?.color ?? randomElement(colorPalette),
+    },
+  });
+
+  const values = watch();
+
+  React.useEffect(() => {
+    // If the user hasn't picked an icon yet, go ahead and suggest one based on
+    // the name of the collection. It's the little things sometimes.
+    if (!hasOpenedIconPicker) {
+      setValue(
+        "icon",
+        IconLibrary.findIconByKeyword(values.name) ??
+          values.icon ??
+          "collection"
+      );
+    }
+  }, [values.name]);
+
+  const handleIconPickerChange = React.useCallback(
+    (color: string, icon: string) => {
+      if (icon !== values.icon) {
+        setFocus("name");
+      }
+
+      setValue("color", color);
+      setValue("icon", icon);
+    },
+    [setFocus, setValue, values.icon]
+  );
+
+  return (
+    <form onSubmit={formHandleSubmit(handleSubmit)}>
+      <Text as="p">
+        <Trans>
+          Collections are used to group documents and choose permissions
+        </Trans>
+        .
+      </Text>
+      <Flex gap={8}>
+        <Input
+          type="text"
+          placeholder={t("Name")}
+          {...register("name", {
+            required: true,
+            maxLength: CollectionValidation.maxNameLength,
+          })}
+          prefix={
+            <StyledIconPicker
+              onOpen={setHasOpenedIconPicker}
+              onChange={handleIconPickerChange}
+              initial={values.name[0]}
+              color={values.color}
+              icon={values.icon}
+            />
+          }
+          autoFocus
+          flex
+        />
+      </Flex>
+
+      {/* Following controls are available in create flow, but moved elsewhere for edit */}
+      {!collection && (
+        <Controller
+          control={control}
+          name="permission"
+          render={({ field }) => (
+            <InputSelectPermission
+              ref={field.ref}
+              value={field.value}
+              onChange={(value: CollectionPermission) => {
+                field.onChange(value);
+              }}
+              note={t(
+                "The default access for workspace members, you can share with more users or groups later."
+              )}
+            />
+          )}
+        />
+      )}
+
+      {team.sharing && !collection && (
+        <Switch
+          id="sharing"
+          label={t("Public document sharing")}
+          note={t(
+            "Allow documents within this collection to be shared publicly on the internet."
+          )}
+          {...register("sharing")}
+        />
+      )}
+
+      <Flex justify="flex-end">
+        <Button
+          type="submit"
+          disabled={formState.isSubmitting || !formState.isValid}
+        >
+          {collection
+            ? formState.isSubmitting
+              ? `${t("Saving")}…`
+              : t("Save")
+            : formState.isSubmitting
+            ? `${t("Creating")}…`
+            : t("Create")}
+        </Button>
+      </Flex>
+    </form>
+  );
+});
+
+const StyledIconPicker = styled(IconPicker)`
+  margin-left: 4px;
+  margin-right: 4px;
+`;

app/components/Collection/CollectionNew.tsx

@@ -0,0 +1,32 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { toast } from "sonner";
+import Collection from "~/models/Collection";
+import useStores from "~/hooks/useStores";
+import history from "~/utils/history";
+import { CollectionForm, FormData } from "./CollectionForm";
+
+type Props = {
+  onSubmit: () => void;
+};
+
+export const CollectionNew = observer(function CollectionNew_({
+  onSubmit,
+}: Props) {
+  const { collections } = useStores();
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        const collection = new Collection(data, collections);
+        await collection.save();
+        onSubmit?.();
+        history.push(collection.path);
+      } catch (error) {
+        toast.error(error.message);
+      }
+    },
+    [collections, onSubmit]
+  );
+
+  return <CollectionForm handleSubmit={handleSubmit} />;
+});

app/components/CollectionDeleteDialog.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
@@ -22,11 +23,14 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
 
   const handleSubmit = async () => {
     const redirect = collection.id === ui.activeCollectionId;
-    await collection.delete();
-    onSubmit();
+
     if (redirect) {
       history.push(homePath());
     }
+
+    await collection.delete();
+    onSubmit();
+    toast.success(t("Collection deleted"));
   };
 
   return (
@@ -37,7 +41,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
       danger
     >
       <>
-        <Text type="secondary">
+        <Text as="p" type="secondary">
           <Trans
             defaults="Are you sure about that? Deleting the <em>{{collectionName}}</em> collection is permanent and cannot be restored, however all published documents within will be moved to the trash."
             values={{
@@ -49,7 +53,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
           />
         </Text>
         {team.defaultCollectionId === collection.id ? (
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans
               defaults="Also, <em>{{collectionName}}</em> is being used as the start view – deleting it will reset the start view to the Home page."
               values={{

app/components/CollectionDescription.tsx

@@ -3,7 +3,9 @@ import { observer } from "mobx-react";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
+import { richExtensions } from "@shared/editor/nodes";
 import { s } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Arrow from "~/components/Arrow";
@@ -11,9 +13,18 @@ import ButtonLink from "~/components/ButtonLink";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import NudeButton from "~/components/NudeButton";
+import BlockMenuExtension from "~/editor/extensions/BlockMenu";
+import EmojiMenuExtension from "~/editor/extensions/EmojiMenu";
+import HoverPreviewsExtension from "~/editor/extensions/HoverPreviews";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
+
+const extensions = [
+  ...richExtensions,
+  BlockMenuExtension,
+  EmojiMenuExtension,
+  HoverPreviewsExtension,
+];
 
 type Props = {
   collection: Collection;
@@ -21,7 +32,6 @@ type Props = {
 
 function CollectionDescription({ collection }: Props) {
   const { collections } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const [isExpanded, setExpanded] = React.useState(false);
   const [isEditing, setEditing] = React.useState(false);
@@ -59,15 +69,11 @@ function CollectionDescription({ collection }: Props) {
           });
           setDirty(false);
         } catch (err) {
-          showToast(
-            t("Sorry, an error occurred saving the collection", {
-              type: "error",
-            })
-          );
+          toast.error(t("Sorry, an error occurred saving the collection"));
           throw err;
         }
       }, 1000),
-    [collection, showToast, t]
+    [collection, t]
   );
 
   const handleChange = React.useCallback(
@@ -109,6 +115,7 @@ function CollectionDescription({ collection }: Props) {
                 readOnly={!isEditing}
                 autoFocus={isEditing}
                 onBlur={handleStopEditing}
+                extensions={extensions}
                 maxLength={1000}
                 embedsDisabled
                 canUpdate
@@ -170,7 +177,7 @@ const MaxHeight = styled.div`
   position: relative;
   max-height: 25vh;
   overflow: hidden;
-  margin: -12px -8px -8px;
+  margin: 8px -8px -8px;
   padding: 8px;
 
   &[data-editing="true"],

app/components/CommandBar.tsx

@@ -11,39 +11,26 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import { CommandBarAction } from "~/types";
+import useTemplateActions from "~/hooks/useTemplateActions";
 
 function CommandBar() {
   const { t } = useTranslation();
   const settingsActions = useSettingsActions();
+  const templateActions = useTemplateActions();
   const commandBarActions = React.useMemo(
-    () => [...rootActions, settingsActions],
-    [settingsActions]
+    () => [...rootActions, templateActions, settingsActions],
+    [settingsActions, templateActions]
   );
 
   useCommandBarActions(commandBarActions);
 
-  const { rootAction } = useKBar((state) => ({
-    rootAction: state.currentRootActionId
-      ? (state.actions[
-          state.currentRootActionId
-        ] as unknown as CommandBarAction)
-      : undefined,
-  }));
-
   return (
     <>
       <KBarPortal>
         <Positioner>
           <Animator>
             <SearchActions />
-            <SearchInput
-              placeholder={`${
-                rootAction?.placeholder ||
-                rootAction?.name ||
-                t("Type a command or search")
-              }…`}
-            />
+            <SearchInput defaultPlaceholder={t("Type a command or search")} />
             <CommandBarResults />
           </Animator>
         </Positioner>
@@ -83,6 +70,7 @@ const SearchInput = styled(KBarSearch)`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 

app/components/CommandBarItem.tsx

@@ -62,7 +62,7 @@ function CommandBarItem(
               {index > 0 ? (
                 <>
                   {" "}
-                  <Text size="xsmall" as="span" type="secondary">
+                  <Text size="xsmall" type="secondary">
                     then
                   </Text>{" "}
                 </>

app/components/CommentDeleteDialog.tsx

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import Comment from "~/models/Comment";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   comment: Comment;
@@ -14,7 +14,6 @@ type Props = {
 
 function CommentDeleteDialog({ comment, onSubmit }: Props) {
   const { comments } = useStores();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const hasChildComments = comments.inThread(comment.id).length > 1;
 
@@ -23,7 +22,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       await comment.delete();
       onSubmit?.();
     } catch (err) {
-      showToast(err.message, { type: "error" });
+      toast.error(err.message);
     }
   };
 
@@ -34,7 +33,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
       savingText={`${t("Deleting")}…`}
       danger
     >
-      <Text type="secondary">
+      <Text as="p" type="secondary">
         {hasChildComments ? (
           <Trans>
             Are you sure you want to permanently delete this entire comment

app/components/ConfirmationDialog.tsx

@@ -1,10 +1,11 @@
 import { observer } from "mobx-react";
 import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type Props = {
   /** Callback when the dialog is submitted */
@@ -29,8 +30,8 @@ const ConfirmationDialog: React.FC<Props> = ({
   disabled = false,
 }: Props) => {
   const [isSaving, setIsSaving] = React.useState(false);
+  const { t } = useTranslation();
   const { dialogs } = useStores();
-  const { showToast } = useToasts();
 
   const handleSubmit = React.useCallback(
     async (ev: React.SyntheticEvent) => {
@@ -40,30 +41,31 @@ const ConfirmationDialog: React.FC<Props> = ({
         await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
-        showToast(err.message, {
-          type: "error",
-        });
+        toast.error(err.message);
       } finally {
         setIsSaving(false);
       }
     },
-    [onSubmit, dialogs, showToast]
+    [onSubmit, dialogs]
   );
 
   return (
-    <Flex column>
-      <form onSubmit={handleSubmit}>
+    <form onSubmit={handleSubmit}>
+      <Flex gap={12} column>
         <Text type="secondary">{children}</Text>
-        <Button
-          type="submit"
-          disabled={isSaving || disabled}
-          danger={danger}
-          autoFocus
-        >
-          {isSaving && savingText ? savingText : submitText}
-        </Button>
-      </form>
-    </Flex>
+
+        <Flex justify="flex-end">
+          <Button
+            type="submit"
+            disabled={isSaving || disabled}
+            danger={danger}
+            autoFocus
+          >
+            {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
+          </Button>
+        </Flex>
+      </Flex>
+    </form>
   );
 };
 

app/components/ConnectionStatus.tsx

@@ -14,15 +14,48 @@ function ConnectionStatus() {
   const theme = useTheme();
   const { t } = useTranslation();
 
+  const codeToMessage = {
+    1009: {
+      title: t("Document is too large"),
+      body: t(
+        "This document has reached the maximum size and can no longer be edited"
+      ),
+    },
+    4401: {
+      title: t("Authentication failed"),
+      body: t("Please try logging out and back in again"),
+    },
+    4403: {
+      title: t("Authorization failed"),
+      body: t("You may have lost access to this document, try reloading"),
+    },
+    4503: {
+      title: t("Too many users connected to document"),
+      body: t("Your edits will sync once other users leave the document"),
+    },
+  };
+
+  const message = ui.multiplayerErrorCode
+    ? codeToMessage[ui.multiplayerErrorCode]
+    : undefined;
+
   return ui.multiplayerStatus === "connecting" ||
     ui.multiplayerStatus === "disconnected" ? (
     <Tooltip
-      tooltip={
-        <Centered>
-          <strong>{t("Server connection lost")}</strong>
-          <br />
-          {t("Edits you make will sync once you’re online")}
-        </Centered>
+      content={
+        message ? (
+          <Centered>
+            <strong>{message.title}</strong>
+            <br />
+            {message.body}
+          </Centered>
+        ) : (
+          <Centered>
+            <strong>{t("Server connection lost")}</strong>
+            <br />
+            {t("Edits you make will sync once you’re online")}
+          </Centered>
+        )
       }
       placement="bottom"
     >

app/components/ContentEditable.tsx

@@ -9,6 +9,7 @@ type Props = Omit<React.HTMLAttributes<HTMLSpanElement>, "ref" | "onChange"> & {
   readOnly?: boolean;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
   onChange?: (text: string) => void;
+  onFocus?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onBlur?: React.FocusEventHandler<HTMLSpanElement> | undefined;
   onInput?: React.FormEventHandler<HTMLSpanElement> | undefined;
   onKeyDown?: React.KeyboardEventHandler<HTMLSpanElement> | undefined;
@@ -35,6 +36,7 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
     disabled,
     onChange,
     onInput,
+    onFocus,
     onBlur,
     onKeyDown,
     value,
@@ -143,11 +145,13 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
   );
 
   return (
-    <div className={className} dir={dir} onClick={onClick}>
+    <div className={className} dir={dir} onClick={onClick} tabIndex={-1}>
+      {children}
       <Content
         ref={contentRef}
         contentEditable={!disabled && !readOnly}
         onInput={wrappedEvent(onInput)}
+        onFocus={wrappedEvent(onFocus)}
         onBlur={wrappedEvent(onBlur)}
         onKeyDown={wrappedEvent(onKeyDown)}
         onPaste={handlePaste}
@@ -158,7 +162,6 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
       >
         {innerValue}
       </Content>
-      {children}
     </div>
   );
 });

app/components/ContextMenu/MenuIconWrapper.ts

@@ -1,11 +1,13 @@
 import styled from "styled-components";
+import { s } from "@shared/styles";
 
 const MenuIconWrapper = styled.span`
   width: 24px;
   height: 24px;
   margin-right: 6px;
   margin-left: -4px;
-  color: ${({ theme }) => theme.textSecondary};
+  color: ${s("textSecondary")};
+  flex-shrink: 0;
 `;
 
 export default MenuIconWrapper;

app/components/ContextMenu/MenuItem.tsx

@@ -5,7 +5,7 @@ import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import MenuIconWrapper from "../MenuIconWrapper";
+import MenuIconWrapper from "./MenuIconWrapper";
 
 type Props = {
   id?: string;

app/components/ContextMenu/MouseSafeArea.tsx

@@ -2,17 +2,17 @@ import * as React from "react";
 import { useMousePosition } from "~/hooks/useMousePosition";
 
 type Positions = {
-  /* Sub-menu x */
+  /** Sub-menu x */
   x: number;
-  /* Sub-menu y */
+  /** Sub-menu y */
   y: number;
-  /* Sub-menu height */
+  /** Sub-menu height */
   h: number;
-  /* Sub-menu width */
+  /** Sub-menu width */
   w: number;
-  /* Mouse x */
+  /** Mouse x */
   mouseX: number;
-  /* Mouse y */
+  /** Mouse y */
   mouseY: number;
 };
 

app/components/ContextMenu/Template.tsx

@@ -9,8 +9,8 @@ import {
   MenuStateReturn,
 } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
+import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
-import MenuIconWrapper from "~/components/MenuIconWrapper";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import {
@@ -201,7 +201,7 @@ function Template({ items, actions, context, ...menu }: Props) {
         }
 
         if (item.type === "heading") {
-          return <Header>{item.title}</Header>;
+          return <Header key={index}>{item.title}</Header>;
         }
 
         const _exhaustiveCheck: never = item;

app/components/ContextMenu/index.tsx

@@ -46,6 +46,8 @@ type Props = MenuStateReturn & {
   onClose?: () => void;
   /** Called when the context menu is clicked. */
   onClick?: (ev: React.MouseEvent) => void;
+  /** The maximum width of the context menu. */
+  maxWidth?: number;
   children?: React.ReactNode;
 };
 
@@ -57,11 +59,6 @@ const ContextMenu: React.FC<Props> = ({
   ...rest
 }: Props) => {
   const previousVisible = usePrevious(rest.visible);
-  const maxHeight = useMenuHeight({
-    visible: rest.visible,
-    elementRef: rest.unstable_disclosureRef,
-  });
-  const backgroundRef = React.useRef<HTMLDivElement>(null);
   const { ui } = useStores();
   const { t } = useTranslation();
   const { setIsMenuOpen } = useMenuContext();
@@ -99,21 +96,6 @@ 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 && !isSubMenu) {
-      disableBodyScroll(scrollElement, {
-        reserveScrollBarGap: true,
-      });
-    }
-    return () => {
-      scrollElement && !isSubMenu && enableBodyScroll(scrollElement);
-    };
-  }, [isSubMenu, rest.visible]);
-
   // Perf win – don't render anything until the menu has been opened
   if (!rest.visible && !previousVisible) {
     return null;
@@ -124,51 +106,98 @@ const ContextMenu: React.FC<Props> = ({
   return (
     <>
       <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
-          // positioning.
-          const topAnchor = props.style?.top === "0";
-          // @ts-expect-error ts-migrate(2339) FIXME: Property 'placement' does not exist on type 'Extra... Remove this comment to see the full error message
-          const rightAnchor = props.placement === "bottom-end";
-
-          return (
-            <>
-              {isMobile && (
-                <Backdrop
-                  onClick={(ev) => {
-                    ev.preventDefault();
-                    ev.stopPropagation();
-                    rest.hide?.();
-                  }}
-                />
-              )}
-              <Position {...props}>
-                <Background
-                  dir="auto"
-                  topAnchor={topAnchor}
-                  rightAnchor={rightAnchor}
-                  ref={backgroundRef}
-                  hiddenScrollbars
-                  style={
-                    topAnchor
-                      ? {
-                          maxHeight,
-                        }
-                      : undefined
-                  }
-                >
-                  {rest.visible || rest.animating ? children : null}
-                </Background>
-              </Position>
-            </>
-          );
-        }}
+        {(props) => (
+          <InnerContextMenu
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            menuProps={props as any}
+            {...rest}
+            isSubMenu={isSubMenu}
+          >
+            {children}
+          </InnerContextMenu>
+        )}
       </Menu>
     </>
   );
 };
 
+type InnerContextMenuProps = MenuStateReturn & {
+  isSubMenu: boolean;
+  menuProps: { style?: React.CSSProperties; placement: string };
+  children: React.ReactNode;
+  maxWidth?: number;
+};
+
+/**
+ * Inner context menu allows deferring expensive window measurement hooks etc
+ * until the menu is actually opened.
+ */
+const InnerContextMenu = (props: InnerContextMenuProps) => {
+  const { menuProps } = props;
+  // kind of hacky, but this is an effective way of telling which way
+  // the menu will _actually_ be placed when taking into account screen
+  // positioning.
+  const topAnchor =
+    menuProps.style?.top === "0" || menuProps.style?.position === "fixed";
+  const rightAnchor = menuProps.placement === "bottom-end";
+  const backgroundRef = React.useRef<HTMLDivElement>(null);
+  const isMobile = useMobile();
+
+  const maxHeight = useMenuHeight({
+    visible: props.visible,
+    elementRef: props.unstable_disclosureRef,
+  });
+
+  // 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 (props.visible && scrollElement && !props.isSubMenu) {
+      disableBodyScroll(scrollElement, {
+        reserveScrollBarGap: true,
+      });
+    }
+    return () => {
+      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
+    };
+  }, [props.isSubMenu, props.visible]);
+
+  const style =
+    topAnchor && !isMobile
+      ? {
+          maxHeight,
+        }
+      : undefined;
+
+  return (
+    <>
+      {isMobile && (
+        <Backdrop
+          onClick={(ev) => {
+            ev.preventDefault();
+            ev.stopPropagation();
+            props.hide?.();
+          }}
+        />
+      )}
+      <Position {...menuProps}>
+        <Background
+          dir="auto"
+          maxWidth={props.maxWidth}
+          topAnchor={topAnchor}
+          rightAnchor={rightAnchor}
+          ref={backgroundRef}
+          hiddenScrollbars
+          style={style}
+        >
+          {props.visible || props.animating ? props.children : null}
+        </Background>
+      </Position>
+    </>
+  );
+};
+
 export default ContextMenu;
 
 export const Backdrop = styled.div`
@@ -203,6 +232,7 @@ export const Position = styled.div`
 type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
+  maxWidth?: number;
   theme: DefaultTheme;
 };
 
@@ -228,7 +258,8 @@ export const Background = styled(Scrollable)<BackgroundProps>`
       props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
     transform-origin: ${(props: BackgroundProps) =>
       props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: 276px;
+    max-width: ${(props: BackgroundProps) => props.maxWidth ?? 276}px;
+    max-height: 100vh;
     background: ${(props: BackgroundProps) => props.theme.menuBackground};
     box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
   `};

app/components/CopyToClipboard.ts

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import env from "~/env";
 
 type Props = {
@@ -9,32 +10,40 @@ type Props = {
   onCopy?: () => void;
 };
 
-class CopyToClipboard extends React.PureComponent<Props> {
-  onClick = (ev: React.SyntheticEvent) => {
-    const { text, onCopy, children } = this.props;
-    const elem = React.Children.only(children);
+function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
+  const { text, onCopy, children, ...rest } = props;
 
-    copy(text, {
-      debug: env.ENVIRONMENT !== "production",
-      format: "text/plain",
-    });
+  const onClick = React.useCallback(
+    (ev: React.MouseEvent<HTMLElement>) => {
+      const elem = React.Children.only(children);
 
-    onCopy?.();
+      copy(text, {
+        debug: env.ENVIRONMENT !== "production",
+        format: "text/plain",
+      });
 
-    if (elem && elem.props && typeof elem.props.onClick === "function") {
-      elem.props.onClick(ev);
-    }
-  };
+      onCopy?.();
 
-  render() {
-    const { text, onCopy, children, ...rest } = this.props;
-    const elem = React.Children.only(children);
-    if (!elem) {
-      return null;
-    }
+      if (elem && elem.props && typeof elem.props.onClick === "function") {
+        elem.props.onClick(ev);
+      }
+    },
+    [children, onCopy, text]
+  );
 
-    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
+  const elem = React.Children.only(children);
+  if (!elem) {
+    return null;
   }
+
+  return React.cloneElement(elem, {
+    ...rest,
+    ref:
+      "ref" in elem
+        ? mergeRefs([elem.ref as React.MutableRefObject<HTMLElement>, ref])
+        : ref,
+    onClick,
+  });
 }
 
-export default CopyToClipboard;
+export default React.forwardRef(CopyToClipboard);

app/components/DefaultCollectionInputSelect.tsx

@@ -1,13 +1,13 @@
 import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import { Optional } from "utility-types";
 import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSelect from "~/components/InputSelect";
 import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 
 type DefaultCollectionInputSelectProps = Optional<
   React.ComponentProps<typeof InputSelect>
@@ -25,7 +25,6 @@ const DefaultCollectionInputSelect = ({
   const { collections } = useStores();
   const [fetching, setFetching] = useState(false);
   const [fetchError, setFetchError] = useState();
-  const { showToast } = useToasts();
 
   React.useEffect(() => {
     async function fetchData() {
@@ -36,11 +35,8 @@ const DefaultCollectionInputSelect = ({
             limit: 100,
           });
         } catch (error) {
-          showToast(
-            t("Collections could not be loaded, please reload the app"),
-            {
-              type: "error",
-            }
+          toast.error(
+            t("Collections could not be loaded, please reload the app")
           );
           setFetchError(error);
         } finally {
@@ -49,7 +45,7 @@ const DefaultCollectionInputSelect = ({
       }
     }
     void fetchData();
-  }, [showToast, fetchError, t, fetching, collections]);
+  }, [fetchError, t, fetching, collections]);
 
   const options = React.useMemo(
     () =>

app/components/DesktopEventHandler.tsx

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { useDesktopTitlebar } from "~/hooks/useDesktopTitlebar";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import Desktop from "~/utils/Desktop";
 
 export default function DesktopEventHandler() {
@@ -12,7 +12,7 @@ export default function DesktopEventHandler() {
   const { t } = useTranslation();
   const history = useHistory();
   const { dialogs } = useStores();
-  const { showToast } = useToasts();
+  const hasDisabledUpdateMessage = React.useRef(false);
 
   React.useEffect(() => {
     Desktop.bridge?.redirect((path: string, replace = false) => {
@@ -24,11 +24,16 @@ export default function DesktopEventHandler() {
     });
 
     Desktop.bridge?.updateDownloaded(() => {
-      showToast("An update is ready to install.", {
-        type: "info",
-        timeout: Infinity,
+      if (hasDisabledUpdateMessage.current) {
+        return;
+      }
+
+      hasDisabledUpdateMessage.current = true;
+      toast.message("An update is ready to install.", {
+        duration: Infinity,
+        dismissible: true,
         action: {
-          text: "Install now",
+          label: t("Install now"),
           onClick: () => {
             void Desktop.bridge?.restartAndInstall();
           },
@@ -50,7 +55,7 @@ export default function DesktopEventHandler() {
         content: <KeyboardShortcuts />,
       });
     });
-  }, [t, history, dialogs, showToast]);
+  }, [t, history, dialogs]);
 
   return null;
 }

app/components/Dialogs.tsx

@@ -22,7 +22,7 @@ function Dialogs() {
         <Modal
           key={id}
           isOpen={modal.isOpen}
-          isCentered={modal.isCentered}
+          fullscreen={modal.fullscreen ?? false}
           onRequestClose={() => dialogs.closeModal(id)}
           title={modal.title}
         >

app/components/DocumentBreadcrumb.tsx

@@ -12,9 +12,10 @@ import { MenuInternalLink } from "~/types";
 import {
   archivePath,
   collectionPath,
-  templatesPath,
+  settingsPath,
   trashPath,
 } from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   children?: React.ReactNode;
@@ -43,12 +44,12 @@ function useCategory(document: Document): MenuInternalLink | null {
     };
   }
 
-  if (document.isTemplate) {
+  if (document.template) {
     return {
       type: "route",
       icon: <ShapesIcon />,
       title: t("Templates"),
-      to: templatesPath(),
+      to: settingsPath("templates"),
     };
   }
 
@@ -67,6 +68,10 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     ? collections.get(document.collectionId)
     : undefined;
 
+  React.useEffect(() => {
+    void document.loadRelations();
+  }, [document]);
+
   let collectionNode: MenuInternalLink | undefined;
 
   if (collection) {
@@ -74,22 +79,18 @@ const DocumentBreadcrumb: React.FC<Props> = ({
       type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionPath(collection.url),
+      to: collectionPath(collection.path),
     };
-  } else if (document.collectionId && !collection) {
+  } else if (document.isCollectionDeleted) {
     collectionNode = {
       type: "route",
       title: t("Deleted Collection"),
       icon: undefined,
-      to: collectionPath("deleted-collection"),
+      to: "",
     };
   }
 
-  const path = React.useMemo(
-    () => collection?.pathToDocument(document.id).slice(0, -1) || [],
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [collection, document, document.collectionId, document.parentDocumentId]
-  );
+  const path = document.pathTo;
 
   const items = React.useMemo(() => {
     const output = [];
@@ -102,10 +103,16 @@ const DocumentBreadcrumb: React.FC<Props> = ({
       output.push(collectionNode);
     }
 
-    path.forEach((node: NavigationNode) => {
+    path.slice(0, -1).forEach((node: NavigationNode) => {
       output.push({
         type: "route",
-        title: node.title,
+        title: node.emoji ? (
+          <>
+            <EmojiIcon emoji={node.emoji} /> {node.title}
+          </>
+        ) : (
+          node.title
+        ),
         to: node.url,
       });
     });
@@ -120,7 +127,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
     return (
       <>
         {collection?.name}
-        {path.map((node: NavigationNode) => (
+        {path.slice(0, -1).map((node: NavigationNode) => (
           <React.Fragment key={node.id}>
             <SmallSlash />
             {node.title}

app/components/DocumentCard.tsx

@@ -111,11 +111,12 @@ function DocumentCard(props: Props) {
 
             {document.emoji ? (
               <Squircle color={theme.slateLight}>
-                <EmojiIcon emoji={document.emoji} size={26} />
+                <EmojiIcon emoji={document.emoji} size={24} />
               </Squircle>
             ) : (
               <Squircle color={collection?.color}>
                 {collection?.icon &&
+                collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
                 !pin?.collectionId ? (
                   <CollectionIcon collection={collection} color="white" />
@@ -144,7 +145,7 @@ function DocumentCard(props: Props) {
           {canUpdatePin && (
             <Actions dir={document.dir} gap={4}>
               {!isDragging && pin && (
-                <Tooltip tooltip={t("Unpin")}>
+                <Tooltip content={t("Unpin")}>
                   <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
                     <CloseIcon />
                   </PinButton>
@@ -279,8 +280,8 @@ const Heading = styled.h3`
   overflow: hidden;
 
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 export default observer(DocumentCard);

app/components/DocumentContext.ts

@@ -1,5 +1,6 @@
 import * as React from "react";
 import { Editor } from "~/editor";
+import useIdle from "~/hooks/useIdle";
 
 export type DocumentContextValue = {
   /** The current editor instance for this document. */
@@ -16,4 +17,21 @@ const DocumentContext = React.createContext<DocumentContextValue>({
 
 export const useDocumentContext = () => React.useContext(DocumentContext);
 
+const activityEvents = [
+  "click",
+  "mousemove",
+  "DOMMouseScroll",
+  "mousewheel",
+  "mousedown",
+  "touchstart",
+  "touchmove",
+  "focus",
+];
+
+export const useEditingFocus = () => {
+  const { editor } = useDocumentContext();
+  const isIdle = useIdle(3000, activityEvents);
+  return isIdle && !!editor?.view.hasFocus();
+};
+
 export default DocumentContext;

app/components/DocumentExplorer.tsx

@@ -1,5 +1,10 @@
 import FuzzySearch from "fuzzy-search";
-import { includes, difference, concat, filter, map, fill } from "lodash";
+import concat from "lodash/concat";
+import difference from "lodash/difference";
+import fill from "lodash/fill";
+import filter from "lodash/filter";
+import includes from "lodash/includes";
+import map from "lodash/map";
 import { observer } from "mobx-react";
 import { StarredIcon, DocumentIcon } from "outline-icons";
 import * as React from "react";
@@ -10,7 +15,6 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
-import parseTitle from "@shared/utils/parseTitle";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
@@ -200,84 +204,86 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
     }
   };
 
-  const ListItem = ({
-    index,
-    data,
-    style,
-  }: {
-    index: number;
-    data: NavigationNode[];
-    style: React.CSSProperties;
-  }) => {
-    const node = data[index];
-    const isCollection = node.type === "collection";
-    let icon, title, path;
+  const ListItem = observer(
+    ({
+      index,
+      data,
+      style,
+    }: {
+      index: number;
+      data: NavigationNode[];
+      style: React.CSSProperties;
+    }) => {
+      const node = data[index];
+      const isCollection = node.type === "collection";
+      let icon, title: string, emoji: string | undefined, path;
 
-    if (isCollection) {
-      const col = collections.get(node.collectionId as string);
-      icon = col && (
-        <CollectionIcon collection={col} expanded={isExpanded(index)} />
-      );
-      title = node.title;
-    } else {
-      const doc = documents.get(node.id);
-      const { strippedTitle, emoji } = parseTitle(node.title);
-      title = strippedTitle;
-
-      if (emoji) {
-        icon = <EmojiIcon emoji={emoji} />;
-      } else if (doc?.isStarred) {
-        icon = <StarredIcon color={theme.yellow} />;
+      if (isCollection) {
+        const col = collections.get(node.collectionId as string);
+        icon = col && (
+          <CollectionIcon collection={col} expanded={isExpanded(index)} />
+        );
+        title = node.title;
       } else {
-        icon = <DocumentIcon color={theme.textSecondary} />;
+        const doc = documents.get(node.id);
+        emoji = doc?.emoji ?? node.emoji;
+        title = doc?.title ?? node.title;
+
+        if (emoji) {
+          icon = <EmojiIcon emoji={emoji} />;
+        } else if (doc?.isStarred) {
+          icon = <StarredIcon color={theme.yellow} />;
+        } else {
+          icon = <DocumentIcon color={theme.textSecondary} />;
+        }
+
+        path = ancestors(node)
+          .map((a) => a.title)
+          .join(" / ");
       }
 
-      path = ancestors(node)
-        .map((a) => parseTitle(a.title).strippedTitle)
-        .join(" / ");
+      return searchTerm ? (
+        <DocumentExplorerSearchResult
+          selected={isSelected(index)}
+          active={activeNode === index}
+          style={{
+            ...style,
+            top: (style.top as number) + VERTICAL_PADDING,
+            left: (style.left as number) + HORIZONTAL_PADDING,
+            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+          }}
+          onPointerMove={() => setActiveNode(index)}
+          onClick={() => toggleSelect(index)}
+          icon={icon}
+          title={title}
+          path={path}
+        />
+      ) : (
+        <DocumentExplorerNode
+          style={{
+            ...style,
+            top: (style.top as number) + VERTICAL_PADDING,
+            left: (style.left as number) + HORIZONTAL_PADDING,
+            width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+          }}
+          onPointerMove={() => setActiveNode(index)}
+          onClick={() => toggleSelect(index)}
+          onDisclosureClick={(ev) => {
+            ev.stopPropagation();
+            toggleCollapse(index);
+          }}
+          selected={isSelected(index)}
+          active={activeNode === index}
+          expanded={isExpanded(index)}
+          icon={icon}
+          title={title}
+          depth={node.depth as number}
+          hasChildren={hasChildren(index)}
+          ref={itemRefs[index]}
+        />
+      );
     }
-
-    return searchTerm ? (
-      <DocumentExplorerSearchResult
-        selected={isSelected(index)}
-        active={activeNode === index}
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        icon={icon}
-        title={title}
-        path={path}
-      />
-    ) : (
-      <DocumentExplorerNode
-        style={{
-          ...style,
-          top: (style.top as number) + VERTICAL_PADDING,
-          left: (style.left as number) + HORIZONTAL_PADDING,
-          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
-        }}
-        onPointerMove={() => setActiveNode(index)}
-        onClick={() => toggleSelect(index)}
-        onDisclosureClick={(ev) => {
-          ev.stopPropagation();
-          toggleCollapse(index);
-        }}
-        selected={isSelected(index)}
-        active={activeNode === index}
-        expanded={isExpanded(index)}
-        icon={icon}
-        title={title}
-        depth={node.depth as number}
-        hasChildren={hasChildren(index)}
-        ref={itemRefs[index]}
-      />
-    );
-  };
+  );
 
   const focusSearchInput = () => {
     inputSearchRef.current?.focus();
@@ -383,7 +389,9 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
           </AutoSizer>
         ) : (
           <FlexContainer>
-            <Text type="secondary">{t("No results found")}.</Text>
+            <Text as="p" type="secondary">
+              {t("No results found")}.
+            </Text>
           </FlexContainer>
         )}
       </ListContainer>

app/components/DocumentListItem.tsx

@@ -1,5 +1,4 @@
 import { observer } from "mobx-react";
-import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
@@ -9,7 +8,6 @@ import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
-import Button from "~/components/Button";
 import DocumentMeta from "~/components/DocumentMeta";
 import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
@@ -18,12 +16,11 @@ import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { hover } from "~/styles";
-import { newDocumentPath } from "~/utils/routeHelpers";
+import { documentPath } from "~/utils/routeHelpers";
+import EmojiIcon from "./Icons/EmojiIcon";
 
 type Props = {
   document: Document;
@@ -51,7 +48,6 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   const {
@@ -71,8 +67,6 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar =
     !document.isDraft && !document.isArchived && !document.isTemplate;
-  const can = usePolicy(team);
-  const canCollection = usePolicy(document.collectionId);
 
   return (
     <CompositeItem
@@ -83,7 +77,7 @@ function DocumentListItem(
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
-        pathname: document.url,
+        pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
         },
@@ -92,6 +86,12 @@ function DocumentListItem(
     >
       <Content>
         <Heading dir={document.dir}>
+          {document.emoji && (
+            <>
+              <EmojiIcon emoji={document.emoji} size={24} />
+              &nbsp;
+            </>
+          )}
           <Title
             text={document.titleWithDefault}
             highlight={highlight}
@@ -107,7 +107,7 @@ function DocumentListItem(
           )}
           {document.isDraft && showDraft && (
             <Tooltip
-              tooltip={t("Only visible to you")}
+              content={t("Only visible to you")}
               delay={500}
               placement="top"
             >
@@ -135,25 +135,6 @@ function DocumentListItem(
         />
       </Content>
       <Actions>
-        {document.isTemplate &&
-          !document.isArchived &&
-          !document.isDeleted &&
-          can.createDocument &&
-          canCollection.update && (
-            <>
-              <Button
-                as={Link}
-                to={newDocumentPath(document.collectionId, {
-                  templateId: document.id,
-                })}
-                icon={<PlusIcon />}
-                neutral
-              >
-                {t("New doc")}
-              </Button>
-              &nbsp;
-            </>
-          )}
         <DocumentMenu
           document={document}
           showPin={showPin}
@@ -262,8 +243,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
   margin-bottom: 0.25em;
   white-space: nowrap;
   color: ${s("text")};
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
-    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-family: ${s("fontFamily")};
+  font-weight: 500;
 `;
 
 const StarPositioner = styled(Flex)`
@@ -279,8 +260,8 @@ const Title = styled(Highlight)`
 
 const ResultContext = styled(Highlight)`
   display: block;
-  color: ${s("textTertiary")};
-  font-size: 14px;
+  color: ${s("textSecondary")};
+  font-size: 15px;
   margin-top: -0.25em;
   margin-bottom: 0.25em;
 `;

app/components/DocumentTemplatizeDialog.tsx

@@ -3,9 +3,9 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import { documentPath } from "~/utils/routeHelpers";
 
 type Props = {
@@ -14,7 +14,6 @@ type Props = {
 
 function DocumentTemplatizeDialog({ documentId }: Props) {
   const history = useHistory();
-  const { showToast } = useToasts();
   const { t } = useTranslation();
   const { documents } = useStores();
   const document = documents.get(documentId);
@@ -24,11 +23,9 @@ function DocumentTemplatizeDialog({ documentId }: Props) {
     const template = await document?.templatize();
     if (template) {
       history.push(documentPath(template));
-      showToast(t("Template created, go ahead and customize it"), {
-        type: "info",
-      });
+      toast.success(t("Template created, go ahead and customize it"));
     }
-  }, [document, showToast, history, t]);
+  }, [document, history, t]);
 
   return (
     <ConfirmationDialog

app/components/DocumentViews.tsx

@@ -1,13 +1,15 @@
-import { sortBy } from "lodash";
+import compact from "lodash/compact";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateToRelative } from "@shared/utils/date";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import ListItem from "~/components/List/Item";
 import PaginatedList from "~/components/PaginatedList";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 
 type Props = {
@@ -18,6 +20,9 @@ type Props = {
 function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
+  const user = useCurrentUser();
+  const locale = dateLocale(user.language);
+
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
@@ -31,10 +36,10 @@ function DocumentViews({ document, isOpen }: Props) {
   const documentViews = views.inDocument(document.id);
   const sortedViews = sortBy(
     documentViews,
-    (view) => !presentIds.includes(view.user.id)
+    (view) => !presentIds.includes(view.userId)
   );
   const users = React.useMemo(
-    () => sortedViews.map((v) => v.user),
+    () => compact(sortedViews.map((v) => v.user)),
     [sortedViews]
   );
 
@@ -45,16 +50,20 @@ function DocumentViews({ document, isOpen }: Props) {
           aria-label={t("Viewers")}
           items={users}
           renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.user.id === model.id);
+            const view = documentViews.find((v) => v.userId === model.id);
             const isPresent = presentIds.includes(model.id);
             const isEditing = editingIds.includes(model.id);
             const subtitle = isPresent
               ? isEditing
                 ? t("Currently editing")
                 : t("Currently viewing")
-              : t("Viewed {{ timeAgo }} ago", {
+              : t("Viewed {{ timeAgo }}", {
                   timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date()
+                    view ? Date.parse(view.lastViewedAt) : new Date(),
+                    {
+                      addSuffix: true,
+                      locale,
+                    }
                   ),
                 });
             return (

app/components/DuplicateDialog.tsx

@@ -0,0 +1,73 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DocumentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "./Input";
+import Switch from "./Switch";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DuplicateDialog({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const defaultTitle = t(`Copy of {{ documentName }}`, {
+    documentName: document.title,
+  });
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
+  const handleTitleChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(ev.target.value);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const result = await document.duplicate({
+      recursive,
+      title,
+    });
+    onSubmit(result);
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
+      <Input
+        autoFocus
+        autoSelect
+        name="title"
+        label={t("Title")}
+        onChange={handleTitleChange}
+        maxLength={DocumentValidation.maxTitleLength}
+        defaultValue={defaultTitle}
+      />
+      {document.publishedAt && !document.isTemplate && (
+        <Text size="small">
+          <Switch
+            name="recursive"
+            label={t("Include nested documents")}
+            labelPosition="right"
+            checked={recursive}
+            onChange={handleRecursiveChange}
+          />
+        </Text>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);

app/components/Editor.tsx

@@ -1,10 +1,11 @@
-import { deburr, difference, sortBy } from "lodash";
+import deburr from "lodash/deburr";
+import difference from "lodash/difference";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
-import { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
@@ -14,22 +15,18 @@ 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 useCurrentUser from "~/hooks/useCurrentUser";
 import useDictionary from "~/hooks/useDictionary";
+import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
 import useUserLocale from "~/hooks/useUserLocale";
 import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
-import { isModKey } from "~/utils/keyboard";
 import lazyWithRetry from "~/utils/lazyWithRetry";
-import { sharedDocumentPath } from "~/utils/routeHelpers";
-import { isHash } from "~/utils/urls";
 import DocumentBreadcrumb from "./DocumentBreadcrumb";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
@@ -41,14 +38,13 @@ export type Props = Optional<
   | "onClickLink"
   | "embeds"
   | "dictionary"
-  | "onShowToast"
   | "extensions"
 > & {
   shareId?: string | undefined;
   embedsDisabled?: boolean;
   onHeadingsChange?: (headings: Heading[]) => void;
   onSynced?: () => Promise<void>;
-  onPublish?: (event: React.MouseEvent) => any;
+  onPublish?: (event: React.MouseEvent) => void;
   editorStyle?: React.CSSProperties;
 };
 
@@ -63,27 +59,14 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   } = props;
   const userLocale = useUserLocale();
   const locale = dateLocale(userLocale);
-  const { auth, comments, documents } = useStores();
-  const { showToast } = useToasts();
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
-  const history = useHistory();
   const localRef = React.useRef<SharedEditor>();
-  const preferences = auth.user?.preferences;
+  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
   const previousHeadings = React.useRef<Heading[] | null>(null);
-  const [activeLinkElement, setActiveLink] =
-    React.useState<HTMLAnchorElement | null>(null);
   const previousCommentIds = React.useRef<string[]>();
 
-  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
-    setActiveLink(element);
-    return false;
-  }, []);
-
-  const handleLinkInactive = React.useCallback(() => {
-    setActiveLink(null);
-  }, []);
-
   const handleSearchLink = React.useCallback(
     async (term: string) => {
       if (isInternalUrl(term)) {
@@ -120,7 +103,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       const results = await documents.searchTitles(term);
 
       return sortBy(
-        results.map((document: Document) => ({
+        results.map(({ document }) => ({
           title: document.title,
           subtitle: <DocumentBreadcrumb document={document} onlyText />,
           url: document.url,
@@ -133,7 +116,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
             : 1
       );
     },
-    [documents]
+    [locale, documents]
   );
 
   const handleUploadFile = React.useCallback(
@@ -147,47 +130,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
     [id]
   );
 
-  const handleClickLink = React.useCallback(
-    (href: string, event: MouseEvent) => {
-      // on page hash
-      if (isHash(href)) {
-        window.location.href = href;
-        return;
-      }
-
-      if (isInternalUrl(href) && !isModKey(event) && !event.shiftKey) {
-        // relative
-        let navigateTo = href;
-
-        // probably absolute
-        if (href[0] !== "/") {
-          try {
-            const url = new URL(href);
-            navigateTo = url.pathname + url.hash;
-          } catch (err) {
-            navigateTo = href;
-          }
-        }
-
-        // Link to our own API should be opened in a new tab, not in the app
-        if (navigateTo.startsWith("/api/")) {
-          window.open(href, "_blank");
-          return;
-        }
-
-        // If we're navigating to an internal document link then prepend the
-        // share route to the URL so that the document is loaded in context
-        if (shareId && navigateTo.includes("/doc/")) {
-          navigateTo = sharedDocumentPath(shareId, navigateTo);
-        }
-
-        history.push(navigateTo);
-      } else if (href) {
-        window.open(href, "_blank");
-      }
-    },
-    [history, shareId]
-  );
+  const { handleClickLink } = useEditorClickHandlers({ shareId });
 
   const focusAtEnd = React.useCallback(() => {
     localRef?.current?.focusAtEnd();
@@ -233,11 +176,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
       );
 
-      insertFiles(view, event, pos, files, {
+      return insertFiles(view, event, pos, files, {
         uploadFile: handleUploadFile,
         onFileUploadStart: props.onFileUploadStart,
         onFileUploadStop: props.onFileUploadStop,
-        onShowToast: showToast,
         dictionary,
         isAttachment,
       });
@@ -248,7 +190,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       props.onFileUploadStop,
       dictionary,
       handleUploadFile,
-      showToast,
     ]
   );
 
@@ -332,12 +273,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
         <LazyLoadedEditor
           ref={mergeRefs([ref, localRef, handleRefChanged])}
           uploadFile={handleUploadFile}
-          onShowToast={showToast}
           embeds={embeds}
           userPreferences={preferences}
           dictionary={dictionary}
           {...props}
-          onHoverLink={handleLinkActive}
           onClickLink={handleClickLink}
           onSearchLink={handleSearchLink}
           onChange={handleChange}
@@ -352,12 +291,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
             minHeight={props.editorStyle.paddingBottom}
           />
         )}
-        {activeLinkElement && !shareId && (
-          <HoverPreview
-            element={activeLinkElement}
-            onClose={handleLinkInactive}
-          />
-        )}
       </>
     </ErrorBoundary>
   );

app/components/EmojiPicker/components.tsx

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import Button from "~/components/Button";
+import { hover } from "~/styles";
+import Flex from "../Flex";
+
+export const EmojiButton = styled(Button)`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+
+  &: ${hover},
+  &:active,
+  &[aria-expanded= "true"] {
+    opacity: 1 !important;
+  }
+`;
+
+export const Emoji = styled(Flex)<{ size?: number }>`
+  line-height: 1.6;
+  ${(props) => (props.size ? `font-size: ${props.size}px` : "")}
+`;

app/components/EmojiPicker/index.tsx

@@ -0,0 +1,269 @@
+import data from "@emoji-mart/data";
+import Picker from "@emoji-mart/react";
+import { SmileyIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
+import styled, { useTheme } from "styled-components";
+import { depths, s } from "@shared/styles";
+import { toRGB } from "@shared/utils/color";
+import Button from "~/components/Button";
+import Popover from "~/components/Popover";
+import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { Emoji, EmojiButton } from "./components";
+
+/* Locales supported by emoji-mart */
+const supportedLocales = [
+  "en",
+  "ar",
+  "be",
+  "cs",
+  "de",
+  "es",
+  "fa",
+  "fi",
+  "fr",
+  "hi",
+  "it",
+  "ja",
+  "kr",
+  "nl",
+  "pl",
+  "pt",
+  "ru",
+  "sa",
+  "tr",
+  "uk",
+  "vi",
+  "zh",
+];
+
+/**
+ * React hook to derive emoji picker's theme from UI theme
+ *
+ * @returns {string} Theme to use for emoji picker
+ */
+function usePickerTheme(): string {
+  const { ui } = useStores();
+  const { theme } = ui;
+
+  if (theme === "system") {
+    return "auto";
+  }
+
+  return theme;
+}
+
+type Props = {
+  /** The selected emoji, if any */
+  value?: string | null;
+  /** Callback when an emoji is selected */
+  onChange: (emoji: string | null) => void | Promise<void>;
+  /** Callback when the picker is opened */
+  onOpen?: () => void;
+  /** Callback when the picker is closed */
+  onClose?: () => void;
+  /** Callback when the picker is clicked outside of */
+  onClickOutside: () => void;
+  /** Whether to auto focus the search input on open */
+  autoFocus?: boolean;
+  /** Class name to apply to the trigger button */
+  className?: string;
+};
+
+function EmojiPicker({
+  value,
+  onOpen,
+  onClose,
+  onChange,
+  onClickOutside,
+  autoFocus,
+  className,
+}: Props) {
+  const { t } = useTranslation();
+  const pickerTheme = usePickerTheme();
+  const theme = useTheme();
+  const locale = useUserLocale(true) ?? "en";
+
+  const popover = usePopoverState({
+    placement: "bottom-start",
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+
+  const [emojisPerLine, setEmojisPerLine] = React.useState(9);
+
+  const pickerRef = React.useRef<HTMLDivElement>(null);
+
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [popover.visible, onOpen, onClose]);
+
+  React.useEffect(() => {
+    if (popover.visible && pickerRef.current) {
+      // 28 is picker's observed width when perLine is set to 0
+      // and 36 is the default emojiButtonSize
+      // Ref: https://github.com/missive/emoji-mart#options--props
+      setEmojisPerLine(Math.floor((pickerRef.current.clientWidth - 28) / 36));
+    }
+  }, [popover.visible]);
+
+  const handleEmojiChange = React.useCallback(
+    async (emoji) => {
+      popover.hide();
+      await onChange(emoji ? emoji.native : null);
+    },
+    [popover, onChange]
+  );
+
+  const handleClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (popover.visible) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    },
+    [popover]
+  );
+
+  const handleClickOutside = React.useCallback(() => {
+    // It was observed that onClickOutside got triggered
+    // even when the picker wasn't open or opened at all.
+    // Hence, this guard here...
+    if (popover.visible) {
+      onClickOutside();
+    }
+  }, [popover.visible, onClickOutside]);
+
+  // Auto focus search input when picker is opened
+  React.useLayoutEffect(() => {
+    if (autoFocus && popover.visible) {
+      requestAnimationFrame(() => {
+        const searchInput = pickerRef.current
+          ?.querySelector("em-emoji-picker")
+          ?.shadowRoot?.querySelector(
+            "input[type=search]"
+          ) as HTMLInputElement | null;
+        searchInput?.focus();
+      });
+    }
+  }, [autoFocus, popover.visible]);
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
+          <EmojiButton
+            {...props}
+            className={className}
+            onClick={handleClick}
+            icon={
+              value ? (
+                <Emoji size={32} align="center" justify="center">
+                  {value}
+                </Emoji>
+              ) : (
+                <StyledSmileyIcon size={32} color={theme.textTertiary} />
+              )
+            }
+            neutral
+            borderOnHover
+          />
+        )}
+      </PopoverDisclosure>
+      <PickerPopover
+        {...popover}
+        tabIndex={0}
+        // This prevents picker from closing when any of its
+        // children are focused, e.g, clicking on search bar or
+        // a click on skin tone button
+        onClick={(e) => e.stopPropagation()}
+        width={352}
+        aria-label={t("Emoji Picker")}
+      >
+        {popover.visible && (
+          <>
+            {value && (
+              <RemoveButton neutral onClick={() => handleEmojiChange(null)}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+            <PickerStyles ref={pickerRef}>
+              <Picker
+                // https://github.com/missive/emoji-mart/issues/800
+                locale={
+                  locale === "ko"
+                    ? "kr"
+                    : supportedLocales.includes(locale)
+                    ? locale
+                    : "en"
+                }
+                data={data}
+                onEmojiSelect={handleEmojiChange}
+                theme={pickerTheme}
+                previewPosition="none"
+                perLine={emojisPerLine}
+                onClickOutside={handleClickOutside}
+              />
+            </PickerStyles>
+          </>
+        )}
+      </PickerPopover>
+    </>
+  );
+}
+
+const StyledSmileyIcon = styled(SmileyIcon)`
+  flex-shrink: 0;
+
+  @media print {
+    display: none;
+  }
+`;
+
+const RemoveButton = styled(Button)`
+  margin-left: -12px;
+  margin-bottom: 8px;
+  border-radius: 6px;
+  height: 24px;
+  font-size: 13px;
+
+  > :first-child {
+    min-height: unset;
+    line-height: unset;
+  }
+`;
+
+const PickerPopover = styled(Popover)`
+  z-index: ${depths.popover};
+  > :first-child {
+    padding-top: 8px;
+    padding-bottom: 0;
+    max-height: 488px;
+    overflow: unset;
+  }
+`;
+
+const PickerStyles = styled.div`
+  margin-left: -24px;
+  margin-right: -24px;
+  em-emoji-picker {
+    --shadow: none;
+    --font-family: ${s("fontFamily")};
+    --rgb-background: ${(props) => toRGB(props.theme.menuBackground)};
+    --rgb-accent: ${(props) => toRGB(props.theme.accent)};
+    --border-radius: 6px;
+    margin-left: auto;
+    margin-right: auto;
+    min-height: 443px;
+  }
+`;
+
+export default EmojiPicker;

app/components/ErrorBoundary.tsx

@@ -82,7 +82,7 @@ class ErrorBoundary extends React.Component<Props> {
                 </h1>
               </>
             )}
-            <Text type="secondary">
+            <Text as="p" type="secondary">
               <Trans>
                 Sorry, part of the application failed to load. This may be
                 because it was updated since you opened the tab or because of a
@@ -106,7 +106,7 @@ class ErrorBoundary extends React.Component<Props> {
               </h1>
             </>
           )}
-          <Text type="secondary">
+          <Text as="p" type="secondary">
             <Trans
               defaults="Sorry, an unrecoverable error occurred{{notified}}. Please try reloading the page, it may have been a temporary glitch."
               values={{
@@ -121,11 +121,11 @@ class ErrorBoundary extends React.Component<Props> {
             <Button onClick={this.handleReload}>{t("Reload")}</Button>{" "}
             {this.showDetails ? (
               <Button onClick={this.handleReportBug} neutral>
-                <Trans>Report a Bug</Trans>…
+                <Trans>Report a bug</Trans>…
               </Button>
             ) : (
               <Button onClick={this.handleShowDetails} neutral>
-                <Trans>Show Detail</Trans>…
+                <Trans>Show detail</Trans>…
               </Button>
             )}
           </p>

app/components/ExportDialog.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
+import { toast } from "sonner";
 import styled from "styled-components";
 import { FileOperationFormat, NotificationEventType } from "@shared/types";
 import Collection from "~/models/Collection";
@@ -10,7 +11,8 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import useToasts from "~/hooks/useToasts";
+import history from "~/utils/history";
+import { settingsPath } from "~/utils/routeHelpers";
 
 type Props = {
   collection?: Collection;
@@ -24,7 +26,6 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const [includeAttachments, setIncludeAttachments] =
     React.useState<boolean>(true);
   const user = useCurrentUser();
-  const { showToast } = useToasts();
   const { collections } = useStores();
   const { t } = useTranslation();
   const appName = env.APP_NAME;
@@ -46,11 +47,22 @@ function ExportDialog({ collection, onSubmit }: Props) {
   const handleSubmit = async () => {
     if (collection) {
       await collection.export(format, includeAttachments);
+      toast.success(t("Export started"), {
+        description: t(`Your file will be available in {{ location }} soon`, {
+          location: `"${t("Settings")} > ${t("Export")}"`,
+        }),
+        action: {
+          label: t("View"),
+          onClick: () => {
+            history.push(settingsPath("export"));
+          },
+        },
+      });
     } else {
       await collections.export(format, includeAttachments);
+      toast.success(t("Export started"));
     }
     onSubmit();
-    showToast(t("Export started"), { type: "success" });
   };
 
   const items = [
@@ -83,7 +95,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
   return (
     <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
       {collection && (
-        <Text>
+        <Text as="p">
           <Trans
             defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
             values={{
@@ -108,7 +120,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
               onChange={handleFormatChange}
             />
             <div>
-              <Text size="small" weight="bold">
+              <Text as="p" size="small" weight="bold">
                 {item.title}
               </Text>
               <Text size="small">{item.description}</Text>
@@ -125,7 +137,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
           onChange={handleIncludeAttachmentsChange}
         />
         <div>
-          <Text size="small" weight="bold">
+          <Text as="p" size="small" weight="bold">
             {t("Include attachments")}
           </Text>
           <Text size="small">

app/components/Facepile.tsx

@@ -32,9 +32,12 @@ function Facepile({
           </span>
         </More>
       )}
-      {users.slice(0, limit).map((user) => (
-        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
-      ))}
+      {users
+        .filter(Boolean)
+        .slice(0, limit)
+        .map((user) => (
+          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+        ))}
     </Avatars>
   );
 }

app/components/FilterOptions.tsx

@@ -80,7 +80,7 @@ const Note = styled(Text)`
   margin-bottom: 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
   color: ${s("textTertiary")};
 `;
 

app/components/Header.tsx

@@ -1,4 +1,4 @@
-import { throttle } from "lodash";
+import throttle from "lodash/throttle";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -6,6 +6,7 @@ import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
+import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
@@ -14,16 +15,16 @@ import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
-import { supportsPassiveListener } from "~/utils/browser";
 
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
   actions?: React.ReactNode;
   hasSidebar?: boolean;
+  className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar }: Props) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
@@ -54,6 +55,7 @@ function Header({ left, title, actions, hasSidebar }: Props) {
     <Wrapper
       align="center"
       shrink={false}
+      className={className}
       $passThrough={passThrough}
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >

app/components/Heading.ts

@@ -1,9 +1,10 @@
 import styled from "styled-components";
 
-const Heading = styled.h1<{ centered?: boolean }>`
+const Heading = styled.h1<{ as?: string; centered?: boolean }>`
   display: flex;
   align-items: center;
   user-select: none;
+  ${(props) => (props.as ? "" : "margin-top: 6vh; font-weight: 600;")}
   ${(props) => (props.centered ? "text-align: center;" : "")}
 `;
 

app/components/Highlight.tsx

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

app/components/HoverPreview/Components.tsx

@@ -4,7 +4,7 @@ import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Text from "~/components/Text";
 
-export const CARD_MARGIN = 16;
+export const CARD_MARGIN = 10;
 
 const NUMBER_OF_LINES = 10;
 
@@ -17,7 +17,7 @@ const StyledText = styled(Text)`
 `;
 
 export const Preview = styled(Link)`
-  cursor: ${(props: any) =>
+  cursor: ${(props: { as?: string }) =>
     props.as === "div" ? "default" : "var(--pointer)"};
   border-radius: 4px;
   box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.3),

app/components/HoverPreview/HoverPreview.tsx

@@ -2,13 +2,14 @@ import { m } from "framer-motion";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths, s } from "@shared/styles";
+import { depths } from "@shared/styles";
 import { UnfurlType } from "@shared/types";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import useEventListener from "~/hooks/useEventListener";
 import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
+import usePrevious from "~/hooks/usePrevious";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
@@ -17,131 +18,77 @@ import HoverPreviewDocument from "./HoverPreviewDocument";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
 
-const DELAY_OPEN = 300;
 const DELAY_CLOSE = 600;
+const POINTER_HEIGHT = 22;
+const POINTER_WIDTH = 22;
 
 type Props = {
-  /* The HTML element that is being hovered over */
-  element: HTMLAnchorElement;
-  /* A callback on close of the hover preview */
+  /** The HTML element that is being hovered over, or null if none. */
+  element: HTMLElement | null;
+  /** A callback on close of the hover preview. */
   onClose: () => void;
 };
 
-function HoverPreviewInternal({ element, onClose }: Props) {
-  const url = element.href || element.dataset.url;
+enum Direction {
+  UP,
+  DOWN,
+}
+
+function HoverPreviewDesktop({ element, onClose }: Props) {
+  const url = element?.getAttribute("href") || element?.dataset.url;
+  const previousUrl = usePrevious(url, true);
   const [isVisible, setVisible] = React.useState(false);
   const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
-  const timerOpen = React.useRef<ReturnType<typeof setTimeout>>();
   const cardRef = React.useRef<HTMLDivElement>(null);
-  const stores = useStores();
-  const [cardLeft, setCardLeft] = React.useState(0);
-  const [cardTop, setCardTop] = React.useState(0);
-  const [pointerOffset, setPointerOffset] = React.useState(0);
-
-  React.useLayoutEffect(() => {
-    if (isVisible && cardRef.current) {
-      const elem = element.getBoundingClientRect();
-      const card = cardRef.current.getBoundingClientRect();
-
-      const top = elem.bottom + window.scrollY;
-      setCardTop(top);
-
-      let left = elem.left;
-      let pointerOffset = elem.width / 2;
-      if (left + card.width > window.innerWidth) {
-        // shift card leftwards by the amount it went out of screen
-        let shiftBy = left + card.width - window.innerWidth;
-        // shift a littler further to leave some margin between card and window boundary
-        shiftBy += CARD_MARGIN;
-        left -= shiftBy;
-
-        // shift pointer rightwards by same amount so as to position it back correctly
-        pointerOffset += shiftBy;
-      }
-      setCardLeft(left);
-
-      setPointerOffset(pointerOffset);
-    }
-  }, [isVisible, element]);
-
-  const { data, request, loading } = useRequest(
-    React.useCallback(
-      () =>
-        client.post("/urls.unfurl", {
-          url,
-          documentId: stores.ui.activeDocumentId,
-        }),
-      [url, stores.ui.activeDocumentId]
-    )
-  );
-
-  React.useEffect(() => {
-    if (url) {
-      stopOpenTimer();
-      setVisible(false);
-
-      void request();
-    }
-  }, [url, request]);
-
-  const stopOpenTimer = () => {
-    if (timerOpen.current) {
-      clearTimeout(timerOpen.current);
-      timerOpen.current = undefined;
-    }
-  };
+  const { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir } =
+    useHoverPosition({
+      cardRef,
+      element,
+      isVisible,
+    });
 
   const closePreview = React.useCallback(() => {
-    if (isVisible) {
-      stopOpenTimer();
-      setVisible(false);
-      onClose();
-    }
-  }, [isVisible, onClose]);
+    setVisible(false);
+    onClose();
+  }, [onClose]);
 
-  useOnClickOutside(cardRef, closePreview);
-  useKeyDown("Escape", closePreview);
-  useEventListener("scroll", closePreview, window, { capture: true });
-
-  const stopCloseTimer = () => {
+  const stopCloseTimer = React.useCallback(() => {
     if (timerClose.current) {
       clearTimeout(timerClose.current);
       timerClose.current = undefined;
     }
-  };
-
-  const startOpenTimer = () => {
-    if (!timerOpen.current) {
-      timerOpen.current = setTimeout(() => setVisible(true), DELAY_OPEN);
-    }
-  };
+  }, []);
 
   const startCloseTimer = React.useCallback(() => {
-    stopOpenTimer();
     timerClose.current = setTimeout(closePreview, DELAY_CLOSE);
   }, [closePreview]);
 
+  // Open and close the preview when the element changes.
+  React.useEffect(() => {
+    if (element) {
+      setVisible(true);
+    } else {
+      startCloseTimer();
+    }
+  }, [startCloseTimer, element]);
+
+  // Close the preview on Escape, scroll, or click outside.
+  useOnClickOutside(cardRef, closePreview);
+  useKeyDown("Escape", closePreview);
+  useEventListener("scroll", closePreview, window, { capture: true });
+
+  // Ensure that the preview stays open while the user is hovering over the card.
   React.useEffect(() => {
     const card = cardRef.current;
 
-    if (data) {
-      startOpenTimer();
-
+    if (isVisible) {
       if (card) {
         card.addEventListener("mouseenter", stopCloseTimer);
         card.addEventListener("mouseleave", startCloseTimer);
       }
-
-      element.addEventListener("mouseout", startCloseTimer);
-      element.addEventListener("mouseover", stopCloseTimer);
-      element.addEventListener("mouseover", startOpenTimer);
     }
 
     return () => {
-      element.removeEventListener("mouseout", startCloseTimer);
-      element.removeEventListener("mouseover", stopCloseTimer);
-      element.removeEventListener("mouseover", startOpenTimer);
-
       if (card) {
         card.removeEventListener("mouseenter", stopCloseTimer);
         card.removeEventListener("mouseleave", startCloseTimer);
@@ -149,7 +96,83 @@ function HoverPreviewInternal({ element, onClose }: Props) {
 
       stopCloseTimer();
     };
-  }, [element, startCloseTimer, data]);
+  }, [element, startCloseTimer, isVisible, stopCloseTimer]);
+
+  const displayUrl = url ?? previousUrl;
+
+  if (!isVisible || !displayUrl) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <Position top={cardTop} left={cardLeft} ref={cardRef} aria-hidden>
+        <DataLoader url={displayUrl}>
+          {(data) => (
+            <Animate
+              initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
+              animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
+            >
+              {data.type === UnfurlType.Mention ? (
+                <HoverPreviewMention
+                  url={data.thumbnailUrl}
+                  title={data.title}
+                  info={data.meta.info}
+                  color={data.meta.color}
+                />
+              ) : data.type === UnfurlType.Document ? (
+                <HoverPreviewDocument
+                  id={data.meta.id}
+                  url={data.url}
+                  title={data.title}
+                  description={data.description}
+                  info={data.meta.info}
+                />
+              ) : (
+                <HoverPreviewLink
+                  url={data.url}
+                  thumbnailUrl={data.thumbnailUrl}
+                  title={data.title}
+                  description={data.description}
+                />
+              )}
+              <Pointer
+                top={pointerTop}
+                left={pointerLeft}
+                direction={pointerDir}
+              />
+            </Animate>
+          )}
+        </DataLoader>
+      </Position>
+    </Portal>
+  );
+}
+
+function DataLoader({
+  url,
+  children,
+}: {
+  url: string;
+  children: (data: any) => React.ReactNode;
+}) {
+  const { ui } = useStores();
+  const { data, request, loading } = useRequest(
+    React.useCallback(
+      () =>
+        client.post("/urls.unfurl", {
+          url,
+          documentId: ui.activeDocumentId,
+        }),
+      [url, ui.activeDocumentId]
+    )
+  );
+
+  React.useEffect(() => {
+    if (url) {
+      void request();
+    }
+  }, [url, request]);
 
   if (loading) {
     return <LoadingIndicator />;
@@ -159,46 +182,7 @@ function HoverPreviewInternal({ element, onClose }: Props) {
     return null;
   }
 
-  return (
-    <Portal>
-      <Position top={cardTop} left={cardLeft} aria-hidden>
-        {isVisible ? (
-          <Animate
-            initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
-            animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
-          >
-            {data.type === UnfurlType.Mention ? (
-              <HoverPreviewMention
-                ref={cardRef}
-                url={data.thumbnailUrl}
-                title={data.title}
-                info={data.meta.info}
-                color={data.meta.color}
-              />
-            ) : data.type === UnfurlType.Document ? (
-              <HoverPreviewDocument
-                ref={cardRef}
-                id={data.meta.id}
-                url={data.url}
-                title={data.title}
-                description={data.description}
-                info={data.meta.info}
-              />
-            ) : (
-              <HoverPreviewLink
-                ref={cardRef}
-                url={data.url}
-                thumbnailUrl={data.thumbnailUrl}
-                title={data.title}
-                description={data.description}
-              />
-            )}
-            <Pointer offset={pointerOffset} />
-          </Animate>
-        ) : null}
-      </Position>
-    </Portal>
-  );
+  return <>{children(data)}</>;
 }
 
 function HoverPreview({ element, ...rest }: Props) {
@@ -207,7 +191,64 @@ function HoverPreview({ element, ...rest }: Props) {
     return null;
   }
 
-  return <HoverPreviewInternal {...rest} element={element} />;
+  return <HoverPreviewDesktop {...rest} element={element} />;
+}
+
+function useHoverPosition({
+  cardRef,
+  element,
+  isVisible,
+}: {
+  cardRef: React.RefObject<HTMLDivElement>;
+  element: HTMLElement | null;
+  isVisible: boolean;
+}) {
+  const [cardLeft, setCardLeft] = React.useState(0);
+  const [cardTop, setCardTop] = React.useState(0);
+  const [pointerLeft, setPointerLeft] = React.useState(0);
+  const [pointerTop, setPointerTop] = React.useState(0);
+  const [pointerDir, setPointerDir] = React.useState(Direction.UP);
+
+  React.useLayoutEffect(() => {
+    if (isVisible && element && cardRef.current) {
+      const elem = element.getBoundingClientRect();
+      const card = cardRef.current.getBoundingClientRect();
+
+      let cTop = elem.bottom + window.scrollY + CARD_MARGIN;
+      let pTop = -POINTER_HEIGHT;
+      let pDir = Direction.UP;
+      if (cTop + card.height > window.innerHeight + window.scrollY) {
+        // shift card upwards if it goes out of screen
+        const bottom = elem.top + window.scrollY;
+        cTop = bottom - card.height;
+        // shift a little further to leave some margin between card and element boundary
+        cTop -= CARD_MARGIN;
+        // pointer should be shifted downwards to align with card's bottom
+        pTop = card.height;
+        pDir = Direction.DOWN;
+      }
+      setCardTop(cTop);
+      setPointerTop(pTop);
+      setPointerDir(pDir);
+
+      let cLeft = elem.left;
+      let pLeft = elem.width / 2;
+      if (cLeft + card.width > window.innerWidth) {
+        // shift card leftwards by the amount it went out of screen
+        let shiftBy = cLeft + card.width - window.innerWidth;
+        // shift a little further to leave some margin between card and window boundary
+        shiftBy += CARD_MARGIN;
+        cLeft -= shiftBy;
+
+        // shift pointer rightwards by same amount so as to position it back correctly
+        pLeft += shiftBy;
+      }
+      setCardLeft(cLeft);
+      setPointerLeft(pLeft);
+    }
+  }, [isVisible, cardRef, element]);
+
+  return { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir };
 }
 
 const Animate = styled(m.div)`
@@ -217,7 +258,6 @@ const Animate = styled(m.div)`
 `;
 
 const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
-  margin-top: 10px;
   position: ${({ fixed }) => (fixed ? "fixed" : "absolute")};
   z-index: ${depths.hoverPreview};
   display: flex;
@@ -227,11 +267,11 @@ const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
   ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
 `;
 
-const Pointer = styled.div<{ offset: number }>`
-  top: -22px;
-  left: ${(props) => props.offset}px;
-  width: 22px;
-  height: 22px;
+const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
+  top: ${(props) => props.top}px;
+  left: ${(props) => props.left}px;
+  width: ${POINTER_WIDTH}px;
+  height: ${POINTER_HEIGHT}px;
   position: absolute;
   transform: translateX(-50%);
   pointer-events: none;
@@ -241,20 +281,26 @@ const Pointer = styled.div<{ offset: number }>`
     content: "";
     display: inline-block;
     position: absolute;
-    bottom: 0;
-    right: 0;
+    ${({ direction }) => (direction === Direction.UP ? "bottom: 0" : "top: 0")};
+    ${({ direction }) => (direction === Direction.UP ? "right: 0" : "left: 0")};
   }
 
   &:before {
     border: 8px solid transparent;
-    border-bottom-color: ${(props) =>
-      props.theme.menuBorder || "rgba(0, 0, 0, 0.1)"};
-    right: -1px;
+    ${({ direction, theme }) =>
+      direction === Direction.UP
+        ? `border-bottom-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`
+        : `border-top-color: ${theme.menuBorder || "rgba(0, 0, 0, 0.1)"}`};
+    ${({ direction }) =>
+      direction === Direction.UP ? "right: -1px" : "left: -1px"};
   }
 
   &:after {
     border: 7px solid transparent;
-    border-bottom-color: ${s("menuBackground")};
+    ${({ direction, theme }) =>
+      direction === Direction.UP
+        ? `border-bottom-color: ${theme.menuBackground}`
+        : `border-top-color: ${theme.menuBackground}`};
   }
 `;
 

app/components/HoverPreview/HoverPreviewLink.tsx

@@ -26,9 +26,9 @@ const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
 ) {
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column>
+      <Flex column ref={ref}>
         {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
-        <Card ref={ref}>
+        <Card>
           <CardContent>
             <Flex column>
               <Title>{title}</Title>

app/components/IconPicker.tsx

@@ -1,263 +1,140 @@
-import {
-  BookmarkedIcon,
-  BicycleIcon,
-  CollectionIcon,
-  CoinsIcon,
-  AcademicCapIcon,
-  BeakerIcon,
-  BuildingBlocksIcon,
-  CameraIcon,
-  CloudIcon,
-  CodeIcon,
-  EditIcon,
-  EmailIcon,
-  EyeIcon,
-  GlobeIcon,
-  InfoIcon,
-  ImageIcon,
-  LeafIcon,
-  LightBulbIcon,
-  MathIcon,
-  MoonIcon,
-  NotepadIcon,
-  PadlockIcon,
-  PaletteIcon,
-  PromoteIcon,
-  QuestionMarkIcon,
-  SportIcon,
-  SunIcon,
-  TargetIcon,
-  TerminalIcon,
-  ToolsIcon,
-  VehicleIcon,
-  WarningIcon,
-  DatabaseIcon,
-  SmileyIcon,
-  LightningIcon,
-} from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { useMenuState, MenuButton, MenuItem } from "reakit/Menu";
+import { PopoverDisclosure, usePopoverState } from "reakit";
+import { MenuItem } from "reakit/Menu";
 import styled, { useTheme } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
-import ContextMenu from "~/components/ContextMenu";
 import Flex from "~/components/Flex";
-import { LabelText } from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import DelayedMount from "./DelayedMount";
+import { IconLibrary } from "./Icons/IconLibrary";
+import Popover from "./Popover";
 
-const style = {
-  width: 30,
-  height: 30,
-};
+const icons = IconLibrary.mapping;
 
 const TwitterPicker = lazyWithRetry(
   () => import("react-color/lib/components/twitter/Twitter")
 );
 
-export const icons = {
-  academicCap: {
-    component: AcademicCapIcon,
-    keywords: "learn teach lesson guide tutorial onboarding training",
-  },
-  bicycle: {
-    component: BicycleIcon,
-    keywords: "bicycle bike cycle",
-  },
-  beaker: {
-    component: BeakerIcon,
-    keywords: "lab research experiment test",
-  },
-  buildingBlocks: {
-    component: BuildingBlocksIcon,
-    keywords: "app blocks product prototype",
-  },
-  bookmark: {
-    component: BookmarkedIcon,
-    keywords: "bookmark",
-  },
-  collection: {
-    component: CollectionIcon,
-    keywords: "collection",
-  },
-  coins: {
-    component: CoinsIcon,
-    keywords: "coins money finance sales income revenue cash",
-  },
-  camera: {
-    component: CameraIcon,
-    keywords: "photo picture",
-  },
-  cloud: {
-    component: CloudIcon,
-    keywords: "cloud service aws infrastructure",
-  },
-  code: {
-    component: CodeIcon,
-    keywords: "developer api code development engineering programming",
-  },
-  database: {
-    component: DatabaseIcon,
-    keywords: "server ops database",
-  },
-  email: {
-    component: EmailIcon,
-    keywords: "email at",
-  },
-  eye: {
-    component: EyeIcon,
-    keywords: "eye view",
-  },
-  globe: {
-    component: GlobeIcon,
-    keywords: "world translate",
-  },
-  info: {
-    component: InfoIcon,
-    keywords: "info information",
-  },
-  image: {
-    component: ImageIcon,
-    keywords: "image photo picture",
-  },
-  leaf: {
-    component: LeafIcon,
-    keywords: "leaf plant outdoors nature ecosystem climate",
-  },
-  lightbulb: {
-    component: LightBulbIcon,
-    keywords: "lightbulb idea",
-  },
-  lightning: {
-    component: LightningIcon,
-    keywords: "lightning fast zap",
-  },
-  math: {
-    component: MathIcon,
-    keywords: "math formula",
-  },
-  moon: {
-    component: MoonIcon,
-    keywords: "night moon dark",
-  },
-  notepad: {
-    component: NotepadIcon,
-    keywords: "journal notepad write notes",
-  },
-  padlock: {
-    component: PadlockIcon,
-    keywords: "padlock private security authentication authorization auth",
-  },
-  palette: {
-    component: PaletteIcon,
-    keywords: "design palette art brand",
-  },
-  pencil: {
-    component: EditIcon,
-    keywords: "copy writing post blog",
-  },
-  promote: {
-    component: PromoteIcon,
-    keywords: "marketing promotion",
-  },
-  question: {
-    component: QuestionMarkIcon,
-    keywords: "question help support faq",
-  },
-  sun: {
-    component: SunIcon,
-    keywords: "day sun weather",
-  },
-  sport: {
-    component: SportIcon,
-    keywords: "sport outdoor racket game",
-  },
-  smiley: {
-    component: SmileyIcon,
-    keywords: "emoji smiley happy",
-  },
-  target: {
-    component: TargetIcon,
-    keywords: "target goal sales",
-  },
-  terminal: {
-    component: TerminalIcon,
-    keywords: "terminal code",
-  },
-  tools: {
-    component: ToolsIcon,
-    keywords: "tool settings",
-  },
-  vehicle: {
-    component: VehicleIcon,
-    keywords: "truck car travel transport",
-  },
-  warning: {
-    component: WarningIcon,
-    keywords: "warning alert error",
-  },
-};
-
 type Props = {
   onOpen?: () => void;
   onClose?: () => void;
   onChange: (color: string, icon: string) => void;
+  initial: string;
   icon: string;
   color: string;
+  className?: string;
 };
 
-function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
+function IconPicker({
+  onOpen,
+  onClose,
+  icon,
+  initial,
+  color,
+  onChange,
+  className,
+}: Props) {
   const { t } = useTranslation();
   const theme = useTheme();
-  const menu = useMenuState({
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom",
     modal: true,
-    placement: "bottom-end",
   });
 
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+    }
+  }, [onOpen, onClose, popover.visible]);
+
+  const styles = React.useMemo(
+    () => ({
+      default: {
+        body: {
+          padding: 0,
+          marginRight: -8,
+        },
+        hash: {
+          color: theme.text,
+          background: theme.inputBorder,
+        },
+        swatch: {
+          cursor: "var(--cursor-pointer)",
+        },
+        input: {
+          color: theme.text,
+          boxShadow: `inset 0 0 0 1px ${theme.inputBorder}`,
+          background: "transparent",
+        },
+      },
+    }),
+    [theme]
+  );
+
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    popover.unstable_popoverRef,
+    (event) => {
+      if (popover.visible) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
   return (
-    <Wrapper>
-      <Label>
-        <LabelText>{t("Icon")}</LabelText>
-      </Label>
-      <MenuButton {...menu}>
+    <>
+      <PopoverDisclosure {...popover}>
         {(props) => (
-          <Button aria-label={t("Show menu")} {...props}>
+          <NudeButton
+            aria-label={t("Show menu")}
+            className={className}
+            {...props}
+          >
             <Icon
-              as={icons[icon || "collection"].component}
+              as={IconLibrary.getComponent(icon || "collection")}
               color={color}
-              size={30}
-            />
-          </Button>
+            >
+              {initial}
+            </Icon>
+          </NudeButton>
         )}
-      </MenuButton>
-      <ContextMenu
-        {...menu}
-        onOpen={onOpen}
-        onClose={onClose}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        width={388}
         aria-label={t("Choose icon")}
+        hideOnClickOutside={false}
       >
         <Icons>
           {Object.keys(icons).map((name, index) => (
-            <MenuItem
-              key={name}
-              onClick={() => onChange(color, name)}
-              {...menu}
-            >
+            <MenuItem key={name} onClick={() => onChange(color, name)}>
               {(props) => (
                 <IconButton
                   style={
                     {
-                      ...style,
                       "--delay": `${index * 8}ms`,
                     } as React.CSSProperties
                   }
                   {...props}
                 >
-                  <Icon as={icons[name].component} color={color} size={30} />
+                  <Icon
+                    as={IconLibrary.getComponent(name)}
+                    color={color}
+                    size={30}
+                  >
+                    {initial}
+                  </Icon>
                 </IconButton>
               )}
             </MenuItem>
@@ -276,28 +153,12 @@ function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
               onChange={(color) => onChange(color.hex, icon)}
               colors={colorPalette}
               triangle="hide"
-              styles={{
-                default: {
-                  body: {
-                    padding: 0,
-                    marginRight: -8,
-                  },
-                  hash: {
-                    color: theme.text,
-                    background: theme.inputBorder,
-                  },
-                  input: {
-                    color: theme.text,
-                    boxShadow: `inset 0 0 0 1px ${theme.inputBorder}`,
-                    background: "transparent",
-                  },
-                },
-              }}
+              styles={styles}
             />
           </React.Suspense>
         </Colors>
-      </ContextMenu>
-    </Wrapper>
+      </Popover>
+    </>
   );
 }
 
@@ -310,25 +171,12 @@ const Colors = styled(Flex)`
   padding: 8px;
 `;
 
-const Label = styled.label`
-  display: block;
-`;
-
 const Icons = styled.div`
   padding: 8px;
-
-  ${breakpoint("tablet")`
-    width: 276px;
-  `};
-`;
-
-const Button = styled(NudeButton)`
-  border: 1px solid ${s("inputBorder")};
-  width: 32px;
-  height: 32px;
 `;
 
 const IconButton = styled(NudeButton)`
+  vertical-align: top;
   border-radius: 4px;
   margin: 0px 6px 6px 0px;
   width: 30px;
@@ -341,9 +189,4 @@ const ColorPicker = styled(TwitterPicker)`
   width: 100% !important;
 `;
 
-const Wrapper = styled("div")`
-  display: inline-block;
-  position: relative;
-`;
-
 export default IconPicker;

app/components/Icons/CollectionIcon.tsx

@@ -3,9 +3,9 @@ import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 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 { IconLibrary } from "./IconLibrary";
 
 type Props = {
   /** The collection to show an icon for */
@@ -38,8 +38,12 @@ function ResolvedCollectionIcon({
 
   if (collection.icon && collection.icon !== "collection") {
     try {
-      const Component = icons[collection.icon].component;
-      return <Component color={color} size={size} />;
+      const Component = IconLibrary.getComponent(collection.icon);
+      return (
+        <Component color={color} size={size}>
+          {collection.initial}
+        </Component>
+      );
     } catch (error) {
       Logger.warn("Failed to render custom icon", {
         icon: collection.icon,

app/components/Icons/EmojiIcon.tsx

@@ -2,9 +2,9 @@ import * as React from "react";
 import styled from "styled-components";
 
 type Props = {
-  /* The emoji to render */
+  /** The emoji to render */
   emoji: string;
-  /* The size of the emoji, 24px is default to match standard icons */
+  /** The size of the emoji, 24px is default to match standard icons */
   size?: number;
 };
 
@@ -29,5 +29,5 @@ const Span = styled.span<{ $size: number }>`
   width: ${(props) => props.$size}px;
   height: ${(props) => props.$size}px;
   text-indent: -0.15em;
-  font-size: 14px;
+  font-size: ${(props) => props.$size - 10}px;
 `;

app/components/Icons/IconLibrary.tsx

@@ -0,0 +1,315 @@
+import intersection from "lodash/intersection";
+import {
+  BookmarkedIcon,
+  BicycleIcon,
+  AcademicCapIcon,
+  BeakerIcon,
+  BuildingBlocksIcon,
+  BrowserIcon,
+  CollectionIcon,
+  CoinsIcon,
+  CameraIcon,
+  CarrotIcon,
+  FlameIcon,
+  HashtagIcon,
+  GraphIcon,
+  InternetIcon,
+  LibraryIcon,
+  PlaneIcon,
+  RamenIcon,
+  CloudIcon,
+  CodeIcon,
+  EditIcon,
+  EmailIcon,
+  EyeIcon,
+  GlobeIcon,
+  InfoIcon,
+  IceCreamIcon,
+  ImageIcon,
+  LeafIcon,
+  LightBulbIcon,
+  MathIcon,
+  MoonIcon,
+  NotepadIcon,
+  TeamIcon,
+  PadlockIcon,
+  PaletteIcon,
+  PromoteIcon,
+  QuestionMarkIcon,
+  SportIcon,
+  SunIcon,
+  ShapesIcon,
+  TargetIcon,
+  TerminalIcon,
+  ToolsIcon,
+  VehicleIcon,
+  WarningIcon,
+  DatabaseIcon,
+  SmileyIcon,
+  LightningIcon,
+  ClockIcon,
+  DoneIcon,
+  FeedbackIcon,
+  ServerRackIcon,
+  ThumbsUpIcon,
+  TruckIcon,
+} from "outline-icons";
+import LetterIcon from "./LetterIcon";
+
+export class IconLibrary {
+  /**
+   * Get the component for a given icon name
+   *
+   * @param icon The name of the icon
+   * @returns The component for the icon
+   */
+  public static getComponent(icon: string) {
+    return this.mapping[icon].component;
+  }
+
+  /**
+   * Find an icon by keyword. This is useful for searching for an icon based on a user's input.
+   *
+   * @param keyword The keyword to search for
+   * @returns The name of the icon that matches the keyword, or undefined if no match is found
+   */
+  public static findIconByKeyword(keyword: string) {
+    const keys = Object.keys(this.mapping);
+
+    for (const key of keys) {
+      const icon = this.mapping[key];
+      const keywords = icon.keywords.split(" ");
+      const namewords = keyword.toLocaleLowerCase().split(" ");
+      const matches = intersection(namewords, keywords);
+
+      if (matches.length > 0) {
+        return key;
+      }
+    }
+
+    return undefined;
+  }
+
+  /**
+   * A map of all icons available to end users in the app. This does not include icons that are used
+   * internally only, which can be imported from `outline-icons` directly.
+   */
+  public static mapping = {
+    academicCap: {
+      component: AcademicCapIcon,
+      keywords: "learn teach lesson guide tutorial onboarding training",
+    },
+    bicycle: {
+      component: BicycleIcon,
+      keywords: "bicycle bike cycle",
+    },
+    beaker: {
+      component: BeakerIcon,
+      keywords: "lab research experiment test",
+    },
+    buildingBlocks: {
+      component: BuildingBlocksIcon,
+      keywords: "app blocks product prototype",
+    },
+    bookmark: {
+      component: BookmarkedIcon,
+      keywords: "bookmark",
+    },
+    browser: {
+      component: BrowserIcon,
+      keywords: "browser web app",
+    },
+    collection: {
+      component: CollectionIcon,
+      keywords: "collection",
+    },
+    coins: {
+      component: CoinsIcon,
+      keywords: "coins money finance sales income revenue cash",
+    },
+    camera: {
+      component: CameraIcon,
+      keywords: "photo picture",
+    },
+    carrot: {
+      component: CarrotIcon,
+      keywords: "food vegetable produce",
+    },
+    clock: {
+      component: ClockIcon,
+      keywords: "time",
+    },
+    cloud: {
+      component: CloudIcon,
+      keywords: "cloud service aws infrastructure",
+    },
+    code: {
+      component: CodeIcon,
+      keywords: "developer api code development engineering programming",
+    },
+    database: {
+      component: DatabaseIcon,
+      keywords: "server ops database",
+    },
+    done: {
+      component: DoneIcon,
+      keywords: "checkmark success complete finished",
+    },
+    email: {
+      component: EmailIcon,
+      keywords: "email at",
+    },
+    eye: {
+      component: EyeIcon,
+      keywords: "eye view",
+    },
+    feedback: {
+      component: FeedbackIcon,
+      keywords: "faq help support",
+    },
+    flame: {
+      component: FlameIcon,
+      keywords: "fire flame hot",
+    },
+    graph: {
+      component: GraphIcon,
+      keywords: "chart analytics data",
+    },
+    globe: {
+      component: GlobeIcon,
+      keywords: "world translate",
+    },
+    hashtag: {
+      component: HashtagIcon,
+      keywords: "social media tag",
+    },
+    info: {
+      component: InfoIcon,
+      keywords: "info information",
+    },
+    icecream: {
+      component: IceCreamIcon,
+      keywords: "food dessert cone scoop",
+    },
+    image: {
+      component: ImageIcon,
+      keywords: "image photo picture",
+    },
+    internet: {
+      component: InternetIcon,
+      keywords: "network global globe world",
+    },
+    leaf: {
+      component: LeafIcon,
+      keywords: "leaf plant outdoors nature ecosystem climate",
+    },
+    library: {
+      component: LibraryIcon,
+      keywords: "library collection archive",
+    },
+    lightbulb: {
+      component: LightBulbIcon,
+      keywords: "lightbulb idea",
+    },
+    lightning: {
+      component: LightningIcon,
+      keywords: "lightning fast zap",
+    },
+    letter: {
+      component: LetterIcon,
+      keywords: "letter",
+    },
+    math: {
+      component: MathIcon,
+      keywords: "math formula",
+    },
+    moon: {
+      component: MoonIcon,
+      keywords: "night moon dark",
+    },
+    notepad: {
+      component: NotepadIcon,
+      keywords: "journal notepad write notes",
+    },
+    padlock: {
+      component: PadlockIcon,
+      keywords: "padlock private security authentication authorization auth",
+    },
+    palette: {
+      component: PaletteIcon,
+      keywords: "design palette art brand",
+    },
+    pencil: {
+      component: EditIcon,
+      keywords: "copy writing post blog",
+    },
+    plane: {
+      component: PlaneIcon,
+      keywords: "airplane travel flight trip vacation",
+    },
+    promote: {
+      component: PromoteIcon,
+      keywords: "marketing promotion",
+    },
+    ramen: {
+      component: RamenIcon,
+      keywords: "soup food noodle bowl meal",
+    },
+    question: {
+      component: QuestionMarkIcon,
+      keywords: "question help support faq",
+    },
+    server: {
+      component: ServerRackIcon,
+      keywords: "ops infra server",
+    },
+    sun: {
+      component: SunIcon,
+      keywords: "day sun weather",
+    },
+    shapes: {
+      component: ShapesIcon,
+      keywords: "blocks toy",
+    },
+    sport: {
+      component: SportIcon,
+      keywords: "sport outdoor racket game",
+    },
+    smiley: {
+      component: SmileyIcon,
+      keywords: "emoji smiley happy",
+    },
+    target: {
+      component: TargetIcon,
+      keywords: "target goal sales",
+    },
+    team: {
+      component: TeamIcon,
+      keywords: "team building organization office",
+    },
+    terminal: {
+      component: TerminalIcon,
+      keywords: "terminal code",
+    },
+    thumbsup: {
+      component: ThumbsUpIcon,
+      keywords: "like social favorite upvote",
+    },
+    truck: {
+      component: TruckIcon,
+      keywords: "truck transport vehicle",
+    },
+    tools: {
+      component: ToolsIcon,
+      keywords: "tool settings",
+    },
+    vehicle: {
+      component: VehicleIcon,
+      keywords: "truck car travel transport",
+    },
+    warning: {
+      component: WarningIcon,
+      keywords: "warning alert error",
+    },
+  };
+}

app/components/Icons/LanguageIcon.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export function LanguageIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      width="32"
+      height="32"
+      viewBox="0 0 32 32"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      className={className}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M21 18H16L14 16V6C14 4.89543 14.8954 4 16 4H28C29.1046 4 30 4.89543 30 6V16C30 17.1046 29.1046 18 28 18H27L25.4142 19.5858C24.6332 20.3668 23.3668 20.3668 22.5858 19.5858L21 18ZM16 15.1716V6H28V16H27H26.1716L25.5858 16.5858L24 18.1716L22.4142 16.5858L21.8284 16H21H16.8284L16 15.1716Z"
+        fill="currentColor"
+      />
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M16 13H4C2.89543 13 2 13.8954 2 15V25C2 26.1046 2.89543 27 4 27H5L6.58579 28.5858C7.36684 29.3668 8.63316 29.3668 9.41421 28.5858L11 27H16C17.1046 27 18 26.1046 18 25V15C18 13.8954 17.1046 13 16 13ZM9 17L6 16.9681C6 16.9681 5 17.016 5 18C5 18.984 6 19 6 19H8.5H10C10 19 9.57627 20.1885 8.38983 21.0831C7.20339 21.9777 5.7197 23 5.7197 23C5.7197 23 4.99153 23.6054 5.5 24.5C6.00847 25.3946 7 24.8403 7 24.8403L9.74576 22.8722L11.9492 24.6614C11.9492 24.6614 12.6271 25.3771 13.3051 24.4825C13.9831 23.5879 13.3051 23.0512 13.3051 23.0512L11.1017 21.262C11.1017 21.262 11.5 21 12 20L12.5 19H14C14 19 15 19.0319 15 18C15 16.9681 14 16.9681 14 16.9681L11 17V16C11 16 11.0169 15 10 15C8.98305 15 9 16 9 16V17Z"
+        fill="currentColor"
+      />
+      <path
+        d="M23.6672 12.5221L23.5526 12.1816H23.1934H20.8818H20.5215L20.4075 12.5235L20.082 13.5H19.2196L21.2292 8.10156H21.8774L21.5587 9.06116L20.7633 11.4562L20.5449 12.1138H21.2378H22.8374H23.5327L23.3114 11.4546L22.5072 9.05959L22.1855 8.10156H22.768L24.7887 13.5H23.9964L23.6672 12.5221Z"
+        fill="currentColor"
+        stroke="currentColor"
+      />
+    </svg>
+  );
+}

app/components/Icons/LetterIcon.tsx

@@ -0,0 +1,35 @@
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Squircle from "../Squircle";
+
+type Props = {
+  /** The width and height of the icon, including standard padding. */
+  size?: number;
+  children: React.ReactNode;
+};
+
+/**
+ * A squircle shaped icon with a letter inside, used for collections.
+ */
+const LetterIcon = ({ children, size = 24, ...rest }: Props) => (
+  <LetterIconWrapper $size={size}>
+    <Squircle size={Math.round(size * 0.66)} {...rest}>
+      {children}
+    </Squircle>
+  </LetterIconWrapper>
+);
+
+const LetterIconWrapper = styled.div<{ $size: number }>`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: ${({ $size }) => $size}px;
+  height: ${({ $size }) => $size}px;
+
+  font-weight: 700;
+  font-size: ${({ $size }) => $size / 2}px;
+  color: ${s("background")};
+`;
+
+export default LetterIcon;

app/components/Icons/OutlineIcon.tsx

@@ -5,7 +5,7 @@ type Props = {
   size?: number;
   /** The color of the icon, defaults to the current text color */
   color?: string;
-  /* Whether the safe area should be removed and have graphic across full size */
+  /** Whether the safe area should be removed and have graphic across full size */
   cover?: boolean;
 };
 

app/components/Input.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { mergeRefs } from "react-merge-refs";
 import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -7,10 +8,14 @@ import Flex from "~/components/Flex";
 import Text from "~/components/Text";
 import { undraggableOnDesktop } from "~/styles";
 
-const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
+export const NativeTextarea = styled.textarea<{
+  hasIcon?: boolean;
+  hasPrefix?: boolean;
+}>`
   border: 0;
   flex: 1;
-  padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
+  padding: 8px 12px 8px
+    ${(props) => (props.hasPrefix ? 0 : props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
   color: ${s("text")};
@@ -18,13 +23,18 @@ const RealTextarea = styled.textarea<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 `;
 
-const RealInput = styled.input<{ hasIcon?: boolean }>`
+export const NativeInput = styled.input<{
+  hasIcon?: boolean;
+  hasPrefix?: boolean;
+}>`
   border: 0;
   flex: 1;
-  padding: 8px 12px 8px ${(props) => (props.hasIcon ? "8px" : "12px")};
+  padding: 8px 12px 8px
+    ${(props) => (props.hasPrefix ? 0 : props.hasIcon ? "8px" : "12px")};
   outline: none;
   background: none;
   color: ${s("text")};
@@ -38,6 +48,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
+    opacity: 1;
   }
 
   &:-webkit-autofill,
@@ -55,7 +66,7 @@ const RealInput = styled.input<{ hasIcon?: boolean }>`
   `};
 `;
 
-const Wrapper = styled.div<{
+export const Wrapper = styled.div<{
   flex?: boolean;
   short?: boolean;
   minHeight?: number;
@@ -110,9 +121,11 @@ export const LabelText = styled.div`
   display: inline-block;
 `;
 
-export type Props = React.InputHTMLAttributes<
-  HTMLInputElement | HTMLTextAreaElement
-> & {
+export interface Props
+  extends Omit<
+    React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
+    "prefix"
+  > {
   type?: "text" | "email" | "checkbox" | "search" | "textarea";
   labelHidden?: boolean;
   label?: string;
@@ -120,19 +133,25 @@ export type Props = React.InputHTMLAttributes<
   short?: boolean;
   margin?: string | number;
   error?: string;
+  /** Optional component that appears inside the input before the textarea and any icon */
+  prefix?: React.ReactNode;
+  /** Optional icon that appears inside the input before the textarea */
   icon?: React.ReactNode;
-  /* Callback is triggered with the CMD+Enter keyboard combo */
+  /** Like autoFocus, but also select any text in the input */
+  autoSelect?: boolean;
+  /** Callback is triggered with the CMD+Enter keyboard combo */
   onRequestSubmit?: (
     ev: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>
   ) => unknown;
   onFocus?: (ev: React.SyntheticEvent) => unknown;
   onBlur?: (ev: React.SyntheticEvent) => unknown;
-};
+}
 
 function Input(
   props: Props,
   ref: React.RefObject<HTMLInputElement | HTMLTextAreaElement>
 ) {
+  const internalRef = React.useRef<HTMLInputElement | HTMLTextAreaElement>();
   const [focused, setFocused] = React.useState(false);
 
   const handleBlur = (ev: React.SyntheticEvent) => {
@@ -165,6 +184,12 @@ function Input(
     }
   };
 
+  React.useEffect(() => {
+    if (props.autoSelect && internalRef.current) {
+      internalRef.current.select();
+    }
+  }, [props.autoSelect, internalRef]);
+
   const {
     type = "text",
     icon,
@@ -174,6 +199,7 @@ function Input(
     className,
     short,
     flex,
+    prefix,
     labelHidden,
     onFocus,
     onBlur,
@@ -194,23 +220,32 @@ function Input(
             wrappedLabel
           ))}
         <Outline focused={focused} margin={margin}>
+          {prefix}
           {icon && <IconWrapper>{icon}</IconWrapper>}
           {type === "textarea" ? (
-            <RealTextarea
-              ref={ref as React.RefObject<HTMLTextAreaElement>}
+            <NativeTextarea
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLTextAreaElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}
               hasIcon={!!icon}
+              hasPrefix={!!prefix}
               {...rest}
             />
           ) : (
-            <RealInput
-              ref={ref as React.RefObject<HTMLInputElement>}
+            <NativeInput
+              ref={mergeRefs([
+                internalRef,
+                ref as React.RefObject<HTMLInputElement>,
+              ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
               onKeyDown={handleKeyDown}
               hasIcon={!!icon}
+              hasPrefix={!!prefix}
               type={type}
               {...rest}
             />
@@ -220,9 +255,9 @@ function Input(
       </label>
       {error && (
         <TextWrapper>
-          <StyledText type="danger" size="xsmall">
+          <Text type="danger" size="xsmall">
             {error}
-          </StyledText>
+          </Text>
         </TextWrapper>
       )}
     </Wrapper>
@@ -235,8 +270,4 @@ export const TextWrapper = styled.span`
   margin-top: -16px;
 `;
 
-export const StyledText = styled(Text)`
-  margin-bottom: 0;
-`;
-
 export default React.forwardRef(Input);

app/components/InputMemberPermissionSelect.tsx

@@ -2,31 +2,18 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { CollectionPermission } from "@shared/types";
 import InputSelect, { Props as SelectProps } from "~/components/InputSelect";
+import { Permission } from "~/types";
 
 export default function InputMemberPermissionSelect(
-  props: Partial<SelectProps>
+  props: Partial<SelectProps> & { permissions: Permission[] }
 ) {
   const { t } = useTranslation();
 
   return (
     <Select
       label={t("Permissions")}
-      options={[
-        {
-          label: t("View only"),
-          value: CollectionPermission.Read,
-        },
-        {
-          label: t("View and edit"),
-          value: CollectionPermission.ReadWrite,
-        },
-        {
-          label: t("Admin"),
-          value: CollectionPermission.Admin,
-        },
-      ]}
+      options={props.permissions}
       ariaLabel={t("Permissions")}
       labelHidden
       nude

app/components/InputRich.tsx

@@ -1,63 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans } from "react-i18next";
-import styled from "styled-components";
-import Editor from "~/components/Editor";
-import { LabelText, Outline } from "~/components/Input";
-import Text from "~/components/Text";
-
-type Props = {
-  label: string;
-  minHeight?: number;
-  maxHeight?: number;
-  readOnly?: boolean;
-};
-
-function InputRich({ label, minHeight, maxHeight, ...rest }: Props) {
-  const [focused, setFocused] = React.useState<boolean>(false);
-  const handleBlur = React.useCallback(() => {
-    setFocused(false);
-  }, []);
-  const handleFocus = React.useCallback(() => {
-    setFocused(true);
-  }, []);
-
-  return (
-    <>
-      <LabelText>{label}</LabelText>
-      <StyledOutline
-        maxHeight={maxHeight}
-        minHeight={minHeight}
-        focused={focused}
-      >
-        <React.Suspense
-          fallback={
-            <Text type="secondary">
-              <Trans>Loading editor</Trans>…
-            </Text>
-          }
-        >
-          <Editor onBlur={handleBlur} onFocus={handleFocus} grow {...rest} />
-        </React.Suspense>
-      </StyledOutline>
-    </>
-  );
-}
-
-const StyledOutline = styled(Outline)<{
-  minHeight?: number;
-  maxHeight?: number;
-  focused?: boolean;
-}>`
-  display: block;
-  padding: 8px 12px;
-  min-height: ${({ minHeight }) => (minHeight ? `${minHeight}px` : "0")};
-  max-height: ${({ maxHeight }) => (maxHeight ? `${maxHeight}px` : "auto")};
-  overflow-y: auto;
-
-  > * {
-    display: block;
-  }
-`;
-
-export default observer(InputRich);

app/components/InputSelect.tsx

@@ -14,6 +14,7 @@ import Button, { Inner } from "~/components/Button";
 import Text from "~/components/Text";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
 import { fadeAndScaleIn } from "~/styles/animations";
 import {
   Position,
@@ -42,14 +43,25 @@ export type Props = {
   labelHidden?: boolean;
   icon?: React.ReactNode;
   options: Option[];
+  /** @deprecated Removing soon, do not use. */
   note?: React.ReactNode;
   onChange?: (value: string | null) => void;
 };
 
+export interface InputSelectRef {
+  value: string | null;
+  focus: () => void;
+  blur: () => void;
+}
+
+interface InnerProps extends React.HTMLAttributes<HTMLDivElement> {
+  placement: Placement;
+}
+
 const getOptionFromValue = (options: Option[], value: string | null) =>
   options.find((option) => option.value === value);
 
-const InputSelect = (props: Props) => {
+const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
   const {
     value = null,
     label,
@@ -62,6 +74,7 @@ const InputSelect = (props: Props) => {
     disabled,
     note,
     icon,
+    nude,
     ...rest
   } = props;
 
@@ -71,9 +84,9 @@ const InputSelect = (props: Props) => {
     selectedValue: value,
   });
 
-  const popOver = useSelectPopover({
+  const popover = useSelectPopover({
     ...select,
-    hideOnClickOutside: true,
+    hideOnClickOutside: false,
     preventBodyScroll: true,
     disabled,
   });
@@ -102,6 +115,35 @@ const InputSelect = (props: Props) => {
     (option) => option.value === select.selectedValue
   );
 
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    contentRef,
+    (event) => {
+      if (select.visible) {
+        event.stopPropagation();
+        event.preventDefault();
+        select.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  React.useImperativeHandle(ref, () => ({
+    focus: () => {
+      buttonRef.current?.focus();
+    },
+    blur: () => {
+      buttonRef.current?.blur();
+    },
+    value: select.selectedValue,
+  }));
+
+  React.useEffect(() => {
+    previousValue.current = value;
+    select.setSelectedValue(value);
+  }, [value]);
+
   React.useEffect(() => {
     if (previousValue.current === select.selectedValue) {
       return;
@@ -138,6 +180,7 @@ const InputSelect = (props: Props) => {
               disclosure
               className={className}
               icon={icon}
+              $nude={nude}
               {...props}
             >
               {getOptionFromValue(options, select.selectedValue)?.label || (
@@ -146,12 +189,8 @@ const InputSelect = (props: Props) => {
             </StyledButton>
           )}
         </Select>
-        <SelectPopover {...select} {...popOver} aria-label={ariaLabel}>
-          {(
-            props: React.HTMLAttributes<HTMLDivElement> & {
-              placement: Placement;
-            }
-          ) => {
+        <SelectPopover {...select} {...popover} aria-label={ariaLabel}>
+          {(props: InnerProps) => {
             const topAnchor = props.style?.top === "0";
             const rightAnchor = props.placement === "bottom-end";
 
@@ -163,6 +202,7 @@ const InputSelect = (props: Props) => {
                   topAnchor={topAnchor}
                   rightAnchor={rightAnchor}
                   hiddenScrollbars
+                  maxWidth={400}
                   style={
                     maxHeight && topAnchor
                       ? {
@@ -200,7 +240,7 @@ const InputSelect = (props: Props) => {
         </SelectPopover>
       </Wrapper>
       {note && (
-        <Text type="secondary" size="small">
+        <Text as="p" type="secondary" size="small">
           {note}
         </Text>
       )}
@@ -223,7 +263,7 @@ const Spacer = styled.div`
   flex-shrink: 0;
 `;
 
-const StyledButton = styled(Button)<{ nude?: boolean }>`
+const StyledButton = styled(Button)<{ $nude?: boolean }>`
   font-weight: normal;
   text-transform: none;
   margin-bottom: 16px;
@@ -236,7 +276,7 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
   }
 
   ${(props) =>
-    props.nude &&
+    props.$nude &&
     css`
       border-color: transparent;
       box-shadow: none;
@@ -244,8 +284,8 @@ const StyledButton = styled(Button)<{ nude?: boolean }>`
 
   ${Inner} {
     line-height: 28px;
-    padding-left: 16px;
-    padding-right: 8px;
+    padding-left: 12px;
+    padding-right: 4px;
   }
 
   svg {
@@ -267,7 +307,7 @@ const Wrapper = styled.label<{ short?: boolean }>`
   max-width: ${(props) => (props.short ? "350px" : "100%")};
 `;
 
-const Positioner = styled(Position)`
+export const Positioner = styled(Position)`
   &.focus-visible {
     ${StyledSelectOption} {
       &[aria-selected="true"] {
@@ -284,4 +324,4 @@ const Positioner = styled(Position)`
   }
 `;
 
-export default InputSelect;
+export default React.forwardRef(InputSelect);

app/components/InputSelectPermission.tsx

@@ -2,36 +2,35 @@ 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";
+import { EmptySelectValue } from "~/types";
+import InputSelect, { Props, Option, InputSelectRef } from "./InputSelect";
 
-export default function InputSelectPermission(
+function InputSelectPermission(
   props: $Diff<
     Props,
     {
       options: Array<Option>;
       ariaLabel: string;
     }
-  >
+  >,
+  ref: React.RefObject<InputSelectRef>
 ) {
   const { value, onChange, ...rest } = props;
   const { t } = useTranslation();
   const handleChange = React.useCallback(
     (value) => {
-      if (value === "no_access") {
-        value = "";
-      }
-
-      onChange?.(value);
+      onChange?.(value === EmptySelectValue ? null : value);
     },
     [onChange]
   );
 
   return (
     <InputSelect
-      label={t("Default access")}
+      ref={ref}
+      label={t("Permission")}
       options={[
         {
-          label: t("View and edit"),
+          label: t("Can edit"),
           value: CollectionPermission.ReadWrite,
         },
         {
@@ -40,13 +39,15 @@ export default function InputSelectPermission(
         },
         {
           label: t("No access"),
-          value: "no_access",
+          value: EmptySelectValue,
         },
       ]}
       ariaLabel={t("Default access")}
-      value={value || "no_access"}
+      value={value || EmptySelectValue}
       onChange={handleChange}
       {...rest}
     />
   );
 }
+
+export default React.forwardRef(InputSelectPermission);

app/components/InputSelectRole.tsx

@@ -1,39 +0,0 @@
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { $Diff } from "utility-types";
-import InputSelect, { Props, Option } from "~/components/InputSelect";
-
-const InputSelectRole = (
-  props: $Diff<
-    Props,
-    {
-      options: Array<Option>;
-      ariaLabel: string;
-    }
-  >
-) => {
-  const { t } = useTranslation();
-  return (
-    <InputSelect
-      label={t("Role")}
-      options={[
-        {
-          label: t("Member"),
-          value: "member",
-        },
-        {
-          label: t("Viewer"),
-          value: "viewer",
-        },
-        {
-          label: t("Admin"),
-          value: "admin",
-        },
-      ]}
-      ariaLabel={t("Role")}
-      {...props}
-    />
-  );
-};
-
-export default InputSelectRole;

app/components/Key.ts

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
 type Props = {
-  /* Set to true if displaying a single symbol character to disable monospace */
+  /** Set to true if displaying a single symbol character to disable monospace */
   symbol?: boolean;
 };
 

app/components/LanguagePrompt.tsx

@@ -1,6 +1,7 @@
-import { find } from "lodash";
+import { m } from "framer-motion";
+import find from "lodash/find";
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
+import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { languages, languageOptions } from "@shared/i18n";
 import ButtonLink from "~/components/ButtonLink";
@@ -9,49 +10,20 @@ import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { detectLanguage } from "~/utils/language";
-
-function Icon({ className }: { className?: string }) {
-  return (
-    <svg
-      width="32"
-      height="32"
-      viewBox="0 0 32 32"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-      className={className}
-    >
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M21 18H16L14 16V6C14 4.89543 14.8954 4 16 4H28C29.1046 4 30 4.89543 30 6V16C30 17.1046 29.1046 18 28 18H27L25.4142 19.5858C24.6332 20.3668 23.3668 20.3668 22.5858 19.5858L21 18ZM16 15.1716V6H28V16H27H26.1716L25.5858 16.5858L24 18.1716L22.4142 16.5858L21.8284 16H21H16.8284L16 15.1716Z"
-        fill="#2B2F35"
-      />
-      <path
-        fillRule="evenodd"
-        clipRule="evenodd"
-        d="M16 13H4C2.89543 13 2 13.8954 2 15V25C2 26.1046 2.89543 27 4 27H5L6.58579 28.5858C7.36684 29.3668 8.63316 29.3668 9.41421 28.5858L11 27H16C17.1046 27 18 26.1046 18 25V15C18 13.8954 17.1046 13 16 13ZM9 17L6 16.9681C6 16.9681 5 17.016 5 18C5 18.984 6 19 6 19H8.5H10C10 19 9.57627 20.1885 8.38983 21.0831C7.20339 21.9777 5.7197 23 5.7197 23C5.7197 23 4.99153 23.6054 5.5 24.5C6.00847 25.3946 7 24.8403 7 24.8403L9.74576 22.8722L11.9492 24.6614C11.9492 24.6614 12.6271 25.3771 13.3051 24.4825C13.9831 23.5879 13.3051 23.0512 13.3051 23.0512L11.1017 21.262C11.1017 21.262 11.5 21 12 20L12.5 19H14C14 19 15 19.0319 15 18C15 16.9681 14 16.9681 14 16.9681L11 17V16C11 16 11.0169 15 10 15C8.98305 15 9 16 9 16V17Z"
-        fill="#2B2F35"
-      />
-      <path
-        d="M23.6672 12.5221L23.5526 12.1816H23.1934H20.8818H20.5215L20.4075 12.5235L20.082 13.5H19.2196L21.2292 8.10156H21.8774L21.5587 9.06116L20.7633 11.4562L20.5449 12.1138H21.2378H22.8374H23.5327L23.3114 11.4546L22.5072 9.05959L22.1855 8.10156H22.768L24.7887 13.5H23.9964L23.6672 12.5221Z"
-        fill="#2B2F35"
-        stroke="#2B2F35"
-      />
-    </svg>
-  );
-}
+import { LanguageIcon } from "./Icons/LanguageIcon";
+import Text from "./Text";
 
 export default function LanguagePrompt() {
-  const { auth, ui } = useStores();
+  const { ui } = useStores();
   const { t } = useTranslation();
   const user = useCurrentUser();
   const language = detectLanguage();
 
-  if (language === "en_US" || language === user.language) {
-    return null;
-  }
-
-  if (!languages.includes(language)) {
+  if (
+    language === "en_US" ||
+    language === user.language ||
+    !languages.includes(language)
+  ) {
     return null;
   }
 
@@ -60,24 +32,23 @@ export default function LanguagePrompt() {
   const appName = env.APP_NAME;
 
   return (
-    <Wrapper>
-      <Flex align="center">
+    <Wrapper
+      animate={{ opacity: 1, y: 0 }}
+      exit={{ opacity: 0, y: -20 }}
+      transition={{ duration: 0.2 }}
+    >
+      <Flex align="center" gap={12}>
         <LanguageIcon />
         <span>
-          <Trans>
-            {{ appName }} is available in your language{" "}
-            {{
-              optionLabel,
-            }}
-            , would you like to change?
-          </Trans>
+          <Text>
+            {appName} is available in your language – {optionLabel}, would you
+            like to change?
+          </Text>
           <br />
           <Link
             onClick={async () => {
               ui.setLanguagePromptDismissed();
-              await auth.updateUser({
-                language,
-              });
+              await user.save({ language });
             }}
           >
             {t("Change Language")}
@@ -90,16 +61,17 @@ export default function LanguagePrompt() {
   );
 }
 
-const Wrapper = styled.p`
-  background: ${(props) => props.theme.brand.marine};
-  color: ${(props) => props.theme.almostBlack};
-  padding: 10px 12px;
-  margin-top: 24px;
-  border-radius: 4px;
+const Wrapper = styled(m.p)`
+  color: ${(props) => props.theme.text};
+  border: 1px solid ${(props) => props.theme.divider};
+  padding: 20px;
+  margin-top: 12px;
+  border-radius: 8px;
   position: relative;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
 
   a {
-    color: ${(props) => props.theme.almostBlack};
+    color: ${(props) => props.theme.text};
     font-weight: 500;
   }
 
@@ -109,14 +81,11 @@ const Wrapper = styled.p`
 `;
 
 const Link = styled(ButtonLink)`
-  color: ${(props) => props.theme.almostBlack};
+  cursor: var(--cursor-pointer);
+  color: ${(props) => props.theme.text};
   font-weight: 500;
 
   &:hover {
     text-decoration: underline;
   }
 `;
-
-const LanguageIcon = styled(Icon)`
-  margin-right: 12px;
-`;

app/components/Layout.tsx

@@ -22,12 +22,10 @@ type Props = {
   sidebarRight?: React.ReactNode;
 };
 
-const Layout: React.FC<Props> = ({
-  title,
-  children,
-  sidebar,
-  sidebarRight,
-}: Props) => {
+const Layout = React.forwardRef(function Layout_(
+  { title, children, sidebar, sidebarRight }: Props,
+  ref: React.RefObject<HTMLDivElement>
+) {
   const { ui } = useStores();
   const sidebarCollapsed = !sidebar || ui.sidebarIsClosed;
 
@@ -40,7 +38,7 @@ const Layout: React.FC<Props> = ({
   });
 
   return (
-    <Container column auto>
+    <Container column auto ref={ref}>
       <Helmet>
         <title>{title ? title : env.APP_NAME}</title>
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
@@ -75,7 +73,7 @@ const Layout: React.FC<Props> = ({
       </Container>
     </Container>
   );
-};
+});
 
 const Container = styled(Flex)`
   background: ${s("background")};

app/components/List/Item.tsx

@@ -6,13 +6,23 @@ import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
+  /** An icon or image to display to the left of the list item */
   image?: React.ReactNode;
+  /** An internal location to navigate to on click, if provided the list item will have hover styles */
   to?: LocationDescriptor;
+  /** An optional click handler, if provided the list item will have hover styles */
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
+  /** Whether to match the location exactly */
   exact?: boolean;
+  /** The title of the list item */
   title: React.ReactNode;
+  /** The subtitle of the list item, displayed below the title */
   subtitle?: React.ReactNode;
+  /** Actions to display to the right of the list item */
   actions?: React.ReactNode;
+  /** Whether to display a border below the list item */
   border?: boolean;
+  /** Whether to display the list item in a compact style */
   small?: boolean;
 };
 
@@ -74,10 +84,12 @@ const ListItem = (
 const Wrapper = styled.a<{
   $small?: boolean;
   $border?: boolean;
+  onClick?: React.MouseEventHandler<HTMLAnchorElement>;
   to?: LocationDescriptor;
 }>`
   display: flex;
   padding: ${(props) => (props.$border === false ? 0 : "8px 0")};
+  min-height: 32px;
   margin: ${(props) =>
     props.$border === false ? (props.$small ? "8px 0" : "16px 0") : 0};
   border-bottom: 1px solid
@@ -88,7 +100,13 @@ const Wrapper = styled.a<{
     border-bottom: 0;
   }
 
-  cursor: ${({ to }) => (to ? "var(--pointer)" : "default")};
+  &:hover {
+    background: ${(props) =>
+      props.onClick ? props.theme.secondaryBackground : "inherit"};
+  }
+
+  cursor: ${(props) =>
+    props.to || props.onClick ? "var(--pointer)" : "default"};
 `;
 
 const Image = styled(Flex)`
@@ -126,6 +144,7 @@ const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
 export const Actions = styled(Flex)<{ $selected?: boolean }>`
   align-self: center;
   justify-content: center;
+  flex-shrink: 0;
   color: ${(props) =>
     props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

app/components/List/Placeholder.tsx

@@ -1,4 +1,4 @@
-import { times } from "lodash";
+import times from "lodash/times";
 import * as React from "react";
 import styled from "styled-components";
 import Fade from "~/components/Fade";

app/components/LocaleTime.tsx

@@ -20,7 +20,7 @@ function eachMinute(fn: () => void) {
   };
 }
 
-type Props = {
+export type Props = {
   children?: React.ReactNode;
   dateTime: string;
   tooltipDelay?: number;
@@ -79,7 +79,7 @@ const LocaleTime: React.FC<Props> = ({
         });
 
   return (
-    <Tooltip tooltip={tooltipContent} delay={tooltipDelay} placement="bottom">
+    <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
       <time dateTime={dateTime}>{children || content}</time>
     </Tooltip>
   );

app/components/MobileScrollWrapper.tsx

@@ -0,0 +1,21 @@
+import * as React from "react";
+import styled from "styled-components";
+import useMobile from "~/hooks/useMobile";
+
+type Props = {
+  children: React.ReactNode;
+};
+
+const MobileWrapper = styled.div`
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+`;
+
+const MobileScrollWrapper = ({ children }: Props) => {
+  const isMobile = useMobile();
+  return isMobile ? <MobileWrapper>{children}</MobileWrapper> : <>{children}</>;
+};
+
+export default MobileScrollWrapper;

app/components/Modal.tsx

@@ -23,7 +23,7 @@ let openModals = 0;
 type Props = {
   children?: React.ReactNode;
   isOpen: boolean;
-  isCentered?: boolean;
+  fullscreen?: boolean;
   title?: React.ReactNode;
   onRequestClose: () => void;
 };
@@ -31,7 +31,7 @@ type Props = {
 const Modal: React.FC<Props> = ({
   children,
   isOpen,
-  isCentered,
+  fullscreen = true,
   title = "Untitled",
   onRequestClose,
 }: Props) => {
@@ -68,41 +68,17 @@ const Modal: React.FC<Props> = ({
   return (
     <DialogBackdrop {...dialog}>
       {(props) => (
-        <Backdrop $isCentered={isCentered} {...props}>
+        <Backdrop $fullscreen={fullscreen} {...props}>
           <Dialog
             {...dialog}
             aria-label={typeof title === "string" ? title : undefined}
             preventBodyScroll
             hideOnEsc
-            hideOnClickOutside={!!isCentered}
+            hideOnClickOutside={!fullscreen}
             hide={onRequestClose}
           >
             {(props) =>
-              isCentered && !isMobile ? (
-                <Small {...props}>
-                  <Centered
-                    onClick={(ev) => ev.stopPropagation()}
-                    column
-                    reverse
-                  >
-                    <SmallContent shadow>
-                      <ErrorBoundary component="div">{children}</ErrorBoundary>
-                    </SmallContent>
-                    <Header>
-                      {title && (
-                        <Text as="span" size="large">
-                          {title}
-                        </Text>
-                      )}
-                      <Text as="span" size="large">
-                        <NudeButton onClick={onRequestClose}>
-                          <CloseIcon />
-                        </NudeButton>
-                      </Text>
-                    </Header>
-                  </Centered>
-                </Small>
-              ) : (
+              fullscreen || isMobile ? (
                 <Fullscreen
                   $nested={!!depth}
                   style={
@@ -116,7 +92,11 @@ const Modal: React.FC<Props> = ({
                 >
                   <Content>
                     <Centered onClick={(ev) => ev.stopPropagation()} column>
-                      {title && <h1>{title}</h1>}
+                      {title && (
+                        <Text size="xlarge" weight="bold">
+                          {title}
+                        </Text>
+                      )}
                       <ErrorBoundary>{children}</ErrorBoundary>
                     </Centered>
                   </Content>
@@ -125,9 +105,27 @@ const Modal: React.FC<Props> = ({
                   </Close>
                   <Back onClick={onRequestClose}>
                     <BackIcon size={32} />
-                    <Text as="span">{t("Back")} </Text>
+                    <Text>{t("Back")} </Text>
                   </Back>
                 </Fullscreen>
+              ) : (
+                <Small {...props}>
+                  <Centered
+                    onClick={(ev) => ev.stopPropagation()}
+                    column
+                    reverse
+                  >
+                    <SmallContent shadow>
+                      <ErrorBoundary component="div">{children}</ErrorBoundary>
+                    </SmallContent>
+                    <Header>
+                      {title && <Text size="large">{title}</Text>}
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
+                    </Header>
+                  </Centered>
+                </Small>
               )
             }
           </Dialog>
@@ -137,16 +135,16 @@ const Modal: React.FC<Props> = ({
   );
 };
 
-const Backdrop = styled(Flex)<{ $isCentered?: boolean }>`
+const Backdrop = styled(Flex)<{ $fullscreen?: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   background-color: ${(props) =>
-    props.$isCentered
-      ? props.theme.modalBackdrop
-      : transparentize(0.25, props.theme.background)} !important;
+    props.$fullscreen
+      ? transparentize(0.25, props.theme.background)
+      : props.theme.modalBackdrop} !important;
   z-index: ${depths.modalOverlay};
   transition: opacity 50ms ease-in-out;
   opacity: 0;
@@ -190,7 +188,7 @@ const Fullscreen = styled.div<FullscreenProps>`
 
 const Content = styled(Scrollable)`
   width: 100%;
-  padding: 8vh 32px;
+  padding: 8vh 12px;
 
   ${breakpoint("tablet")`
     padding: 13vh 2rem 2rem;
@@ -259,7 +257,7 @@ const Small = styled.div`
   margin: auto auto;
   width: 30vw;
   min-width: 350px;
-  max-width: 500px;
+  max-width: 450px;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/NavLink.tsx

@@ -1,4 +1,4 @@
-import { LocationDescriptor } from "history";
+import { LocationDescriptor, LocationDescriptorObject } from "history";
 import * as React from "react";
 import { match, NavLink, Route } from "react-router-dom";
 
@@ -9,10 +9,20 @@ type Props = React.ComponentProps<typeof NavLink> & {
           [x: string]: string | undefined;
         }>
       | boolean
-      | null
+      | null,
+    location: LocationDescriptorObject
   ) => React.ReactNode;
+  /**
+   * If true, the tab will only be active if the path matches exactly.
+   */
   exact?: boolean;
+  /**
+   * CSS properties to apply to the link when it is active.
+   */
   activeStyle?: React.CSSProperties;
+  /**
+   * The path to match against the current location.
+   */
   to: LocationDescriptor;
 };
 
@@ -25,7 +35,10 @@ function NavLinkWithChildrenFunc(
       {({ match, location }) => (
         <NavLink {...rest} to={to} exact={exact} ref={ref}>
           {children
-            ? children(rest.isActive ? rest.isActive(match, location) : match)
+            ? children(
+                rest.isActive ? rest.isActive(match, location) : match,
+                location
+              )
             : null}
         </NavLink>
       )}

app/components/Notice.tsx

@@ -11,7 +11,7 @@ type Props = {
 };
 
 const Notice: React.FC<Props> = ({ children, icon, description }: Props) => (
-  <Container>
+  <Container as="div">
     <Flex as="span" gap={8}>
       {icon}
       <span>

app/components/Notifications/NotificationIcon.tsx

@@ -1,19 +1,18 @@
 import { observer } from "mobx-react";
 import { SubscribeIcon } from "outline-icons";
 import * as React from "react";
-import styled, { useTheme } from "styled-components";
+import styled from "styled-components";
 import { s } from "@shared/styles";
 import useStores from "~/hooks/useStores";
 import Relative from "../Sidebar/components/Relative";
 
 const NotificationIcon = () => {
   const { notifications } = useStores();
-  const theme = useTheme();
   const count = notifications.approximateUnreadCount;
 
   return (
     <Relative style={{ height: 24 }}>
-      <SubscribeIcon color={theme.textTertiary} />
+      <SubscribeIcon />
       {count > 0 && <Badge />}
     </Relative>
   );

app/components/Notifications/NotificationListItem.tsx

@@ -14,6 +14,7 @@ import { AvatarSize } from "../Avatar/Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";
+import { UnreadBadge } from "../UnreadBadge";
 
 type Props = {
   notification: Notification;
@@ -40,20 +41,18 @@ function NotificationListItem({ notification, onNavigate }: Props) {
   };
 
   return (
-    <Link to={notification.path} onClick={handleClick}>
+    <StyledLink to={notification.path ?? ""} onClick={handleClick}>
       <Container gap={8} $unread={!notification.viewedAt}>
         <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
         <Flex column>
           <Text as="div" size="small">
-            <Text as="span" weight="bold">
+            <Text weight="bold">
               {notification.actor?.name ?? t("Unknown")}
             </Text>{" "}
             {notification.eventText(t)}{" "}
-            <Text as="span" weight="bold">
-              {notification.subject}
-            </Text>
+            <Text weight="bold">{notification.subject}</Text>
           </Text>
-          <Text as="span" type="tertiary" size="xsmall">
+          <Text type="tertiary" size="xsmall">
             <Time
               dateTime={notification.createdAt}
               tooltipDelay={1000}
@@ -67,12 +66,18 @@ function NotificationListItem({ notification, onNavigate }: Props) {
             />
           )}
         </Flex>
-        {notification.viewedAt ? null : <Unread />}
+        {notification.viewedAt ? null : <UnreadBadge style={{ right: 20 }} />}
       </Container>
-    </Link>
+    </StyledLink>
   );
 }
 
+const StyledLink = styled(Link)`
+  display: block;
+  margin: 0 8px;
+  cursor: var(--pointer);
+`;
+
 const StyledCommentEditor = styled(CommentEditor)`
   font-size: 0.9em;
   margin-top: 4px;
@@ -87,24 +92,13 @@ const StyledAvatar = styled(Avatar)`
 const Container = styled(Flex)<{ $unread: boolean }>`
   position: relative;
   padding: 8px 12px;
-  margin: 0 8px;
+  padding-right: 40px;
   border-radius: 4px;
 
   &:${hover},
   &:active {
     background: ${s("listItemHoverBackground")};
-    cursor: var(--pointer);
   }
 `;
 
-const Unread = styled.div`
-  width: 8px;
-  height: 8px;
-  background: ${s("accent")};
-  border-radius: 8px;
-  align-self: center;
-  position: absolute;
-  right: 20px;
-`;
-
 export default observer(NotificationListItem);