0.77.1-1

* fix: replace reakit composite with react-roving-tabindex

* fix: touch points

* fix: focus stuck at first list item

* fix: document history navigation

* fix: remove ununsed ListItem components

* fix: keyboard navigation in recent search list

* fix: updated lib

.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:
@@ -13,13 +13,8 @@ defaults: &defaults
   resource_class: large
   environment:
     NODE_ENV: test
-    SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
-    DATABASE_URL_TEST: postgres://postgres:password@localhost:5432/circle_test
     DATABASE_URL: postgres://postgres:password@localhost:5432/circle_test
     URL: http://localhost:3000
-    SMTP_FROM_EMAIL: hello@example.com
-    AWS_S3_UPLOAD_BUCKET_URL: https://s3.amazonaws.com
-    AWS_S3_UPLOAD_BUCKET_NAME: outline-circle
     NODE_OPTIONS: --max-old-space-size=8000
 
 executors:
@@ -36,12 +31,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 +44,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 +53,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 +62,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 +71,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
+          command: ./node_modules/.bin/sequelize db:migrate
       - 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 +97,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
@@ -128,7 +126,7 @@ jobs:
             docker buildx install
             docker context create docker-multiarch
             docker run --rm --privileged multiarch/qemu-user-static --reset -p yes
-            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v6,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            docker buildx create --name docker-multiarch --platform linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
             docker buildx inspect --builder docker-multiarch --bootstrap
             docker buildx use docker-multiarch
       - run:
@@ -142,7 +140,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 +169,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.development

@@ -0,0 +1,10 @@
+URL=https://local.outline.dev:3000
+
+SMTP_FROM_EMAIL=hello@example.com
+
+# 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=true
+
+# Increase the log level to debug for development
+LOG_LEVEL=debug

.env.sample

@@ -13,7 +13,6 @@ UTILS_SECRET=generate_a_new_key
 # For production point these at your databases, in development the default
 # should work out of the box.
 DATABASE_URL=postgres://user:pass@localhost:5432/outline
-DATABASE_URL_TEST=postgres://user:pass@localhost:5432/outline-test
 DATABASE_CONNECTION_POOL_MIN=
 DATABASE_CONNECTION_POOL_MAX=
 # Uncomment this to disable SSL for connecting to Postgres
@@ -30,32 +29,44 @@ 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=https://app.outline.dev:3000
+URL=
 PORT=3000
 
 # See [documentation](docs/SERVICES.md) on running a separate collaboration
 # server, for normal operation this does not need to be set.
 COLLABORATION_URL=
 
-# To support uploading of images for avatars and document attachments an
-# s3-compatible storage must be provided. AWS S3 is recommended for redundancy
-# however if you want to keep all file storage local an alternative such as
-# minio (https://github.com/minio/minio) can be used.
+# 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
 
-# A more detailed guide on setting up S3 is available here:
-# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
-#
+# 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
+
+# Override the maximum size of document imports, generally this should be lower
+# than the document attachment maximum size.
+FILE_STORAGE_IMPORT_MAX_SIZE=
+
+# Override the maximum size of workspace imports, these can be especially large
+# and the files are temporary being automatically deleted after a period of time.
+FILE_STORAGE_WORKSPACE_IMPORT_MAX_SIZE=
+
+# To support uploading of images for avatars and document attachments in a distributed 
+# architecture an s3-compatible storage can be configured if FILE_STORAGE=s3 above.
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
 AWS_S3_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
 
-
 # –––––––––––––– AUTHENTICATION ––––––––––––––
 
 # Third party signin credentials, at least ONE OF EITHER Google, Slack,
@@ -93,6 +104,7 @@ OIDC_CLIENT_SECRET=
 OIDC_AUTH_URI=
 OIDC_TOKEN_URI=
 OIDC_USERINFO_URI=
+OIDC_LOGOUT_URI=
 
 # Specify which claims to derive user information from
 # Supports any valid JSON path with the JWT payload
@@ -104,6 +116,16 @@ OIDC_DISPLAY_NAME=OpenID Connect
 # Space separated auth scopes.
 OIDC_SCOPES=openid profile email
 
+# To configure the GitHub integration, you'll need to create a GitHub App at
+# => https://github.com/settings/apps
+#
+# When configuring the Client ID, add a redirect URL under "Permissions & events":
+# https://<URL>/api/github.callback
+GITHUB_CLIENT_ID=
+GITHUB_CLIENT_SECRET=
+GITHUB_APP_NAME=
+GITHUB_APP_ID=
+GITHUB_APP_PRIVATE_KEY=
 
 # –––––––––––––––– OPTIONAL ––––––––––––––––
 
@@ -131,10 +153,6 @@ ENABLE_UPDATES=true
 # available memory by 512 for a rough estimate
 WEB_CONCURRENCY=1
 
-# Override the maximum size of document imports, could be required if you have
-# especially large Word documents with embedded imagery
-MAXIMUM_IMPORT_SIZE=5120000
-
 # You can remove this line if your reverse proxy already logs incoming http
 # requests and this ends up being duplicative
 DEBUG=http
@@ -151,9 +169,6 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
 
-# Optionally enable google analytics to track pageviews in the knowledge base
-GOOGLE_ANALYTICS_ID=
-
 # Optionally enable Sentry (sentry.io) to track errors and performance,
 # and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
 # https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
@@ -166,8 +181,8 @@ SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=hello@example.com
-SMTP_REPLY_EMAIL=hello@example.com
+SMTP_FROM_EMAIL=
+SMTP_REPLY_EMAIL=
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true
 

.env.test

@@ -0,0 +1,31 @@
+NODE_ENV=test
+DATABASE_URL=postgres://user:pass@127.0.0.1:5432/outline-test
+SECRET_KEY=F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
+
+SMTP_HOST=smtp.example.com
+SMTP_USERNAME=test
+SMTP_FROM_EMAIL=hello@example.com
+SMTP_REPLY_EMAIL=hello@example.com
+
+GOOGLE_CLIENT_ID=123
+GOOGLE_CLIENT_SECRET=123
+
+SLACK_CLIENT_ID=123
+SLACK_CLIENT_SECRET=123
+
+GITHUB_CLIENT_ID=123;
+GITHUB_CLIENT_SECRET=123;
+GITHUB_APP_NAME=outline-test;
+
+OIDC_CLIENT_ID=client-id
+OIDC_CLIENT_SECRET=client-secret
+OIDC_AUTH_URI=http://localhost/authorize
+OIDC_TOKEN_URI=http://localhost/token
+OIDC_USERINFO_URI=http://localhost/userinfo
+
+IFRAMELY_API_KEY=123
+
+RATE_LIMITER_ENABLED=false
+
+FILE_STORAGE=local
+FILE_STORAGE_LOCAL_ROOT_DIR=/tmp

.eslintrc

@@ -21,7 +21,7 @@
     "eslint-plugin-import",
     "eslint-plugin-node",
     "eslint-plugin-react",
-    "import"
+    "eslint-plugin-lodash"
   ],
   "rules": {
     "eqeqeq": 2,
@@ -32,11 +32,20 @@
     "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
+    "no-shadow": "off",
     "es/no-regexp-lookbehind-assertions": "error",
     "react/self-closing-comp": ["error", {
       "component": true,
       "html": true
     }],
+    "@typescript-eslint/no-shadow": [
+      "warn",
+      {
+        "hoist": "all",
+        "ignoreTypeValueShadow": 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 +64,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

@@ -2,12 +2,14 @@ dist
 build
 node_modules/*
 .env
+.env.local
+.env.production
 .log
 .vscode/*
 npm-debug.log
 stats.json
 .DS_Store
-fakes3/*
+data/*
 .idea
 *.pem
 *.key

.jestconfig.json

@@ -1,20 +1,20 @@
 {
   "workerIdleMemoryLimit": "0.75",
+  "maxWorkers": "50%",
   "projects": [
     {
       "displayName": "server",
       "roots": ["<rootDir>/server", "<rootDir>/plugins"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
-      "setupFiles": [
-        "<rootDir>/__mocks__/console.js",
-        "<rootDir>/server/test/env.ts"
-      ],
+      "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "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",
@@ -23,7 +23,8 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "modulePaths": ["<rootDir>/app"],
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -38,7 +39,8 @@
       "roots": ["<rootDir>/shared"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1"
+        "^@shared/(.*)$": "<rootDir>/shared/$1",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
@@ -51,7 +53,8 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
+        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
       "testEnvironment": "jsdom",

.sequelizerc

@@ -1,4 +1,6 @@
-require('dotenv').config({ silent: true });
+require("dotenv").config({
+  path: process.env.NODE_ENV === "test" ? ".env.test" : ".env",
+});
 
 var path = require('path');
 
@@ -6,5 +8,4 @@ module.exports = {
   'config': path.resolve('server/config', 'database.json'),
   'migrations-path': path.resolve('server', 'migrations'),
   'models-path': path.resolve('server', 'models'),
-  'seeders-path': path.resolve('server/models', 'fixtures'),
 }

Dockerfile

@@ -5,9 +5,7 @@ ARG APP_PATH
 WORKDIR $APP_PATH
 
 # ---
-FROM node:18-alpine AS runner
-
-RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates
+FROM node:20-slim AS runner
 
 LABEL org.opencontainers.image.source="https://github.com/outline/outline"
 
@@ -22,9 +20,19 @@ COPY --from=base $APP_PATH/.sequelizerc ./.sequelizerc
 COPY --from=base $APP_PATH/node_modules ./node_modules
 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
+# Create a non-root user compatible with Debian and BusyBox based images
+RUN addgroup --gid 1001 nodejs && \
+  adduser --uid 1001 --ingroup nodejs nodejs && \
+  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-slim 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,28 +1,28 @@
 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
 
 build:
-	docker-compose build --pull outline
+	docker compose build --pull outline
 
 test:
-	docker-compose up -d redis postgres s3
-	yarn sequelize db:drop --env=test
-	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	docker compose up -d redis postgres
+	NODE_ENV=test yarn sequelize db:drop
+	NODE_ENV=test yarn sequelize db:create
+	NODE_ENV=test yarn sequelize db:migrate
 	yarn test
 
 watch:
-	docker-compose up -d redis postgres s3
-	yarn sequelize db:drop --env=test
-	yarn sequelize db:create --env=test
-	yarn sequelize db:migrate --env=test
+	docker compose up -d redis postgres
+	NODE_ENV=test yarn sequelize db:drop
+	NODE_ENV=test yarn sequelize db:create
+	NODE_ENV=test yarn sequelize db:migrate
 	yarn test:watch
 
 destroy:
-	docker-compose stop
-	docker-compose rm -f
+	docker compose stop
+	docker compose rm -f
 
 .PHONY: up build destroy test watch # let's go to reserve rules names

README.md

@@ -32,7 +32,7 @@ There is a short guide for [setting up a development environment](https://docs.g
 
 Outline is built and maintained by a small team – we'd love your help to fix bugs and add features!
 
-Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher liklihood of your code being accepted.
+Before submitting a pull request _please_ discuss with the core team by creating or commenting in an issue on [GitHub](https://www.github.com/outline/outline/issues) – we'd also love to hear from you in the [discussions](https://www.github.com/outline/outline/discussions). This way we can ensure that an approach is agreed on before code is written. This will result in a much higher likelihood of your code being accepted.
 
 If you’re looking for ways to get started, here's a list of ways to help us improve Outline:
 
@@ -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).

__mocks__/react-medium-image-zoom.js

@@ -0,0 +1 @@
+export default null;

app.json

@@ -33,6 +33,11 @@
       "generator": "secret",
       "required": true
     },
+    "UTILS_SECRET": {
+      "description": "A 32-character secret key, generate with openssl rand -hex 32",
+      "generator": "secret",
+      "required": true
+    },
     "ENABLE_UPDATES": {
       "value": "true",
       "required": true
@@ -81,6 +86,14 @@
       "description": "",
       "required": false
     },
+    "OIDC_DISABLE_REDIRECT": {
+      "description": "Prevent the app from automatically redirecting to the OIDC login page",
+      "required": false
+    },
+    "OIDC_LOGOUT_URI": {
+      "description": "",
+      "required": false
+    },
     "OIDC_USERNAME_CLAIM": {
       "description": "Specify which claims to derive user information from. Supports any valid JSON path with the JWT payload",
       "value": "preferred_username",
@@ -128,11 +141,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 +156,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/apiKeys.tsx

@@ -0,0 +1,25 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import APIKeyNew from "~/scenes/APIKeyNew";
+import { createAction } from "..";
+import { SettingsSection } from "../sections";
+
+export const createApiKey = createAction({
+  name: ({ t }) => t("New API key"),
+  analyticsName: "New API key",
+  section: SettingsSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: () =>
+    stores.policies.abilities(stores.auth.team?.id || "").createApiKey,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("New API key"),
+      content: <APIKeyNew onSubmit={stores.dialogs.closeAllModals} />,
+    });
+  },
+});

app/actions/definitions/collections.tsx

@@ -3,6 +3,7 @@ import {
   EditIcon,
   PadlockIcon,
   PlusIcon,
+  SearchIcon,
   StarredIcon,
   TrashIcon,
   UnstarredIcon,
@@ -10,14 +11,17 @@ 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 SharePopover from "~/components/Sharing/Collection/SharePopover";
+import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
 import { CollectionSection } from "~/actions/sections";
+import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
+import { searchPath } from "~/utils/routeHelpers";
 
 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
   <DynamicCollectionIcon collection={collection} />
@@ -34,11 +38,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),
     }));
   },
 });
@@ -96,18 +100,39 @@ export const editCollectionPermissions = createAction({
   visible: ({ stores, activeCollectionId }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, stores, activeCollectionId }) => {
     if (!activeCollectionId) {
       return;
     }
+    const collection = stores.collections.get(activeCollectionId);
+    if (!collection) {
+      return;
+    }
 
     stores.dialogs.openModal({
-      title: t("Collection permissions"),
-      content: <CollectionPermissions collectionId={activeCollectionId} />,
+      title: t("Share this collection"),
+      content: (
+        <SharePopover
+          collection={collection}
+          onRequestClose={stores.dialogs.closeAllModals}
+          visible
+        />
+      ),
     });
   },
 });
 
+export const searchInCollection = createAction({
+  name: ({ t }) => t("Search in collection"),
+  analyticsName: "Search collection",
+  section: CollectionSection,
+  icon: <SearchIcon />,
+  visible: ({ activeCollectionId }) => !!activeCollectionId,
+  perform: ({ activeCollectionId }) => {
+    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
+  },
+});
+
 export const starCollection = createAction({
   name: ({ t }) => t("Star"),
   analyticsName: "Star collection",
@@ -131,6 +156,7 @@ export const starCollection = createAction({
 
     const collection = stores.collections.get(activeCollectionId);
     await collection?.star();
+    setPersistedState(getHeaderExpandedKey("starred"), true);
   },
 });
 
@@ -161,9 +187,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 +209,6 @@ export const deleteCollection = createAction({
     }
 
     stores.dialogs.openModal({
-      isCentered: true,
       title: t("Delete collection"),
       content: (
         <CollectionDeleteDialog

app/actions/definitions/developer.tsx

@@ -1,38 +1,120 @@
-import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
+import copy from "copy-to-clipboard";
+import {
+  BeakerIcon,
+  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";
 import { client } from "~/utils/ApiClient";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
 import Logger from "~/utils/Logger";
 import { deleteAllDatabases } from "~/utils/developer";
+import history from "~/utils/history";
+import { homePath } from "~/utils/routeHelpers";
+
+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.VERSION,
+        perform: () => copyAndToast(env.VERSION),
+      }),
+    ];
+  },
+});
 
 export const clearIndexedDB = createAction({
-  name: ({ t }) => t("Delete IndexedDB cache"),
+  name: ({ t }) => t("Clear IndexedDB cache"),
   icon: <TrashIcon />,
   keywords: "cache clear database",
   section: DeveloperSection,
   perform: async ({ t }) => {
+    history.push(homePath());
     await deleteAllDatabases();
-    stores.toasts.showToast(t("IndexedDB cache deleted"));
+    toast.success(t("IndexedDB cache cleared"));
   },
 });
 
 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: () => {
+    toast.message("Hello world", {
+      duration: 30000,
+    });
   },
 });
 
@@ -40,9 +122,9 @@ export const toggleDebugLogging = createAction({
   name: ({ t }) => t("Toggle debug logging"),
   icon: <ToolsIcon />,
   section: DeveloperSection,
-  perform: async ({ t }) => {
+  perform: ({ t }) => {
     Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    stores.toasts.showToast(
+    toast.message(
       Logger.debugLoggingEnabled
         ? t("Debug logging enabled")
         : t("Debug logging disabled")
@@ -50,13 +132,44 @@ export const toggleDebugLogging = createAction({
   },
 });
 
+export const toggleFeatureFlag = createAction({
+  name: "Toggle feature flag",
+  icon: <BeakerIcon />,
+  section: DeveloperSection,
+  visible: () => env.ENVIRONMENT === "development",
+  children: Object.values(Feature).map((flag) =>
+    createAction({
+      id: `flag-${flag}`,
+      name: flag,
+      selected: () => FeatureFlags.isEnabled(flag),
+      section: DeveloperSection,
+      perform: () => {
+        if (FeatureFlags.isEnabled(flag)) {
+          FeatureFlags.disable(flag);
+          toast.success(`Disabled feature flag: ${flag}`);
+        } else {
+          FeatureFlags.enable(flag);
+          toast.success(`Enabled feature flag: ${flag}`);
+        }
+      },
+    })
+  ),
+});
+
 export const developer = createAction({
   name: ({ t }) => t("Development"),
   keywords: "debug",
   icon: <ToolsIcon />,
   iconInContextMenu: false,
   section: DeveloperSection,
-  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
+  children: [
+    copyId,
+    toggleDebugLogging,
+    toggleFeatureFlag,
+    createToast,
+    createTestUsers,
+    clearIndexedDB,
+  ],
 });
 
 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,22 +20,31 @@ import {
   ArchiveIcon,
   ShuffleIcon,
   HistoryIcon,
-  LightBulbIcon,
+  GraphIcon,
   UnpublishIcon,
   PublishIcon,
   CommentIcon,
+  GlobeIcon,
+  CopyIcon,
+  EyeIcon,
 } from "outline-icons";
 import * as React from "react";
+import { toast } from "sonner";
 import { ExportContentType, TeamPreference } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
+import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
+import DuplicateDialog from "~/components/DuplicateDialog";
+import SharePopover from "~/components/Sharing/Document";
+import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
 import { createAction } from "~/actions";
-import { DocumentSection } from "~/actions/sections";
+import { DocumentSection, TrashSection } from "~/actions/sections";
 import env from "~/env";
+import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import {
   documentInsightsPath,
@@ -42,6 +52,10 @@ import {
   homePath,
   newDocumentPath,
   searchPath,
+  documentPath,
+  urlify,
+  trashPath,
+  newTemplatePath,
 } from "~/utils/routeHelpers";
 
 export const openDocument = createAction({
@@ -78,14 +92,66 @@ export const createDocument = createAction({
   section: DocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
-  visible: ({ currentTeamId, stores }) =>
-    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
+  visible: ({ currentTeamId, activeCollectionId, stores }) => {
+    if (
+      activeCollectionId &&
+      !stores.policies.abilities(activeCollectionId).createDocument
+    ) {
+      return false;
+    }
+
+    return (
+      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
+    );
+  },
   perform: ({ activeCollectionId, inStarredSection }) =>
     history.push(newDocumentPath(activeCollectionId), {
       starred: inStarredSection,
     }),
 });
 
+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",
@@ -108,6 +174,7 @@ export const starDocument = createAction({
 
     const document = stores.documents.get(activeDocumentId);
     await document?.star();
+    setPersistedState(getHeaderExpandedKey("starred"), true);
   },
 });
 
@@ -148,7 +215,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 +232,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 +263,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 +300,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 +331,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 +402,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 +443,48 @@ export const downloadDocument = createAction({
   ],
 });
 
+export const copyDocumentAsMarkdown = createAction({
+  name: ({ t }) => t("Copy as Markdown"),
+  section: DocumentSection,
+  keywords: "clipboard",
+  visible: ({ activeDocumentId, stores }) =>
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
+  perform: ({ stores, activeDocumentId, t }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    if (document) {
+      copy(document.toMarkdown());
+      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 +493,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 +501,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 +551,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 +590,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"));
     }
   },
 });
@@ -474,6 +606,23 @@ export const pinDocument = createAction({
   children: [pinDocumentToCollection, pinDocumentToHome],
 });
 
+export const searchInDocument = createAction({
+  name: ({ t }) => t("Search in document"),
+  analyticsName: "Search document",
+  section: DocumentSection,
+  icon: <SearchIcon />,
+  visible: ({ stores, activeDocumentId }) => {
+    if (!activeDocumentId) {
+      return false;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    return !!document?.isActive;
+  },
+  perform: ({ activeDocumentId }) => {
+    history.push(searchPath(undefined, { documentId: activeDocumentId }));
+  },
+});
+
 export const printDocument = createAction({
   name: ({ t, isContextMenu }) =>
     isContextMenu ? t("Print") : t("Print document"),
@@ -481,7 +630,7 @@ export const printDocument = createAction({
   section: DocumentSection,
   icon: <PrintIcon />,
   visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
-  perform: async () => {
+  perform: () => {
     queueMicrotask(window.print);
   },
 });
@@ -504,7 +653,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 +661,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();
@@ -536,35 +678,36 @@ export const importDocument = createAction({
 });
 
 export const createTemplate = createAction({
-  name: ({ t }) => t("Templatize"),
+  name: ({ t, activeDocumentId }) =>
+    activeDocumentId ? t("Templatize") : t("New template"),
   analyticsName: "Templatize document",
   section: DocumentSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
   visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
+    if (activeDocumentId) {
+      const document = stores.documents.get(activeDocumentId);
+      if (document?.isTemplate || !document?.isActive) {
+        return false;
+      }
     }
-    const document = stores.documents.get(activeDocumentId);
     return !!(
       !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).update &&
-      !document?.isTemplate &&
-      !document?.isDeleted
+      stores.policies.abilities(activeCollectionId).update
     );
   },
-  perform: ({ activeDocumentId, stores, t, event }) => {
-    if (!activeDocumentId) {
-      return;
-    }
+  perform: ({ activeCollectionId, activeDocumentId, stores, t, event }) => {
     event?.preventDefault();
     event?.stopPropagation();
 
-    stores.dialogs.openModal({
-      title: t("Create template"),
-      isCentered: true,
-      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
-    });
+    if (activeDocumentId) {
+      stores.dialogs.openModal({
+        title: t("Create template"),
+        content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
+      });
+    } else if (activeCollectionId) {
+      history.push(newTemplatePath(activeCollectionId));
+    }
   },
 });
 
@@ -621,7 +764,6 @@ export const moveDocument = createAction({
         title: t("Move {{ documentType }}", {
           documentType: document.noun,
         }),
-        isCentered: true,
         content: <DocumentMove document={document} />,
       });
     }
@@ -647,15 +789,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 +817,6 @@ export const deleteDocument = createAction({
         title: t("Delete {{ documentName }}", {
           documentName: document.noun,
         }),
-        isCentered: true,
         content: (
           <DocumentDelete
             document={document}
@@ -712,7 +851,6 @@ export const permanentlyDeleteDocument = createAction({
         title: t("Permanently delete {{ documentName }}", {
           documentName: document.noun,
         }),
-        isCentered: true,
         content: (
           <DocumentPermanentDelete
             document={document}
@@ -724,6 +862,27 @@ export const permanentlyDeleteDocument = createAction({
   },
 });
 
+export const permanentlyDeleteDocumentsInTrash = createAction({
+  name: ({ t }) => t("Empty trash"),
+  analyticsName: "Empty trash",
+  section: TrashSection,
+  icon: <TrashIcon />,
+  dangerous: true,
+  visible: ({ stores }) =>
+    stores.documents.deleted.length > 0 && !!stores.auth.user?.isAdmin,
+  perform: ({ stores, t, location }) => {
+    stores.dialogs.openModal({
+      title: t("Permanently delete documents in trash"),
+      content: (
+        <DeleteDocumentsInTrash
+          onSubmit={stores.dialogs.closeAllModals}
+          shouldRedirect={location.pathname === trashPath()}
+        />
+      ),
+    });
+  },
+});
+
 export const openDocumentComments = createAction({
   name: ({ t }) => t("Comments"),
   analyticsName: "Open comments",
@@ -733,8 +892,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)
     );
   },
@@ -754,7 +912,7 @@ export const openDocumentHistory = createAction({
   icon: <HistoryIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.read && !can.restore;
+    return !!activeDocumentId && can.listRevisions;
   },
   perform: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -772,10 +930,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.listViews &&
+      !document?.isTemplate &&
+      !document?.isDeleted
+    );
   },
   perform: ({ activeDocumentId, stores }) => {
     if (!activeDocumentId) {
@@ -789,6 +956,37 @@ export const openDocumentInsights = createAction({
   },
 });
 
+export const toggleViewerInsights = createAction({
+  name: ({ t, stores, activeDocumentId }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+    return document?.insightsEnabled
+      ? t("Disable viewer insights")
+      : t("Enable viewer insights");
+  },
+  analyticsName: "Toggle viewer insights",
+  section: DocumentSection,
+  icon: <EyeIcon />,
+  visible: ({ activeDocumentId, stores }) => {
+    const can = stores.policies.abilities(activeDocumentId ?? "");
+    return can.updateInsights;
+  },
+  perform: async ({ activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+    const document = stores.documents.get(activeDocumentId);
+    if (!document) {
+      return;
+    }
+
+    await document.save({
+      insightsEnabled: !document.insightsEnabled,
+    });
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
   archiveDocument,
@@ -797,6 +995,8 @@ export const rootDocumentActions = [
   deleteDocument,
   importDocument,
   downloadDocument,
+  copyDocumentLink,
+  copyDocumentAsMarkdown,
   starDocument,
   unstarDocument,
   publishDocument,
@@ -807,10 +1007,12 @@ export const rootDocumentActions = [
   moveDocument,
   openRandomDocument,
   permanentlyDeleteDocument,
+  permanentlyDeleteDocumentsInTrash,
   printDocument,
   pinDocumentToCollection,
   pinDocumentToHome,
   openDocumentComments,
   openDocumentHistory,
   openDocumentInsights,
+  shareDocument,
 ];

app/actions/definitions/navigation.tsx

@@ -3,37 +3,32 @@ import {
   SearchIcon,
   ArchiveIcon,
   TrashIcon,
-  EditIcon,
   OpenIcon,
   SettingsIcon,
-  ShapesIcon,
   KeyboardIcon,
   EmailIcon,
   LogoutIcon,
   ProfileIcon,
   BrowserIcon,
+  ShapesIcon,
+  DraftsIcon,
 } from "outline-icons";
 import * as React from "react";
-import {
-  developersUrl,
-  changelogUrl,
-  feedbackUrl,
-  githubIssuesUrl,
-} from "@shared/utils/urlHelpers";
+import { UrlHelper } from "@shared/utils/UrlHelper";
+import { isMac } from "@shared/utils/browser";
 import stores from "~/stores";
 import SearchQuery from "~/models/SearchQuery";
 import KeyboardShortcuts from "~/scenes/KeyboardShortcuts";
 import { createAction } from "~/actions";
 import { NavigationSection, RecentSearchesSection } from "~/actions/sections";
+import env from "~/env";
 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,
@@ -62,20 +57,11 @@ export const navigateToDrafts = createAction({
   name: ({ t }) => t("Drafts"),
   analyticsName: "Navigate to drafts",
   section: NavigationSection,
-  icon: <EditIcon />,
+  icon: <DraftsIcon />,
   perform: () => history.push(draftsPath()),
   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",
@@ -101,9 +87,8 @@ export const navigateToSettings = createAction({
   section: NavigationSection,
   shortcut: ["g", "s"],
   icon: <SettingsIcon />,
-  visible: ({ stores }) =>
-    stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath("details")),
+  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
+  perform: () => history.push(settingsPath()),
 });
 
 export const navigateToProfileSettings = createAction({
@@ -115,6 +100,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",
@@ -133,13 +127,22 @@ export const navigateToAccountPreferences = createAction({
   perform: () => history.push(settingsPath("preferences")),
 });
 
+export const openDocumentation = createAction({
+  name: ({ t }) => t("Documentation"),
+  analyticsName: "Open documentation",
+  section: NavigationSection,
+  iconInContextMenu: false,
+  icon: <OpenIcon />,
+  perform: () => window.open(UrlHelper.guide),
+});
+
 export const openAPIDocumentation = createAction({
   name: ({ t }) => t("API documentation"),
   analyticsName: "Open API documentation",
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  perform: () => window.open(developersUrl()),
+  perform: () => window.open(UrlHelper.developers),
 });
 
 export const toggleSidebar = createAction({
@@ -147,7 +150,7 @@ export const toggleSidebar = createAction({
   analyticsName: "Toggle sidebar",
   keywords: "hide show navigation",
   section: NavigationSection,
-  perform: ({ stores }) => stores.ui.toggleCollapsedSidebar(),
+  perform: () => stores.ui.toggleCollapsedSidebar(),
 });
 
 export const openFeedbackUrl = createAction({
@@ -156,14 +159,14 @@ export const openFeedbackUrl = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <EmailIcon />,
-  perform: () => window.open(feedbackUrl()),
+  perform: () => window.open(UrlHelper.contact),
 });
 
 export const openBugReportUrl = createAction({
   name: ({ t }) => t("Report a bug"),
   analyticsName: "Open bug report",
   section: NavigationSection,
-  perform: () => window.open(githubIssuesUrl()),
+  perform: () => window.open(UrlHelper.github),
 });
 
 export const openChangelog = createAction({
@@ -172,7 +175,7 @@ export const openChangelog = createAction({
   section: NavigationSection,
   iconInContextMenu: false,
   icon: <OpenIcon />,
-  perform: () => window.open(changelogUrl()),
+  perform: () => window.open(UrlHelper.changelog),
 });
 
 export const openKeyboardShortcuts = createAction({
@@ -210,16 +213,21 @@ export const logout = createAction({
   analyticsName: "Log out",
   section: NavigationSection,
   icon: <LogoutIcon />,
-  perform: () => stores.auth.logout(),
+  perform: async () => {
+    await stores.auth.logout();
+    if (env.OIDC_LOGOUT_URI) {
+      window.location.replace(env.OIDC_LOGOUT_URI);
+    }
+  },
 });
 
 export const rootNavigationActions = [
   navigateToHome,
   navigateToDrafts,
-  navigateToTemplates,
   navigateToArchive,
   navigateToTrash,
   downloadApp,
+  openDocumentation,
   openAPIDocumentation,
   openFeedbackUrl,
   openBugReportUrl,

app/actions/definitions/notifications.tsx

@@ -1,4 +1,4 @@
-import { MarkAsReadIcon } from "outline-icons";
+import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { createAction } from "..";
 import { NotificationSection } from "../sections";
@@ -13,4 +13,17 @@ export const markNotificationsAsRead = createAction({
   visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
 });
 
-export const rootNotificationActions = [markNotificationsAsRead];
+export const markNotificationsAsArchived = createAction({
+  name: ({ t }) => t("Archive all notifications"),
+  analyticsName: "Mark notifications as archived",
+  section: NotificationSection,
+  icon: <ArchiveIcon />,
+  iconInContextMenu: false,
+  perform: ({ stores }) => stores.notifications.markAllAsArchived(),
+  visible: ({ stores }) => stores.notifications.orderedData.length > 0,
+});
+
+export const rootNotificationActions = [
+  markNotificationsAsRead,
+  markNotificationsAsArchived,
+];

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

@@ -1,12 +1,14 @@
-import { PlusIcon } from "outline-icons";
+import { ArrowIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { stringToColor } from "@shared/utils/color";
 import RootStore from "~/stores/RootStore";
+import { LoginDialog } from "~/scenes/Login/components/LoginDialog";
 import TeamNew from "~/scenes/TeamNew";
 import TeamLogo from "~/components/TeamLogo";
 import { createAction } from "~/actions";
 import { ActionContext } from "~/types";
+import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";
 
 export const createTeamsList = ({ stores }: { stores: RootStore }) =>
@@ -60,14 +62,33 @@ export const createTeam = createAction({
     user &&
       stores.dialogs.openModal({
         title: t("Create a workspace"),
+        fullscreen: true,
         content: <TeamNew user={user} />,
       });
   },
 });
 
+export const desktopLoginTeam = createAction({
+  name: ({ t }) => t("Login to workspace"),
+  analyticsName: "Login to workspace",
+  keywords: "change switch workspace organization team",
+  section: TeamSection,
+  icon: <ArrowIcon />,
+  visible: () => Desktop.isElectron(),
+  perform: ({ t, event, stores }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("Login to workspace"),
+      content: <LoginDialog />,
+    });
+  },
+});
+
 const StyledTeamLogo = styled(TeamLogo)`
   border-radius: 2px;
   border: 0;
 `;
 
-export const rootTeamActions = [switchTeam, createTeam];
+export const rootTeamActions = [switchTeam, createTeam, desktopLoginTeam];

app/actions/definitions/users.tsx

@@ -1,8 +1,14 @@
 import { PlusIcon } from "outline-icons";
 import * as React from "react";
+import { UserRole } from "@shared/types";
+import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
 import stores from "~/stores";
+import User from "~/models/User";
 import Invite from "~/scenes/Invite";
-import { UserDeleteDialog } from "~/components/UserDialogs";
+import {
+  UserChangeRoleDialog,
+  UserDeleteDialog,
+} from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";
 
@@ -16,12 +22,47 @@ export const inviteUser = createAction({
     stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
   perform: ({ t }) => {
     stores.dialogs.openModal({
-      title: t("Invite people"),
+      title: t("Invite to workspace"),
       content: <Invite onSubmit={stores.dialogs.closeAllModals} />,
     });
   },
 });
 
+export const updateUserRoleActionFactory = (user: User, role: UserRole) =>
+  createAction({
+    name: ({ t }) =>
+      UserRoleHelper.isRoleHigher(role, user!.role)
+        ? `${t("Promote to {{ role }}", {
+            role: UserRoleHelper.displayName(role, t),
+          })}…`
+        : `${t("Demote to {{ role }}", {
+            role: UserRoleHelper.displayName(role, t),
+          })}…`,
+    analyticsName: "Update user role",
+    section: UserSection,
+    visible: ({ stores }) => {
+      const can = stores.policies.abilities(user.id);
+
+      return UserRoleHelper.isRoleHigher(role, user.role)
+        ? can.promote
+        : UserRoleHelper.isRoleLower(role, user.role)
+        ? can.demote
+        : false;
+    },
+    perform: ({ t }) => {
+      stores.dialogs.openModal({
+        title: t("Update role"),
+        content: (
+          <UserChangeRoleDialog
+            user={user}
+            role={role}
+            onSubmit={stores.dialogs.closeAllModals}
+          />
+        ),
+      });
+    },
+  });
+
 export const deleteUserActionFactory = (userId: string) =>
   createAction({
     name: ({ t }) => `${t("Delete user")}…`,
@@ -38,7 +79,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/actions/sections.ts

@@ -20,3 +20,5 @@ export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>
   t("Recent searches");
+
+export const TrashSection = ({ t }: ActionContext) => t("Trash");

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,14 +1,15 @@
 /* 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 { IntegrationService, PublicEnv } from "@shared/types";
 import env from "~/env";
 
 type Props = {
   children?: React.ReactNode;
 };
 
+// TODO: Refactor this component to allow injection from plugins
 const Analytics: React.FC = ({ children }: Props) => {
   // Google Analytics 3
   React.useEffect(() => {
@@ -43,12 +44,16 @@ const Analytics: React.FC = ({ children }: Props) => {
   React.useEffect(() => {
     const measurementIds = [];
 
-    if (env.analytics.service === IntegrationService.GoogleAnalytics) {
-      measurementIds.push(escape(env.analytics.settings?.measurementId));
-    }
     if (env.GOOGLE_ANALYTICS_ID?.startsWith("G-")) {
       measurementIds.push(env.GOOGLE_ANALYTICS_ID);
     }
+
+    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
+      if (integration.service === IntegrationService.GoogleAnalytics) {
+        measurementIds.push(escape(integration.settings?.measurementId));
+      }
+    });
+
     if (measurementIds.length === 0) {
       return;
     }
@@ -75,6 +80,32 @@ const Analytics: React.FC = ({ children }: Props) => {
     document.getElementsByTagName("head")[0]?.appendChild(script);
   }, []);
 
+  // Matomo
+  React.useEffect(() => {
+    (env.analytics as PublicEnv["analytics"]).forEach((integration) => {
+      if (integration.service !== IntegrationService.Matomo) {
+        return;
+      }
+
+      // @ts-expect-error - Matomo global variable
+      const _paq = (window._paq = window._paq || []);
+      _paq.push(["trackPageView"]);
+      _paq.push(["enableLinkTracking"]);
+      (function () {
+        const u = integration.settings?.instanceUrl;
+        _paq.push(["setTrackerUrl", u + "matomo.php"]);
+        _paq.push(["setSiteId", integration.settings?.measurementId]);
+        const d = document,
+          g = d.createElement("script"),
+          s = d.getElementsByTagName("script")[0];
+        g.type = "text/javascript";
+        g.async = true;
+        g.src = u + "matomo.js";
+        s.parentNode?.insertBefore(g, s);
+      })();
+    });
+  }, []);
+
   return <>{children}</>;
 };
 

app/components/ArrowKeyNavigation.tsx

@@ -1,13 +1,9 @@
+import { RovingTabIndexProvider } from "@getoutline/react-roving-tabindex";
 import { observer } from "mobx-react";
 import * as React from "react";
-import {
-  useCompositeState,
-  Composite,
-  CompositeStateReturn,
-} from "reakit/Composite";
 
 type Props = React.HTMLAttributes<HTMLDivElement> & {
-  children: (composite: CompositeStateReturn) => React.ReactNode;
+  children: () => React.ReactNode;
   onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
 };
 
@@ -15,40 +11,36 @@ function ArrowKeyNavigation(
   { children, onEscape, ...rest }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
-  const composite = useCompositeState();
-
   const handleKeyDown = React.useCallback(
-    (ev) => {
+    (ev: React.KeyboardEvent<HTMLDivElement>) => {
       if (onEscape) {
         if (ev.nativeEvent.isComposing) {
           return;
         }
 
         if (ev.key === "Escape") {
+          ev.preventDefault();
           onEscape(ev);
         }
 
         if (
           ev.key === "ArrowUp" &&
-          composite.currentId === composite.items[0].id
+          // If the first item is focused and the user presses ArrowUp
+          ev.currentTarget.firstElementChild === document.activeElement
         ) {
           onEscape(ev);
         }
       }
     },
-    [composite.currentId, composite.items, onEscape]
+    [onEscape]
   );
 
   return (
-    <Composite
-      {...rest}
-      {...composite}
-      onKeyDown={handleKeyDown}
-      role="menu"
-      ref={ref}
-    >
-      {children(composite)}
-    </Composite>
+    <RovingTabIndexProvider options={{ focusOnClick: true, direction: "both" }}>
+      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
+        {children()}
+      </div>
+    </RovingTabIndexProvider>
   );
 }
 

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,10 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const { ui, auth } = useStores();
   const location = useLocation();
-  const can = usePolicy(ui.activeCollectionId);
-  const { user, team } = auth;
+  const layoutRef = React.useRef<HTMLDivElement>(null);
+  const can = usePolicy(ui.activeDocumentId);
+  const canCollection = usePolicy(ui.activeCollectionId);
+  const team = useCurrentTeam();
   const documentContext = useLocalStore<DocumentContextValue>(() => ({
     editor: null,
     setEditor: (editor: TEditor) => {
@@ -66,7 +70,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
       return;
     }
     const { activeCollectionId } = ui;
-    if (!activeCollectionId || !can.createDocument) {
+    if (!activeCollectionId || !canCollection.createDocument) {
       return;
     }
     history.push(newDocumentPath(activeCollectionId));
@@ -76,29 +80,30 @@ 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,
-  });
-  const showInsights = !!matchPath(location.pathname, {
-    path: matchDocumentInsights,
-  });
+  const showHistory =
+    !!matchPath(location.pathname, {
+      path: matchDocumentHistory,
+    }) && can.listRevisions;
+  const showInsights =
+    !!matchPath(location.pathname, {
+      path: matchDocumentInsights,
+    }) && can.listViews;
   const showComments =
     !showInsights &&
     !showHistory &&
+    can.comment &&
     ui.activeDocumentId &&
     ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team?.getPreference(TeamPreference.Commenting);
+    team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence
@@ -121,15 +126,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/Breadcrumb.tsx

@@ -5,6 +5,7 @@ import styled from "styled-components";
 import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
+import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";
 
 type Props = {
@@ -75,6 +76,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   height: 24px;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
   margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+  ${undraggableOnDesktop()}
 
   svg {
     flex-shrink: 0;

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,176 @@
+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 { IconLibrary } from "@shared/utils/IconLibrary";
+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 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";
+import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
+
+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 && !collection) {
+      setValue(
+        "icon",
+        IconLibrary.findIconByKeyword(values.name) ??
+          values.icon ??
+          "collection"
+      );
+    }
+  }, [values.name, collection]);
+
+  React.useEffect(() => {
+    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
+  }, [setFocus]);
+
+  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}
+            />
+          }
+          autoComplete="off"
+          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 ||
+          FeatureFlags.isEnabled(Feature.newCollectionSharing)) && (
+          <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);
@@ -55,19 +65,15 @@ function CollectionDescription({ collection }: Props) {
       debounce(async (getValue) => {
         try {
           await collection.save({
-            description: getValue(),
+            data: getValue(false),
           });
           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(
@@ -103,12 +109,13 @@ function CollectionDescription({ collection }: Props) {
             >
               <Editor
                 key={key}
-                defaultValue={collection.description || ""}
+                defaultValue={collection.data}
                 onChange={handleChange}
                 placeholder={placeholder}
                 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

@@ -1,11 +1,12 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
+import { ellipsis } from "polished";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { MenuItem as BaseMenuItem } from "reakit/Menu";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import MenuIconWrapper from "../MenuIconWrapper";
+import MenuIconWrapper from "./MenuIconWrapper";
 
 type Props = {
   id?: string;
@@ -71,13 +72,12 @@ const MenuItem = (
           ])}
         >
           {selected !== undefined && (
-            <>
+            <MenuIconWrapper aria-hidden>
               {selected ? <CheckmarkIcon /> : <Spacer />}
-              &nbsp;
-            </>
+            </MenuIconWrapper>
           )}
-          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
-          {children}
+          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
+          <Title>{children}</Title>
         </MenuAnchor>
       );
     },
@@ -102,6 +102,12 @@ const Spacer = styled.svg`
   flex-shrink: 0;
 `;
 
+const Title = styled.div`
+  ${ellipsis()}
+  flex-grow: 1;
+  display: flex;
+`;
+
 type MenuAnchorProps = {
   level?: number;
   disabled?: boolean;
@@ -130,10 +136,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
   white-space: nowrap;
   position: relative;
 
-  svg:not(:last-child) {
-    margin-right: 4px;
-  }
-
   svg {
     flex-shrink: 0;
     opacity: ${(props) => (props.disabled ? ".5" : 1)};
@@ -155,6 +157,7 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
       cursor: var(--pointer);
 
       svg {
+        color: ${props.theme.accentText};
         fill: ${props.theme.accentText};
       }
     }

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 {
@@ -126,7 +126,7 @@ function Template({ items, actions, context, ...menu }: Props) {
           item.type !== "separator" &&
           item.type !== "heading"
         ) {
-          item.icon = item.icon || <MenuIconWrapper />;
+          item.icon = item.icon || <MenuIconWrapper aria-hidden />;
         }
 
         if (item.type === "route") {
@@ -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;
@@ -220,7 +220,7 @@ function Title({
 }) {
   return (
     <Flex align="center">
-      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+      {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
       {title}
     </Flex>
   );

app/components/ContextMenu/index.tsx

@@ -38,6 +38,8 @@ export type Placement =
 
 type Props = MenuStateReturn & {
   "aria-label"?: string;
+  /** Reference to the rendered menu div element */
+  menuRef?: React.RefObject<HTMLDivElement>;
   /** The parent menu state if this is a submenu. */
   parentMenuState?: Omit<MenuStateReturn, "items">;
   /** Called when the context menu is opened. */
@@ -46,10 +48,13 @@ 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;
 };
 
 const ContextMenu: React.FC<Props> = ({
+  menuRef,
   children,
   onOpen,
   onClose,
@@ -57,11 +62,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 +99,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;
@@ -123,52 +108,104 @@ const ContextMenu: React.FC<Props> = ({
   // trigger and the bottom of the window
   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>
-            </>
-          );
-        }}
+      <Menu
+        ref={menuRef}
+        hideOnClickOutside={!isMobile}
+        preventBodyScroll={false}
+        {...rest}
+      >
+        {(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`
@@ -186,6 +223,12 @@ export const Position = styled.div`
   position: absolute;
   z-index: ${depths.menu};
 
+  &.focus-visible {
+    transition-delay: 250ms;
+    transition-property: outline-width;
+    transition-duration: 0;
+  }
+
   /*
    * overrides make mobile-first coding style challenging
    * so we explicitly define mobile breakpoint here
@@ -203,6 +246,7 @@ export const Position = styled.div`
 type BackgroundProps = {
   topAnchor?: boolean;
   rightAnchor?: boolean;
+  maxWidth?: number;
   theme: DefaultTheme;
 };
 
@@ -228,7 +272,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,43 @@ 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);
+      } else {
+        ev.preventDefault();
+        ev.stopPropagation();
+      }
+    },
+    [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

@@ -7,6 +7,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
+import Squircle from "@shared/components/Squircle";
 import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
@@ -17,7 +18,6 @@ import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import EmojiIcon from "./Icons/EmojiIcon";
-import Squircle from "./Squircle";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
 
@@ -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,15 +1,16 @@
+import {
+  useFocusEffect,
+  useRovingTabIndex,
+} from "@getoutline/react-roving-tabindex";
 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";
-import { CompositeStateReturn, CompositeItem } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
-import Button from "~/components/Button";
 import DocumentMeta from "~/components/DocumentMeta";
 import EventBoundary from "~/components/EventBoundary";
 import Flex from "~/components/Flex";
@@ -18,12 +19,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;
@@ -35,14 +35,13 @@ type Props = {
   showPin?: boolean;
   showDraft?: boolean;
   showTemplate?: boolean;
-} & CompositeStateReturn;
+};
 
 const SEARCH_RESULT_REGEX = /<b\b[^>]*>(.*?)<\/b>/gi;
 
 function replaceResultMarks(tag: string) {
-  // don't use SEARCH_RESULT_REGEX here as it causes
-  // an infinite loop to trigger a regex inside it's own callback
-  return tag.replace(/<b\b[^>]*>(.*?)<\/b>/gi, "$1");
+  // don't use SEARCH_RESULT_REGEX directly here as it causes an infinite loop
+  return tag.replace(new RegExp(SEARCH_RESULT_REGEX.source), "$1");
 }
 
 function DocumentListItem(
@@ -51,9 +50,17 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const team = useCurrentTeam();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
+  let itemRef: React.Ref<HTMLAnchorElement> =
+    React.useRef<HTMLAnchorElement>(null);
+  if (ref) {
+    itemRef = ref;
+  }
+
+  const { focused, ...rovingTabIndex } = useRovingTabIndex(itemRef, false);
+  useFocusEffect(focused, itemRef);
+
   const {
     document,
     showParentDocuments,
@@ -71,33 +78,37 @@ 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
-      as={DocumentLink}
-      ref={ref}
+    <DocumentLink
+      ref={itemRef}
       dir={document.dir}
       role="menuitem"
       $isStarred={document.isStarred}
       $menuOpen={menuOpen}
       to={{
-        pathname: document.url,
+        pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
         },
       }}
       {...rest}
+      {...rovingTabIndex}
     >
       <Content>
         <Heading dir={document.dir}>
+          {document.emoji && (
+            <>
+              <EmojiIcon emoji={document.emoji} size={24} />
+              &nbsp;
+            </>
+          )}
           <Title
             text={document.titleWithDefault}
             highlight={highlight}
             dir={document.dir}
           />
-          {document.isBadgedNew && document.createdBy.id !== user.id && (
+          {document.isBadgedNew && document.createdBy?.id !== user.id && (
             <Badge yellow>{t("New")}</Badge>
           )}
           {canStar && (
@@ -107,7 +118,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 +146,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}
@@ -162,7 +154,7 @@ function DocumentListItem(
           modal={false}
         />
       </Actions>
-    </CompositeItem>
+    </DocumentLink>
   );
 }
 
@@ -262,8 +254,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 +271,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/DocumentMeta.tsx

@@ -95,6 +95,21 @@ const DocumentMeta: React.FC<Props> = ({
         <Time dateTime={archivedAt} addSuffix />
       </span>
     );
+  } else if (
+    document.sourceMetadata &&
+    document.sourceMetadata?.importedAt &&
+    document.sourceMetadata.importedAt >= updatedAt
+  ) {
+    content = (
+      <span>
+        {document.sourceMetadata.createdByName
+          ? t("{{ userName }} updated", {
+              userName: document.sourceMetadata.createdByName,
+            })
+          : t("Imported")}{" "}
+        <Time dateTime={createdAt} addSuffix />
+      </span>
+    );
   } else if (createdAt === updatedAt) {
     content = (
       <span>
@@ -162,7 +177,13 @@ const DocumentMeta: React.FC<Props> = ({
   };
 
   return (
-    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
+    <Container
+      align="center"
+      rtl={document.dir === "rtl"}
+      {...rest}
+      dir="ltr"
+      lang=""
+    >
       {to ? (
         <Link to={to} replace={replace}>
           {content}

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,97 @@
+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 [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  const handlePublishChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setPublish(ev.target.checked);
+    },
+    []
+  );
+
+  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({
+      publish,
+      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.isTemplate && (
+        <>
+          {document.collectionId && (
+            <Text size="small">
+              <Switch
+                name="publish"
+                label={t("Published")}
+                labelPosition="right"
+                checked={publish}
+                onChange={handlePublishChange}
+              />
+            </Text>
+          )}
+          {document.publishedAt && (
+            <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,
     ]
   );
 
@@ -277,8 +218,8 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   }, [localRef, onHeadingsChange]);
 
   const updateComments = React.useCallback(() => {
-    if (onCreateCommentMark && onDeleteCommentMark) {
-      const commentMarks = localRef.current?.getComments();
+    if (onCreateCommentMark && onDeleteCommentMark && localRef.current) {
+      const commentMarks = localRef.current.getComments();
       const commentIds = comments.orderedData.map((c) => c.id);
       const commentMarkIds = commentMarks?.map((c) => c.id);
       const newCommentIds = difference(
@@ -288,7 +229,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
       );
 
       newCommentIds.forEach((commentId) => {
-        const mark = commentMarks?.find((c) => c.id === commentId);
+        const mark = commentMarks.find((c) => c.id === commentId);
         if (mark) {
           onCreateCommentMark(mark.id, mark.userId);
         }
@@ -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,262 @@
+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",
+  "ko",
+  "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
+                locale={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

@@ -4,7 +4,7 @@ import * as React from "react";
 import { withTranslation, Trans, WithTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { githubIssuesUrl, feedbackUrl } from "@shared/utils/urlHelpers";
+import { UrlHelper } from "@shared/utils/UrlHelper";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
 import PageTitle from "~/components/PageTitle";
@@ -57,7 +57,7 @@ class ErrorBoundary extends React.Component<Props> {
   };
 
   handleReportBug = () => {
-    window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl());
+    window.open(isCloudHosted ? UrlHelper.contact : UrlHelper.github);
   };
 
   render() {
@@ -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/EventListItem.tsx

@@ -11,16 +11,12 @@ import {
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
-import { CompositeStateReturn } from "reakit/Composite";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Avatar from "~/components/Avatar";
-import CompositeItem, {
-  Props as ItemProps,
-} from "~/components/List/CompositeItem";
-import Item, { Actions } from "~/components/List/Item";
+import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
@@ -32,7 +28,7 @@ type Props = {
   document: Document;
   event: Event;
   latest?: boolean;
-} & CompositeStateReturn;
+};
 
 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
@@ -86,6 +82,18 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       icon = <TrashIcon size={16} />;
       meta = t("{{userName}} deleted", opts);
       break;
+    case "documents.add_user":
+      meta = t("{{userName}} added {{addedUserName}}", {
+        ...opts,
+        addedUserName: event.user?.name ?? t("a user"),
+      });
+      break;
+    case "documents.remove_user":
+      meta = t("{{userName}} removed {{removedUserName}}", {
+        ...opts,
+        removedUserName: event.user?.name ?? t("a user"),
+      });
+      break;
 
     case "documents.restore":
       meta = t("{{userName}} moved from trash", opts);
@@ -164,11 +172,7 @@ const BaseItem = React.forwardRef(function _BaseItem(
   { to, ...rest }: ItemProps,
   ref?: React.Ref<HTMLAnchorElement>
 ) {
-  if (to) {
-    return <CompositeListItem to={to} ref={ref} {...rest} />;
-  }
-
-  return <ListItem ref={ref} {...rest} />;
+  return <ListItem to={to} ref={ref} {...rest} />;
 });
 
 const Subtitle = styled.span`
@@ -228,8 +232,4 @@ const ListItem = styled(Item)`
   ${ItemStyle}
 `;
 
-const CompositeListItem = styled(CompositeItem)`
-  ${ItemStyle}
-`;
-
 export default observer(EventListItem);

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

@@ -5,6 +5,7 @@ import { s } from "@shared/styles";
 import User from "~/models/User";
 import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { AvatarSize } from "./Avatar/Avatar";
 
 type Props = {
   users: User[];
@@ -17,7 +18,7 @@ type Props = {
 function Facepile({
   users,
   overflow = 0,
-  size = 32,
+  size = AvatarSize.Large,
   limit = 8,
   renderAvatar = DefaultAvatar,
   ...rest
@@ -32,15 +33,18 @@ 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>
   );
 }
 
 function DefaultAvatar(user: User) {
-  return <Avatar model={user} size={32} />;
+  return <Avatar model={user} size={AvatarSize.Large} />;
 }
 
 const AvatarWrapper = styled.div`
@@ -59,11 +63,11 @@ const More = styled.div<{ size: number }>`
   min-width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
   border-radius: 100%;
-  background: ${(props) => props.theme.slate};
-  color: ${s("text")};
+  background: ${(props) => props.theme.textTertiary};
+  color: ${s("white")};
   border: 2px solid ${s("background")};
   text-align: center;
-  font-size: 11px;
+  font-size: 12px;
   font-weight: 600;
 `;
 

app/components/FilterOptions.tsx

@@ -16,7 +16,7 @@ type TFilterOption = {
 
 type Props = {
   options: TFilterOption[];
-  activeKey: string | null | undefined;
+  selectedKeys: (string | null | undefined)[];
   defaultLabel?: string;
   selectedPrefix?: string;
   className?: string;
@@ -25,7 +25,7 @@ type Props = {
 
 const FilterOptions = ({
   options,
-  activeKey = "",
+  selectedKeys = [],
   defaultLabel = "Filter options",
   selectedPrefix = "",
   className,
@@ -34,17 +34,22 @@ const FilterOptions = ({
   const menu = useMenuState({
     modal: true,
   });
-  const selected =
-    options.find((option) => option.key === activeKey) || options[0];
+  const selectedItems = options.filter((option) =>
+    selectedKeys.includes(option.key)
+  );
 
-  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";
+  const selectedLabel = selectedItems.length
+    ? selectedItems
+        .map((selected) => `${selectedPrefix} ${selected.label}`)
+        .join(", ")
+    : "";
 
   return (
-    <Wrapper>
+    <div>
       <MenuButton {...menu}>
         {(props) => (
           <StyledButton {...props} className={className} neutral disclosure>
-            {activeKey ? selectedLabel : defaultLabel}
+            {selectedItems.length ? selectedLabel : defaultLabel}
           </StyledButton>
         )}
       </MenuButton>
@@ -56,7 +61,7 @@ const FilterOptions = ({
               onSelect(option.key);
               menu.hide();
             }}
-            selected={option.key === activeKey}
+            selected={selectedKeys.includes(option.key)}
             {...menu}
           >
             {option.icon && <Icon>{option.icon}</Icon>}
@@ -71,16 +76,16 @@ const FilterOptions = ({
           </MenuItem>
         ))}
       </ContextMenu>
-    </Wrapper>
+    </div>
   );
 };
 
 const Note = styled(Text)`
-  margin-top: 2px;
-  margin-bottom: 0;
+  display: block;
+  margin: 2px 0;
   line-height: 1.2em;
   font-size: 14px;
-  font-weight: 400;
+  font-weight: 500;
   color: ${s("textTertiary")};
 `;
 
@@ -93,7 +98,7 @@ const LabelWithNote = styled.div`
   }
 `;
 
-const StyledButton = styled(Button)`
+export const StyledButton = styled(Button)`
   box-shadow: none;
   text-transform: none;
   border-color: transparent;
@@ -115,8 +120,4 @@ const Icon = styled.div`
   height: 18px;
 `;
 
-const Wrapper = styled.div`
-  margin-right: 8px;
-`;
-
 export default FilterOptions;

app/components/Flex.tsx

@@ -1,38 +1,3 @@
-import { CSSProperties } from "react";
-import styled from "styled-components";
-
-type JustifyValues = CSSProperties["justifyContent"];
-
-type AlignValues = CSSProperties["alignItems"];
-
-const Flex = styled.div<{
-  auto?: boolean;
-  column?: boolean;
-  align?: AlignValues;
-  justify?: JustifyValues;
-  wrap?: boolean;
-  shrink?: boolean;
-  reverse?: boolean;
-  gap?: number;
-}>`
-  display: flex;
-  flex: ${({ auto }) => (auto ? "1 1 auto" : "initial")};
-  flex-direction: ${({ column, reverse }) =>
-    reverse
-      ? column
-        ? "column-reverse"
-        : "row-reverse"
-      : column
-      ? "column"
-      : "row"};
-  align-items: ${({ align }) => align};
-  justify-content: ${({ justify }) => justify};
-  flex-wrap: ${({ wrap }) => (wrap ? "wrap" : "initial")};
-  flex-shrink: ${({ shrink }) =>
-    shrink === true ? 1 : shrink === false ? 0 : "initial"};
-  gap: ${({ gap }) => (gap ? `${gap}px` : "initial")};
-  min-height: 0;
-  min-width: 0;
-`;
+import Flex from "@shared/components/Flex";
 
 export default Flex;

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

@@ -2,9 +2,10 @@ import { transparentize } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
+import { getTextColor } from "@shared/utils/color";
 import Text from "~/components/Text";
 
-export const CARD_MARGIN = 16;
+export const CARD_MARGIN = 10;
 
 const NUMBER_OF_LINES = 10;
 
@@ -17,21 +18,22 @@ 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),
     0 0 1px 1px rgba(0, 0, 0, 0.05);
   overflow: hidden;
   position: absolute;
-  min-width: 350px;
-  max-width: 375px;
+  width: 375px;
 `;
 
-export const Title = styled.h2`
-  font-size: 1.25em;
-  margin: 0;
-  color: ${s("text")};
+export const Title = styled(Text).attrs({ as: "h2", size: "large" })`
+  margin-bottom: 4px;
+  display: flex;
+  align-items: flex-start;
+  justify-content: flex-start;
+  gap: 4px;
 `;
 
 export const Info = styled(StyledText).attrs(() => ({
@@ -46,6 +48,7 @@ export const Description = styled(StyledText)`
   margin-top: 0.5em;
   line-height: var(--line-height);
   max-height: calc(var(--line-height) * ${NUMBER_OF_LINES});
+  overflow: hidden;
 `;
 
 export const Thumbnail = styled.img`
@@ -54,6 +57,20 @@ export const Thumbnail = styled.img`
   background: ${s("menuBackground")};
 `;
 
+export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
+  color?: string;
+}>`
+  background-color: ${(props) =>
+    props.color ?? props.theme.secondaryBackground};
+  color: ${(props) =>
+    props.color ? getTextColor(props.color) : props.theme.text};
+  width: fit-content;
+  border-radius: 2em;
+  padding: 0 8px;
+  margin-right: 0.5em;
+  margin-top: 0.5em;
+`;
+
 export const CardContent = styled.div`
   overflow: hidden;
   user-select: none;

app/components/HoverPreview/HoverPreview.tsx

@@ -2,146 +2,93 @@ 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 { UnfurlType } from "@shared/types";
-import LoadingIndicator from "~/components/LoadingIndicator";
+import { depths } from "@shared/styles";
+import { UnfurlResourceType } from "@shared/types";
 import useEventListener from "~/hooks/useEventListener";
 import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
-import useRequest from "~/hooks/useRequest";
-import useStores from "~/hooks/useStores";
-import { client } from "~/utils/ApiClient";
+import LoadingIndicator from "../LoadingIndicator";
 import { CARD_MARGIN } from "./Components";
 import HoverPreviewDocument from "./HoverPreviewDocument";
+import HoverPreviewIssue from "./HoverPreviewIssue";
 import HoverPreviewLink from "./HoverPreviewLink";
 import HoverPreviewMention from "./HoverPreviewMention";
+import HoverPreviewPullRequest from "./HoverPreviewPullRequest";
 
-const DELAY_OPEN = 300;
-const DELAY_CLOSE = 600;
+const DELAY_CLOSE = 500;
+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;
+  /** Data to be previewed */
+  data: Record<string, any> | null;
+  /** Whether the preview data is being loaded */
+  dataLoading: boolean;
+  /** 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, data, dataLoading, onClose }: Props) {
   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 cardRef = React.useRef<HTMLDivElement | null>(null);
+  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 && data && !dataLoading) {
+      setVisible(true);
+    } else {
+      startCloseTimer();
+    }
+  }, [startCloseTimer, element, data, dataLoading]);
+
+  // 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,9 +96,9 @@ function HoverPreviewInternal({ element, onClose }: Props) {
 
       stopCloseTimer();
     };
-  }, [element, startCloseTimer, data]);
+  }, [element, startCloseTimer, isVisible, stopCloseTimer]);
 
-  if (loading) {
+  if (dataLoading) {
     return <LoadingIndicator />;
   }
 
@@ -165,24 +112,51 @@ function HoverPreviewInternal({ element, onClose }: Props) {
         {isVisible ? (
           <Animate
             initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
-            animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              transitionEnd: { pointerEvents: "auto" },
+            }}
           >
-            {data.type === UnfurlType.Mention ? (
+            {data.type === UnfurlResourceType.Mention ? (
               <HoverPreviewMention
                 ref={cardRef}
-                url={data.thumbnailUrl}
-                title={data.title}
-                info={data.meta.info}
-                color={data.meta.color}
+                name={data.name}
+                avatarUrl={data.avatarUrl}
+                color={data.color}
+                lastActive={data.lastActive}
               />
-            ) : data.type === UnfurlType.Document ? (
+            ) : data.type === UnfurlResourceType.Document ? (
               <HoverPreviewDocument
                 ref={cardRef}
-                id={data.meta.id}
                 url={data.url}
+                id={data.id}
+                title={data.title}
+                summary={data.summary}
+                lastActivityByViewer={data.lastActivityByViewer}
+              />
+            ) : data.type === UnfurlResourceType.Issue ? (
+              <HoverPreviewIssue
+                ref={cardRef}
+                url={data.url}
+                id={data.id}
                 title={data.title}
                 description={data.description}
-                info={data.meta.info}
+                author={data.author}
+                labels={data.labels}
+                state={data.state}
+                createdAt={data.createdAt}
+              />
+            ) : data.type === UnfurlResourceType.PR ? (
+              <HoverPreviewPullRequest
+                ref={cardRef}
+                url={data.url}
+                id={data.id}
+                title={data.title}
+                description={data.description}
+                author={data.author}
+                createdAt={data.createdAt}
+                state={data.state}
               />
             ) : (
               <HoverPreviewLink
@@ -193,7 +167,11 @@ function HoverPreviewInternal({ element, onClose }: Props) {
                 description={data.description}
               />
             )}
-            <Pointer offset={pointerOffset} />
+            <Pointer
+              top={pointerTop}
+              left={pointerLeft}
+              direction={pointerDir}
+            />
           </Animate>
         ) : null}
       </Position>
@@ -201,13 +179,77 @@ function HoverPreviewInternal({ element, onClose }: Props) {
   );
 }
 
-function HoverPreview({ element, ...rest }: Props) {
+function HoverPreview({ element, data, dataLoading, ...rest }: Props) {
   const isMobile = useMobile();
   if (isMobile) {
     return null;
   }
 
-  return <HoverPreviewInternal {...rest} element={element} />;
+  return (
+    <HoverPreviewDesktop
+      {...rest}
+      element={element}
+      data={data}
+      dataLoading={dataLoading}
+    />
+  );
+}
+
+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 +259,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 +268,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 +282,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/HoverPreviewDocument.tsx

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
 import {
@@ -10,21 +11,10 @@ import {
   Description,
 } from "./Components";
 
-type Props = {
-  /** Document id associated with the editor, if any */
-  id?: string;
-  /** Document url */
-  url: string;
-  /** Title for the preview card */
-  title: string;
-  /** Info about last activity on the document */
-  info: string;
-  /** Text preview of document content */
-  description: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Document], "type">;
 
 const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
-  { id, url, title, info, description }: Props,
+  { url, id, title, summary, lastActivityByViewer }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -33,12 +23,12 @@ const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
         <CardContent>
           <Flex column gap={2}>
             <Title>{title}</Title>
-            <Info>{info}</Info>
+            <Info>{lastActivityByViewer}</Info>
             <Description as="div">
               <React.Suspense fallback={<div />}>
                 <Editor
                   key={id}
-                  defaultValue={description}
+                  defaultValue={summary}
                   embedsDisabled
                   readOnly
                 />

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -0,0 +1,65 @@
+import * as React from "react";
+import { Trans } from "react-i18next";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
+import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
+import Text from "../Text";
+import Time from "../Time";
+import {
+  Preview,
+  Title,
+  Description,
+  Card,
+  CardContent,
+  Label,
+  Info,
+} from "./Components";
+
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Issue], "type">;
+
+const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
+  { url, id, title, description, author, labels, state, createdAt }: Props,
+  ref: React.Ref<HTMLDivElement>
+) {
+  const authorName = author.name;
+
+  return (
+    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
+      <Flex column ref={ref}>
+        <Card fadeOut={false}>
+          <CardContent>
+            <Flex gap={2} column>
+              <Title>
+                <IssueStatusIcon status={state.name} color={state.color} />
+                <span>
+                  {title}&nbsp;<Text type="tertiary">{id}</Text>
+                </span>
+              </Title>
+              <Flex align="center" gap={4}>
+                <Avatar src={author.avatarUrl} />
+                <Info>
+                  <Trans>
+                    {{ authorName }} created{" "}
+                    <Time dateTime={createdAt} addSuffix />
+                  </Trans>
+                </Info>
+              </Flex>
+              <Description>{description}</Description>
+
+              <Flex wrap>
+                {labels.map((label, index) => (
+                  <Label key={index} color={label.color}>
+                    {label.name}
+                  </Label>
+                ))}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </Preview>
+  );
+});
+
+export default HoverPreviewIssue;

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/HoverPreview/HoverPreviewMention.tsx

@@ -1,22 +1,14 @@
 import * as React from "react";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Avatar from "~/components/Avatar";
 import { AvatarSize } from "~/components/Avatar/Avatar";
 import Flex from "~/components/Flex";
 import { Preview, Title, Info, Card, CardContent } from "./Components";
 
-type Props = {
-  /** Resource url, avatar url in case of user mention */
-  url: string;
-  /** Title for the preview card*/
-  title: string;
-  /** Info about mentioned user's recent activity */
-  info: string;
-  /** Used for avatar's background color in absence of avatar url */
-  color: string;
-};
+type Props = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
 
 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { url, title, info, color }: Props,
+  { avatarUrl, name, lastActive, color }: Props,
   ref: React.Ref<HTMLDivElement>
 ) {
   return (
@@ -26,15 +18,15 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
           <Flex gap={12}>
             <Avatar
               model={{
-                avatarUrl: url,
-                initial: title ? title[0] : "?",
+                avatarUrl,
+                initial: name ? name[0] : "?",
                 color,
               }}
               size={AvatarSize.XLarge}
             />
             <Flex column gap={2} justify="center">
-              <Title>{title}</Title>
-              <Info>{info}</Info>
+              <Title>{name}</Title>
+              <Info>{lastActive}</Info>
             </Flex>
           </Flex>
         </CardContent>

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Trans } from "react-i18next";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
+import Flex from "~/components/Flex";
+import Avatar from "../Avatar";
+import { PullRequestIcon } from "../Icons/PullRequestIcon";
+import Text from "../Text";
+import Time from "../Time";
+import {
+  Preview,
+  Title,
+  Description,
+  Card,
+  CardContent,
+  Info,
+} from "./Components";
+
+type Props = Omit<UnfurlResponse[UnfurlResourceType.PR], "type">;
+
+const HoverPreviewPullRequest = React.forwardRef(
+  function _HoverPreviewPullRequest(
+    { url, title, id, description, author, state, createdAt }: Props,
+    ref: React.Ref<HTMLDivElement>
+  ) {
+    const authorName = author.name;
+
+    return (
+      <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
+        <Flex column ref={ref}>
+          <Card fadeOut={false}>
+            <CardContent>
+              <Flex gap={2} column>
+                <Title>
+                  <PullRequestIcon status={state.name} color={state.color} />
+                  <span>
+                    {title}&nbsp;<Text type="tertiary">{id}</Text>
+                  </span>
+                </Title>
+                <Flex align="center" gap={4}>
+                  <Avatar src={author.avatarUrl} />
+                  <Info>
+                    <Trans>
+                      {{ authorName }} opened{" "}
+                      <Time dateTime={createdAt} addSuffix />
+                    </Trans>
+                  </Info>
+                </Flex>
+                <Description>{description}</Description>
+              </Flex>
+            </CardContent>
+          </Card>
+        </Flex>
+      </Preview>
+    );
+  }
+);
+
+export default HoverPreviewPullRequest;

app/components/IconPicker.tsx

@@ -1,334 +1,201 @@
-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 { IconLibrary } from "@shared/utils/IconLibrary";
 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 InputSearch from "./InputSearch";
+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 [query, setQuery] = React.useState("");
   const { t } = useTranslation();
   const theme = useTheme();
-  const menu = useMenuState({
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "right",
     modal: true,
-    placement: "bottom-end",
   });
 
+  React.useEffect(() => {
+    if (popover.visible) {
+      onOpen?.();
+    } else {
+      onClose?.();
+      setQuery("");
+    }
+  }, [onOpen, onClose, popover.visible]);
+
+  const filteredIcons = IconLibrary.findIcons(query);
+  const handleFilter = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value.toLowerCase());
+  };
+
+  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 }
+  );
+
+  const iconNames = Object.keys(icons);
+  const delayPerIcon = 250 / iconNames.length;
+
   return (
-    <Wrapper>
-      <Label>
-        <LabelText>{t("Icon")}</LabelText>
-      </Label>
-      <MenuButton {...menu}>
+    <>
+      <PopoverDisclosure {...popover}>
         {(props) => (
-          <Button aria-label={t("Show menu")} {...props}>
-            <Icon
-              as={icons[icon || "collection"].component}
-              color={color}
-              size={30}
-            />
-          </Button>
-        )}
-      </MenuButton>
-      <ContextMenu
-        {...menu}
-        onOpen={onOpen}
-        onClose={onClose}
-        aria-label={t("Choose icon")}
-      >
-        <Icons>
-          {Object.keys(icons).map((name, index) => (
-            <MenuItem
-              key={name}
-              onClick={() => onChange(color, name)}
-              {...menu}
-            >
-              {(props) => (
-                <IconButton
-                  style={
-                    {
-                      ...style,
-                      "--delay": `${index * 8}ms`,
-                    } as React.CSSProperties
-                  }
-                  {...props}
-                >
-                  <Icon as={icons[name].component} color={color} size={30} />
-                </IconButton>
-              )}
-            </MenuItem>
-          ))}
-        </Icons>
-        <Colors>
-          <React.Suspense
-            fallback={
-              <DelayedMount>
-                <Text>{t("Loading")}…</Text>
-              </DelayedMount>
-            }
+          <NudeButton
+            aria-label={t("Show menu")}
+            className={className}
+            {...props}
           >
-            <ColorPicker
+            <Icon
+              as={IconLibrary.getComponent(icon || "collection")}
               color={color}
-              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",
-                  },
-                },
-              }}
-            />
-          </React.Suspense>
-        </Colors>
-      </ContextMenu>
-    </Wrapper>
+            >
+              {initial}
+            </Icon>
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        width={552}
+        aria-label={t("Choose an icon")}
+        hideOnClickOutside={false}
+      >
+        <Flex column gap={12}>
+          <Text size="large" weight="xbold">
+            {t("Choose an icon")}
+          </Text>
+          <InputSearch
+            value={query}
+            placeholder={`${t("Filter")}…`}
+            onChange={handleFilter}
+            autoFocus
+          />
+          <div>
+            {iconNames.map((name, index) => (
+              <MenuItem key={name} onClick={() => onChange(color, name)}>
+                {(props) => (
+                  <IconButton
+                    style={
+                      {
+                        opacity: query
+                          ? filteredIcons.includes(name)
+                            ? 1
+                            : 0.3
+                          : undefined,
+                        "--delay": `${Math.round(index * delayPerIcon)}ms`,
+                      } as React.CSSProperties
+                    }
+                    {...props}
+                  >
+                    <Icon
+                      as={IconLibrary.getComponent(name)}
+                      color={color}
+                      size={30}
+                    >
+                      {initial}
+                    </Icon>
+                  </IconButton>
+                )}
+              </MenuItem>
+            ))}
+          </div>
+          <Flex>
+            <React.Suspense
+              fallback={
+                <DelayedMount>
+                  <Text>{t("Loading")}…</Text>
+                </DelayedMount>
+              }
+            >
+              <ColorPicker
+                color={color}
+                onChange={(color) => onChange(color.hex, icon)}
+                colors={colorPalette}
+                triangle="hide"
+                styles={styles}
+              />
+            </React.Suspense>
+          </Flex>
+        </Flex>
+      </Popover>
+    </>
   );
 }
 
 const Icon = styled.svg`
-  transition: fill 150ms ease-in-out;
+  transition: color 150ms ease-in-out, fill 150ms ease-in-out;
   transition-delay: var(--delay);
 `;
 
-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 +208,4 @@ const ColorPicker = styled(TwitterPicker)`
   width: 100% !important;
 `;
 
-const Wrapper = styled("div")`
-  display: inline-block;
-  position: relative;
-`;
-
 export default IconPicker;

app/components/Icons/CircleIcon.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+type Props = {
+  /** The size of the icon, 24px is default to match standard icons */
+  size?: number;
+  /** The color of the icon, defaults to the current text color */
+  color?: string;
+  /** If true, the icon will retain its color in selected menus and other places that attempt to override it */
+  retainColor?: boolean;
+};
+
+export default function CircleIcon({
+  size = 24,
+  color = "currentColor",
+  retainColor,
+  ...rest
+}: Props) {
+  return (
+    <svg
+      fill={color}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      version="1.1"
+      style={retainColor ? { fill: color } : undefined}
+      {...rest}
+    >
+      <circle xmlns="http://www.w3.org/2000/svg" cx="12" cy="12" r="8" />
+    </svg>
+  );
+}

app/components/Icons/CollectionIcon.tsx

@@ -2,8 +2,8 @@ import { observer } from "mobx-react";
 import { CollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
+import { IconLibrary } from "@shared/utils/IconLibrary";
 import Collection from "~/models/Collection";
-import { icons } from "~/components/IconPicker";
 import useStores from "~/hooks/useStores";
 import Logger from "~/utils/Logger";
 
@@ -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/IssueStatusIcon.tsx

@@ -0,0 +1,74 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  status: string;
+  color: string;
+  size?: number;
+  className?: string;
+};
+
+/**
+ * Issue status icon based on GitHub issue status, but can be used for any git-style integration.
+ */
+export function IssueStatusIcon({ size, ...rest }: Props) {
+  return (
+    <Icon size={size}>
+      <BaseIcon {...rest} />
+    </Icon>
+  );
+}
+
+const Icon = styled.span<{ size?: number }>`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: ${(props) => props.size ?? 24}px;
+  height: ${(props) => props.size ?? 24}px;
+  align-items: center;
+  justify-content: center;
+`;
+
+function BaseIcon(props: Props) {
+  switch (props.status) {
+    case "open":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z" />
+          <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Z" />
+        </svg>
+      );
+    case "closed":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M11.28 6.78a.75.75 0 0 0-1.06-1.06L7.25 8.69 5.78 7.22a.75.75 0 0 0-1.06 1.06l2 2a.75.75 0 0 0 1.06 0l3.5-3.5Z" />
+          <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0Zm-1.5 0a6.5 6.5 0 1 0-13 0 6.5 6.5 0 0 0 13 0Z" />
+        </svg>
+      );
+    case "canceled":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0ZM1.5 8a6.5 6.5 0 1 0 13 0 6.5 6.5 0 0 0-13 0Zm9.78-2.22-5.5 5.5a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l5.5-5.5a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042Z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}

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/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/Icons/PullRequestIcon.tsx

@@ -0,0 +1,72 @@
+import * as React from "react";
+import styled from "styled-components";
+
+type Props = {
+  status: string;
+  color: string;
+  size?: number;
+  className?: string;
+};
+
+/**
+ * Issue status icon based on GitHub pull requests, but can be used for any git-style integration.
+ */
+export function PullRequestIcon({ size, ...rest }: Props) {
+  return (
+    <Icon size={size}>
+      <BaseIcon {...rest} />
+    </Icon>
+  );
+}
+
+const Icon = styled.span<{ size?: number }>`
+  display: inline-flex;
+  flex-shrink: 0;
+  width: ${(props) => props.size ?? 24}px;
+  height: ${(props) => props.size ?? 24}px;
+  align-items: center;
+  justify-content: center;
+`;
+
+function BaseIcon(props: Props) {
+  switch (props.status) {
+    case "open":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M1.5 3.25a2.25 2.25 0 1 1 3 2.122v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.25 2.25 0 0 1 1.5 3.25Zm5.677-.177L9.573.677A.25.25 0 0 1 10 .854V2.5h1A2.5 2.5 0 0 1 13.5 5v5.628a2.251 2.251 0 1 1-1.5 0V5a1 1 0 0 0-1-1h-1v1.646a.25.25 0 0 1-.427.177L7.177 3.427a.25.25 0 0 1 0-.354ZM3.75 2.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm0 9.5a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm8.25.75a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0Z" />
+        </svg>
+      );
+    case "merged":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M5.45 5.154A4.25 4.25 0 0 0 9.25 7.5h1.378a2.251 2.251 0 1 1 0 1.5H9.25A5.734 5.734 0 0 1 5 7.123v3.505a2.25 2.25 0 1 1-1.5 0V5.372a2.25 2.25 0 1 1 1.95-.218ZM4.25 13.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5Zm8.5-4.5a.75.75 0 1 0 0-1.5.75.75 0 0 0 0 1.5ZM5 3.25a.75.75 0 1 0 0 .005V3.25Z" />
+        </svg>
+      );
+    case "closed":
+      return (
+        <svg
+          viewBox="0 0 16 16"
+          width="16"
+          height="16"
+          fill={props.color}
+          className={props.className}
+        >
+          <path d="M3.25 1A2.25 2.25 0 0 1 4 5.372v5.256a2.251 2.251 0 1 1-1.5 0V5.372A2.251 2.251 0 0 1 3.25 1Zm9.5 5.5a.75.75 0 0 1 .75.75v3.378a2.251 2.251 0 1 1-1.5 0V7.25a.75.75 0 0 1 .75-.75Zm-2.03-5.273a.75.75 0 0 1 1.06 0l.97.97.97-.97a.748.748 0 0 1 1.265.332.75.75 0 0 1-.205.729l-.97.97.97.97a.751.751 0 0 1-.018 1.042.751.751 0 0 1-1.042.018l-.97-.97-.97.97a.749.749 0 0 1-1.275-.326.749.749 0 0 1 .215-.734l.97-.97-.97-.97a.75.75 0 0 1 0-1.06ZM2.5 3.25a.75.75 0 1 0 1.5 0 .75.75 0 0 0-1.5 0ZM3.25 12a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Zm9.5 0a.75.75 0 1 0 0 1.5.75.75 0 0 0 0-1.5Z" />
+        </svg>
+      );
+    default:
+      return null;
+  }
+}

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);