test

Add support for SSL in development
2026-06-13 19:35:02 +03:00 · 2023-08-08 23:12:41 -04:00 · 2023-08-08 22:46:31 -04:00
1471 changed files with 39783 additions and 77006 deletions
@@ -1,28 +1,29 @@
 {
  "presets": [
    "@babel/preset-react",
-    "@babel/preset-env",
-    "@babel/preset-typescript"
+    "@babel/preset-typescript",
+    [
+      "@babel/preset-env",
+      {
+        "corejs": {
+          "version": "3",
+          "proposals": true
+        },
+        "useBuiltIns": "usage"
+      }
+    ]
  ],
  "plugins": [
-    "babel-plugin-transform-typescript-metadata",
+    "styled-components",
    [
      "@babel/plugin-proposal-decorators",
      {
        "legacy": true
      }
    ],
-    "@babel/plugin-transform-class-properties",
-    [
-      "transform-inline-environment-variables",
-      {
-        "include": [
-          "SOURCE_COMMIT",
-          "SOURCE_VERSION"
-        ]
-      }
-    ],
-    "tsconfig-paths-module-resolver"
+    "@babel/plugin-transform-destructuring",
+    "@babel/plugin-transform-regenerator",
+    "transform-class-properties"
  ],
  "env": {
    "production": {
@@ -35,29 +36,13 @@
        ]
      ],
      "ignore": [
-        "**/__mocks__",
        "**/*.test.ts"
      ]
    },
    "development": {
      "ignore": [
-        "**/__mocks__",
        "**/*.test.ts"
      ]
-    },
-    "test": {
-      "presets": [
-        [
-          "@babel/preset-env",
-          {
-            "corejs": {
-              "version": "3",
-              "proposals": true
-            },
-            "useBuiltIns": "usage"
-          }
-        ]
-      ]
    }
  }
-}
+}
@@ -3,7 +3,7 @@ version: 2.1
 defaults: &defaults
  working_directory: ~/outline
  docker:
-    - image: cimg/node:20.10
+    - image: cimg/node:18.12
    - image: cimg/redis:5.0
    - image: cimg/postgres:14.2
      environment:
@@ -13,8 +13,13 @@ 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:
@@ -31,12 +36,12 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: install-deps
          command: yarn install --frozen-lockfile
      - save_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
          paths:
            - ./node_modules
  lint:
@@ -44,7 +49,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: lint
          command: yarn lint
@@ -53,7 +58,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: typescript
          command: yarn tsc
@@ -62,7 +67,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: test
          command: yarn test:app
@@ -71,25 +76,22 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: test
          command: yarn test:shared
  test-server:
    <<: *defaults
-    parallelism: 3
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: migrate
-          command: ./node_modules/.bin/sequelize db:migrate
+          command: ./node_modules/.bin/sequelize db:migrate --url $DATABASE_URL_TEST
      - run:
          name: test
-          command: |
-            TESTFILES=$(circleci tests glob "**/server/**/*.test.ts" | circleci tests split)
-            yarn test --maxWorkers=2 $TESTFILES
+          command: yarn test:server --forceExit
  bundle-size:
    <<: *defaults
    environment:
@@ -97,7 +99,7 @@ jobs:
    steps:
      - checkout
      - restore_cache:
-          key: dependency-cache-v1-{{ checksum "package.json" }}
+          key: dependency-cache-{{ checksum "package.json" }}
      - run:
          name: build-vite
          command: yarn vite:build
@@ -126,7 +128,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/v7,linux/arm64/v8,linux/ppc64le,linux/s390x docker-multiarch
+            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 inspect --builder docker-multiarch --bootstrap
            docker buildx use docker-multiarch
      - run:
@@ -140,12 +142,7 @@ jobs:
          command: docker push $BASE_IMAGE_NAME:latest
      - run:
          name: Build and push Docker image
-          command: |
-            if [[ "$CIRCLE_TAG" == *"-"* ]]; then
-              docker buildx build -t $IMAGE_NAME:${CIRCLE_TAG/v/''} --platform linux/amd64,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/v7,linux/arm64/v8,linux/ppc64le,linux/s390x --push .
-            fi
+          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 .

 workflows:
  version: 2
@@ -169,8 +166,9 @@ workflows:
            - build
      - bundle-size:
          requires:
-            - build
-            - types
+            - test-app
+            - test-shared
+            - test-server

  build-docker:
    jobs:
@@ -13,4 +13,5 @@ app.json
 crowdin.yml
 build
 docker-compose.yml
+fakes3
 node_modules
@@ -1,10 +0,0 @@
-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
@@ -13,6 +13,7 @@ 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
@@ -29,44 +30,32 @@ 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=
+URL=https://app.outline.dev:3000
 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=

-# 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
+# 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.

-# 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.
+# A more detailed guide on setting up S3 is available here:
+# => https://wiki.generaloutline.com/share/125de1cc-9ff6-424b-8415-0d58c809a40f
+#
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
 AWS_S3_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,
@@ -104,7 +93,6 @@ 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
@@ -116,36 +104,6 @@ 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=
-
-# To configure Discord auth, you'll need to create a Discord Application at
-# => https://discord.com/developers/applications/
-#
-# When configuring the Client ID, add a redirect URL under "OAuth2":
-# https://<URL>/auth/discord.callback
-DISCORD_CLIENT_ID=
-DISCORD_CLIENT_SECRET=
-
-# DISCORD_SERVER_ID should be the ID of the Discord server that Outline is
-# integrated with. 
-# Used to verify that the user is a member of the server as well as server
-# metadata such as nicknames, server icon and name.
-DISCORD_SERVER_ID=
-
-# DISCORD_SERVER_ROLES should be a comma separated list of role IDs that are
-# allowed to access Outline. If this is not set, all members of the server
-# will be allowed to access Outline.
-# DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
-DISCORD_SERVER_ROLES=

 # –––––––––––––––– OPTIONAL ––––––––––––––––

@@ -173,6 +131,10 @@ 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
@@ -189,9 +151,8 @@ SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true

-# For Dropbox integration, follow these instructions to get the key https://www.dropbox.com/developers/embedder#setup
-# and do not forget to whitelist your domain name in the app settings
-DROPBOX_APP_KEY=
+# 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:
@@ -205,8 +166,8 @@ SMTP_HOST=
 SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
-SMTP_REPLY_EMAIL=
+SMTP_FROM_EMAIL=hello@example.com
+SMTP_REPLY_EMAIL=hello@example.com
 SMTP_TLS_CIPHERS=
 SMTP_SECURE=true

@@ -1,31 +0,0 @@
-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
@@ -21,7 +21,7 @@
    "eslint-plugin-import",
    "eslint-plugin-node",
    "eslint-plugin-react",
-    "eslint-plugin-lodash"
+    "import"
  ],
  "rules": {
    "eqeqeq": 2,
@@ -32,21 +32,11 @@
    "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",
-      {
-        "allow": ["transaction"],
-        "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": [
@@ -65,7 +55,6 @@
    ],
    "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,
@@ -140,4 +129,4 @@
      "typescript": {}
    }
  }
-}
+}
@@ -1,7 +1,7 @@
 # Configuration for probot-no-response - https://github.com/probot/no-response

 # Number of days of inactivity before an Issue is closed for lack of response
-daysUntilClose: 7
+daysUntilClose: 14

 # Label requiring a response
 responseRequiredLabel: more information needed
@@ -2,14 +2,12 @@ dist
 build
 node_modules/*
 .env
-.env.local
-.env.production
 .log
 .vscode/*
 npm-debug.log
 stats.json
 .DS_Store
-data/*
+fakes3/*
 .idea
 *.pem
 *.key
@@ -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",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
      },
-      "setupFiles": ["<rootDir>/__mocks__/console.js"],
+      "setupFiles": [
+        "<rootDir>/__mocks__/console.js",
+        "<rootDir>/server/test/env.ts"
+      ],
      "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
-      "globalSetup": "<rootDir>/server/test/globalSetup.js",
-      "globalTeardown": "<rootDir>/server/test/globalTeardown.js",
-      "testEnvironment": "node"
+      "testEnvironment": "node",
+      "runner": "@getoutline/jest-runner-serial"
    },
    {
      "displayName": "app",
@@ -23,8 +23,7 @@
        "^~/(.*)$": "<rootDir>/app/$1",
        "^@shared/(.*)$": "<rootDir>/shared/$1",
        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
      },
      "modulePaths": ["<rootDir>/app"],
      "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -39,8 +38,7 @@
      "roots": ["<rootDir>/shared"],
      "moduleNameMapper": {
        "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
      },
      "setupFiles": ["<rootDir>/__mocks__/console.js"],
      "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
@@ -53,8 +51,7 @@
        "^~/(.*)$": "<rootDir>/app/$1",
        "^@shared/(.*)$": "<rootDir>/shared/$1",
        "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
      },
      "setupFiles": ["<rootDir>/__mocks__/window.js"],
      "testEnvironment": "jsdom",
@@ -1,6 +1,4 @@
-require("dotenv").config({
-  path: process.env.NODE_ENV === "test" ? ".env.test" : ".env",
-});
+require('dotenv').config({ silent: true });

 var path = require('path');

@@ -8,4 +6,5 @@ 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'),
 }
@@ -1,17 +1,19 @@
 ARG APP_PATH=/opt/outline
-FROM outlinewiki/outline-base AS base
+FROM outlinewiki/outline-base as base

 ARG APP_PATH
 WORKDIR $APP_PATH

 # ---
-FROM node:20-slim AS runner
+FROM node:18-alpine AS runner
+
+RUN apk update && apk add --no-cache curl && apk add --no-cache ca-certificates

 LABEL org.opencontainers.image.source="https://github.com/outline/outline"

 ARG APP_PATH
 WORKDIR $APP_PATH
-ENV NODE_ENV=production
+ENV NODE_ENV production

 COPY --from=base $APP_PATH/build ./build
 COPY --from=base $APP_PATH/server ./server
@@ -20,28 +22,11 @@ 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

-# Install wget to healthcheck the server
-RUN  apt-get update \
-  && apt-get install -y wget \
-  && rm -rf /var/lib/apt/lists/*
-
-# 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
+RUN addgroup -g 1001 -S nodejs && \
+  adduser -S nodejs -u 1001 && \
+  chown -R nodejs:nodejs $APP_PATH/build

 USER nodejs

-HEALTHCHECK --interval=1m CMD wget -qO- "http://localhost:${PORT:-3000}/_health" | grep -q "OK" || exit 1
-
 EXPOSE 3000
 CMD ["yarn", "start"]
@@ -1,5 +1,5 @@
 ARG APP_PATH=/opt/outline
-FROM node:20-slim AS deps
+FROM node:18-alpine AS deps

 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -17,5 +17,3 @@ RUN rm -rf node_modules

 RUN yarn install --production=true --frozen-lockfile --network-timeout 1000000 && \
  yarn cache clean
-
-ENV PORT=3000
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.71.0
+Licensed Work:        Outline 0.64.0
                      The Licensed Work is (c) 2020 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                      you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                      Licensed Work by creating teams and documents
                      controlled by such third parties.

-Change Date:          2027-08-18
+Change Date:          2026-05-23

 Change License:       Apache License, Version 2.0

@@ -1,28 +1,28 @@
 up:
-	docker compose up -d redis postgres
+	docker-compose up -d redis postgres s3
 	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
-	NODE_ENV=test yarn sequelize db:drop
-	NODE_ENV=test yarn sequelize db:create
-	NODE_ENV=test yarn sequelize db:migrate
+	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
 	yarn test

 watch:
-	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
+	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
 	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
@@ -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 likelihood 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 liklihood 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,10 +96,6 @@ Or to run migrations on test database:
 yarn sequelize db:migrate --env test
 ```

-# Activity
-
-![Alt](https://repobeats.axiom.co/api/embed/ff2e4e6918afff1acf9deb72d1ba6b071d586178.svg "Repobeats analytics image")
-
-# License
+## License

 Outline is [BSL 1.1 licensed](LICENSE).
@@ -1 +0,0 @@
-export default null;
@@ -33,11 +33,6 @@
      "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
@@ -86,14 +81,6 @@
      "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",
@@ -141,6 +128,11 @@
      "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",
@@ -156,11 +148,6 @@
      "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
@@ -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,
@@ -1,25 +0,0 @@
-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} />,
-    });
-  },
-});
@@ -3,8 +3,6 @@ import {
  EditIcon,
  PadlockIcon,
  PlusIcon,
-  SearchIcon,
-  ShapesIcon,
  StarredIcon,
  TrashIcon,
  UnstarredIcon,
@@ -12,17 +10,14 @@ import {
 import * as React from "react";
 import stores from "~/stores";
 import Collection from "~/models/Collection";
-import { CollectionEdit } from "~/components/Collection/CollectionEdit";
-import { CollectionNew } from "~/components/Collection/CollectionNew";
+import CollectionEdit from "~/scenes/CollectionEdit";
+import CollectionNew from "~/scenes/CollectionNew";
+import CollectionPermissions from "~/scenes/CollectionPermissions";
 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 { newTemplatePath, searchPath } from "~/utils/routeHelpers";

 const ColorCollectionIcon = ({ collection }: { collection: Collection }) => (
  <DynamicCollectionIcon collection={collection} />
@@ -39,11 +34,11 @@ export const openCollection = createAction({
    return collections.map((collection) => ({
      // Note: using url which includes the slug rather than id here to bust
      // cache if the collection is renamed
-      id: collection.path,
+      id: collection.url,
      name: collection.name,
      icon: <ColorCollectionIcon collection={collection} />,
      section: CollectionSection,
-      perform: () => history.push(collection.path),
+      perform: () => history.push(collection.url),
    }));
  },
 });
@@ -72,7 +67,7 @@ export const editCollection = createAction({
  analyticsName: "Edit collection",
  section: CollectionSection,
  icon: <EditIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
  perform: ({ t, activeCollectionId }) => {
@@ -98,52 +93,28 @@ export const editCollectionPermissions = createAction({
  analyticsName: "Collection permissions",
  section: CollectionSection,
  icon: <PadlockIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ stores, activeCollectionId }) =>
    !!activeCollectionId &&
    stores.policies.abilities(activeCollectionId).update,
  perform: ({ t, activeCollectionId }) => {
    if (!activeCollectionId) {
      return;
    }
-    const collection = stores.collections.get(activeCollectionId);
-    if (!collection) {
-      return;
-    }

    stores.dialogs.openModal({
-      title: t("Share this collection"),
-      style: { marginBottom: -12 },
-      content: (
-        <SharePopover
-          collection={collection}
-          onRequestClose={stores.dialogs.closeAllModals}
-          visible
-        />
-      ),
+      title: t("Collection permissions"),
+      content: <CollectionPermissions collectionId={activeCollectionId} />,
    });
  },
 });

-export const searchInCollection = createAction({
-  name: ({ t }) => t("Search in collection"),
-  analyticsName: "Search collection",
-  section: CollectionSection,
-  icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) =>
-    !!activeCollectionId &&
-    stores.policies.abilities(activeCollectionId).readDocument,
-  perform: ({ activeCollectionId }) => {
-    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
-  },
-});
-
 export const starCollection = createAction({
  name: ({ t }) => t("Star"),
  analyticsName: "Star collection",
  section: CollectionSection,
  icon: <StarredIcon />,
  keywords: "favorite bookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
@@ -153,14 +124,13 @@ export const starCollection = createAction({
      stores.policies.abilities(activeCollectionId).star
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }

    const collection = stores.collections.get(activeCollectionId);
    await collection?.star();
-    setPersistedState(getHeaderExpandedKey("starred"), true);
  },
 });

@@ -170,7 +140,7 @@ export const unstarCollection = createAction({
  section: CollectionSection,
  icon: <UnstarredIcon />,
  keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
@@ -180,7 +150,7 @@ export const unstarCollection = createAction({
      stores.policies.abilities(activeCollectionId).unstar
    );
  },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -191,18 +161,17 @@ 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 }) => {
+  visible: ({ activeCollectionId, stores }) => {
    if (!activeCollectionId) {
      return false;
    }
    return stores.policies.abilities(activeCollectionId).delete;
  },
-  perform: ({ activeCollectionId, t }) => {
+  perform: ({ activeCollectionId, stores, t }) => {
    if (!activeCollectionId) {
      return;
    }
@@ -213,6 +182,7 @@ export const deleteCollection = createAction({
    }

    stores.dialogs.openModal({
+      isCentered: true,
      title: t("Delete collection"),
      content: (
        <CollectionDeleteDialog
@@ -224,27 +194,6 @@ export const deleteCollection = createAction({
  },
 });

-export const createTemplate = createAction({
-  name: ({ t }) => t("New template"),
-  analyticsName: "New template",
-  section: CollectionSection,
-  icon: <ShapesIcon />,
-  keywords: "new create template",
-  visible: ({ activeCollectionId }) =>
-    !!(
-      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).createDocument
-    ),
-  perform: ({ activeCollectionId, event }) => {
-    if (!activeCollectionId) {
-      return;
-    }
-    event?.preventDefault();
-    event?.stopPropagation();
-    history.push(newTemplatePath(activeCollectionId));
-  },
-});
-
 export const rootCollectionActions = [
  openCollection,
  createCollection,
@@ -1,90 +0,0 @@
-import { DoneIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import stores from "~/stores";
-import Comment from "~/models/Comment";
-import CommentDeleteDialog from "~/components/CommentDeleteDialog";
-import history from "~/utils/history";
-import { createAction } from "..";
-import { DocumentSection } from "../sections";
-
-export const deleteCommentFactory = ({
-  comment,
-  onDelete,
-}: {
-  comment: Comment;
-  onDelete: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => `${t("Delete")}…`,
-    analyticsName: "Delete comment",
-    section: DocumentSection,
-    icon: <TrashIcon />,
-    keywords: "trash",
-    dangerous: true,
-    visible: () => stores.policies.abilities(comment.id).delete,
-    perform: ({ t, event }) => {
-      event?.preventDefault();
-      event?.stopPropagation();
-
-      stores.dialogs.openModal({
-        title: t("Delete comment"),
-        content: <CommentDeleteDialog comment={comment} onSubmit={onDelete} />,
-      });
-    },
-  });
-
-export const resolveCommentFactory = ({
-  comment,
-  onResolve,
-}: {
-  comment: Comment;
-  onResolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as resolved"),
-    analyticsName: "Resolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).resolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async ({ t }) => {
-      await comment.resolve();
-
-      history.replace({
-        ...history.location,
-        state: null,
-      });
-
-      onResolve();
-      toast.success(t("Thread resolved"));
-    },
-  });
-
-export const unresolveCommentFactory = ({
-  comment,
-  onUnresolve,
-}: {
-  comment: Comment;
-  onUnresolve: () => void;
-}) =>
-  createAction({
-    name: ({ t }) => t("Mark as unresolved"),
-    analyticsName: "Unresolve thread",
-    section: DocumentSection,
-    icon: <DoneIcon outline />,
-    visible: () =>
-      stores.policies.abilities(comment.id).unresolve &&
-      stores.policies.abilities(comment.documentId).update,
-    perform: async () => {
-      await comment.unresolve();
-
-      history.replace({
-        ...history.location,
-        state: null,
-      });
-
-      onUnresolve();
-    },
-  });
@@ -1,120 +1,38 @@
-import copy from "copy-to-clipboard";
-import {
-  BeakerIcon,
-  CopyIcon,
-  ToolsIcon,
-  TrashIcon,
-  UserIcon,
-} from "outline-icons";
+import { ToolsIcon, TrashIcon, UserIcon } from "outline-icons";
 import * as React from "react";
-import { toast } from "sonner";
+import stores from "~/stores";
 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("Clear IndexedDB cache"),
+  name: ({ t }) => t("Delete IndexedDB cache"),
  icon: <TrashIcon />,
  keywords: "cache clear database",
  section: DeveloperSection,
  perform: async ({ t }) => {
-    history.push(homePath());
    await deleteAllDatabases();
-    toast.success(t("IndexedDB cache cleared"));
+    stores.toasts.showToast(t("IndexedDB cache deleted"));
  },
 });

 export const createTestUsers = createAction({
-  name: "Create 10 test users",
+  name: "Create 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`);
-  },
-});

-export const createToast = createAction({
-  name: "Create toast",
-  section: DeveloperSection,
-  visible: () => env.ENVIRONMENT === "development",
-  perform: () => {
-    toast.message("Hello world", {
-      duration: 30000,
-    });
+    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" });
+    }
  },
 });

@@ -122,9 +40,9 @@ export const toggleDebugLogging = createAction({
  name: ({ t }) => t("Toggle debug logging"),
  icon: <ToolsIcon />,
  section: DeveloperSection,
-  perform: ({ t }) => {
+  perform: async ({ t }) => {
    Logger.debugLoggingEnabled = !Logger.debugLoggingEnabled;
-    toast.message(
+    stores.toasts.showToast(
      Logger.debugLoggingEnabled
        ? t("Debug logging enabled")
        : t("Debug logging disabled")
@@ -132,44 +50,13 @@ 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: [
-    copyId,
-    toggleDebugLogging,
-    toggleFeatureFlag,
-    createToast,
-    createTestUsers,
-    clearIndexedDB,
-  ],
+  children: [clearIndexedDB, toggleDebugLogging, createTestUsers],
 });

 export const rootDeveloperActions = [developer];
@@ -1,4 +1,3 @@
-import copy from "copy-to-clipboard";
 import invariant from "invariant";
 import {
  DownloadIcon,
@@ -20,42 +19,29 @@ import {
  ArchiveIcon,
  ShuffleIcon,
  HistoryIcon,
-  GraphIcon,
+  LightBulbIcon,
  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 DuplicateDialog from "~/components/DuplicateDialog";
-import SharePopover from "~/components/Sharing/Document";
-import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
-import DocumentTemplatizeDialog from "~/components/TemplatizeDialog";
+import DocumentTemplatizeDialog from "~/components/DocumentTemplatizeDialog";
 import { createAction } from "~/actions";
-import { DocumentSection, TrashSection } from "~/actions/sections";
+import { DocumentSection } from "~/actions/sections";
 import env from "~/env";
-import { setPersistedState } from "~/hooks/usePersistedState";
 import history from "~/utils/history";
 import {
  documentInsightsPath,
  documentHistoryPath,
  homePath,
  newDocumentPath,
-  newNestedDocumentPath,
  searchPath,
-  documentPath,
-  urlify,
-  trashPath,
 } from "~/utils/routeHelpers";

 export const openDocument = createAction({
@@ -92,58 +78,11 @@ export const createDocument = createAction({
  section: DocumentSection,
  icon: <NewDocumentIcon />,
  keywords: "create",
-  visible: ({ currentTeamId, activeCollectionId, stores }) => {
-    if (
-      activeCollectionId &&
-      !stores.policies.abilities(activeCollectionId).createDocument
-    ) {
-      return false;
-    }
-
-    return (
-      !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument
-    );
-  },
-  perform: ({ activeCollectionId, sidebarContext }) =>
+  visible: ({ currentTeamId, stores }) =>
+    !!currentTeamId && stores.policies.abilities(currentTeamId).createDocument,
+  perform: ({ activeCollectionId, inStarredSection }) =>
    history.push(newDocumentPath(activeCollectionId), {
-      sidebarContext,
-    }),
-});
-
-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, sidebarContext }) =>
-    history.push(
-      newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
-      {
-        sidebarContext,
-      }
-    ),
-});
-
-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: ({ activeDocumentId, sidebarContext }) =>
-    history.push(newNestedDocumentPath(activeDocumentId), {
-      sidebarContext,
+      starred: inStarredSection,
    }),
 });

@@ -169,7 +108,6 @@ export const starDocument = createAction({

    const document = stores.documents.get(activeDocumentId);
    await document?.star();
-    setPersistedState(getHeaderExpandedKey("starred"), true);
  },
 });

@@ -210,7 +148,7 @@ export const publishDocument = createAction({
    }
    const document = stores.documents.get(activeDocumentId);
    return (
-      !!document?.isDraft && stores.policies.abilities(activeDocumentId).publish
+      !!document?.isDraft && stores.policies.abilities(activeDocumentId).update
    );
  },
  perform: async ({ activeDocumentId, stores, t }) => {
@@ -223,18 +161,17 @@ export const publishDocument = createAction({
      return;
    }

-    if (document?.collectionId || document?.template) {
+    if (document?.collectionId) {
      await document.save(undefined, {
        publish: true,
      });
-      toast.success(
-        t("Published {{ documentName }}", {
-          documentName: document.noun,
-        })
-      );
+      stores.toasts.showToast(t("Document published"), {
+        type: "success",
+      });
    } else if (document) {
      stores.dialogs.openModal({
        title: t("Publish document"),
+        isCentered: true,
        content: <DocumentPublish document={document} />,
      });
    }
@@ -258,17 +195,12 @@ export const unpublishDocument = createAction({
    }

    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }

-    await document.unpublish();
+    await document?.unpublish();

-    toast.success(
-      t("Unpublished {{ documentName }}", {
-        documentName: document.noun,
-      })
-    );
+    stores.toasts.showToast(t("Document unpublished"), {
+      type: "success",
+    });
  },
 });

@@ -295,8 +227,12 @@ export const subscribeDocument = createAction({
    }

    const document = stores.documents.get(activeDocumentId);
+
    await document?.subscribe();
-    toast.success(t("Subscribed to document notifications"));
+
+    stores.toasts.showToast(t("Subscribed to document notifications"), {
+      type: "success",
+    });
  },
 });

@@ -326,43 +262,8 @@ export const unsubscribeDocument = createAction({

    await document?.unsubscribe(currentUserId);

-    toast.success(t("Unsubscribed from document notifications"));
-  },
-});
-
-export const shareDocument = createAction({
-  name: ({ t }) => `${t("Permissions")}…`,
-  analyticsName: "Share document",
-  section: DocumentSection,
-  icon: <GlobeIcon />,
-  visible: ({ stores, activeDocumentId }) => {
-    const can = stores.policies.abilities(activeDocumentId!);
-    return can.manageUsers || can.share;
-  },
-  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({
-      style: { marginBottom: -12 },
-      title: t("Share this document"),
-      content: (
-        <SharePopover
-          document={document}
-          share={share}
-          sharedParent={sharedParent}
-          onRequestClose={stores.dialogs.closeAllModals}
-          visible
-        />
-      ),
+    stores.toasts.showToast(t("Unsubscribed from document notifications"), {
+      type: "success",
    });
  },
 });
@@ -402,11 +303,15 @@ export const downloadDocumentAsPDF = createAction({
      return;
    }

-    const id = toast.loading(`${t("Exporting")}…`);
+    const id = stores.toasts.showToast(`${t("Exporting")}…`, {
+      type: "loading",
+      timeout: 30 * 1000,
+    });
+
    const document = stores.documents.get(activeDocumentId);
-    return document
+    document
      ?.download(ExportContentType.Pdf)
-      .finally(() => id && toast.dismiss(id));
+      .finally(() => id && stores.toasts.hideToast(id));
  },
 });

@@ -443,48 +348,6 @@ 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"),
@@ -493,7 +356,7 @@ export const duplicateDocument = createAction({
  icon: <DuplicateIcon />,
  keywords: "copy",
  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).duplicate,
+    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
  perform: async ({ activeDocumentId, t, stores }) => {
    if (!activeDocumentId) {
      return;
@@ -501,18 +364,11 @@ export const duplicateDocument = createAction({

    const document = stores.documents.get(activeDocumentId);
    invariant(document, "Document must exist");
-
-    stores.dialogs.openModal({
-      title: t("Copy document"),
-      content: (
-        <DuplicateDialog
-          document={document}
-          onSubmit={(response) => {
-            stores.dialogs.closeAllModals();
-            history.push(documentPath(response[0]));
-          }}
-        />
-      ),
+    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",
    });
  },
 });
@@ -551,13 +407,19 @@ export const pinDocumentToCollection = createAction({
      return;
    }

-    const document = stores.documents.get(activeDocumentId);
-    await document?.pin(document.collectionId);
+    try {
+      const document = stores.documents.get(activeDocumentId);
+      await document?.pin(document.collectionId);

-    const collection = stores.collections.get(activeCollectionId);
+      const collection = stores.collections.get(activeCollectionId);

-    if (!collection || !location.pathname.startsWith(collection?.url)) {
-      toast.success(t("Pinned to collection"));
+      if (!collection || !location.pathname.startsWith(collection?.url)) {
+        stores.toasts.showToast(t("Pinned to collection"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
    }
  },
 });
@@ -590,10 +452,16 @@ export const pinDocumentToHome = createAction({
    }
    const document = stores.documents.get(activeDocumentId);

-    await document?.pin();
+    try {
+      await document?.pin();

-    if (location.pathname !== homePath()) {
-      toast.success(t("Pinned to home"));
+      if (location.pathname !== homePath()) {
+        stores.toasts.showToast(t("Pinned to team home"));
+      }
+    } catch (err) {
+      stores.toasts.showToast(err.message, {
+        type: "error",
+      });
    }
  },
 });
@@ -606,23 +474,6 @@ 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"),
@@ -630,7 +481,7 @@ export const printDocument = createAction({
  section: DocumentSection,
  icon: <PrintIcon />,
  visible: ({ activeDocumentId }) => !!(activeDocumentId && window.print),
-  perform: () => {
+  perform: async () => {
    queueMicrotask(window.print);
  },
 });
@@ -653,7 +504,7 @@ export const importDocument = createAction({
    return false;
  },
  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const { documents } = stores;
+    const { documents, toasts } = stores;
    const input = document.createElement("input");
    input.type = "file";
    input.accept = documents.importFileTypes.join(", ");
@@ -661,9 +512,8 @@ export const importDocument = createAction({
    input.onchange = async (ev) => {
      const files = getEventFiles(ev);

-      const file = files[0];
-
      try {
+        const file = files[0];
        const document = await documents.import(
          file,
          activeDocumentId,
@@ -674,7 +524,9 @@ export const importDocument = createAction({
        );
        history.push(document.url);
      } catch (err) {
-        toast.error(err.message);
+        toasts.showToast(err.message, {
+          type: "error",
+        });
        throw err;
      }
    };
@@ -683,22 +535,22 @@ export const importDocument = createAction({
  },
 });

-export const createTemplateFromDocument = createAction({
+export const createTemplate = createAction({
  name: ({ t }) => t("Templatize"),
  analyticsName: "Templatize document",
  section: DocumentSection,
  icon: <ShapesIcon />,
  keywords: "new create template",
  visible: ({ activeCollectionId, activeDocumentId, stores }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document?.isTemplate || !document?.isActive) {
+    if (!activeDocumentId) {
      return false;
    }
+    const document = stores.documents.get(activeDocumentId);
    return !!(
      !!activeCollectionId &&
-      stores.policies.abilities(activeCollectionId).updateDocument
+      stores.policies.abilities(activeCollectionId).update &&
+      !document?.isTemplate &&
+      !document?.isDeleted
    );
  },
  perform: ({ activeDocumentId, stores, t, event }) => {
@@ -707,8 +559,10 @@ export const createTemplateFromDocument = createAction({
    }
    event?.preventDefault();
    event?.stopPropagation();
+
    stores.dialogs.openModal({
      title: t("Create template"),
+      isCentered: true,
      content: <DocumentTemplatizeDialog documentId={activeDocumentId} />,
    });
  },
@@ -724,11 +578,11 @@ export const openRandomDocument = createAction({
    const documentPaths = stores.collections.pathsToDocuments.filter(
      (path) => path.type === "document" && path.id !== activeDocumentId
    );
-    const randomPath =
+    const documentPath =
      documentPaths[Math.round(Math.random() * documentPaths.length)];

-    if (randomPath) {
-      history.push(randomPath.url);
+    if (documentPath) {
+      history.push(documentPath.url);
    }
  },
 });
@@ -745,50 +599,11 @@ export const searchDocumentsForQuery = (searchQuery: string) =>
    visible: ({ location }) => location.pathname !== searchPath(),
  });

-export const moveTemplateToWorkspace = createAction({
-  name: ({ t }) => t("Move to workspace"),
-  analyticsName: "Move template to workspace",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: async ({ activeDocumentId, stores }) => {
-    if (activeDocumentId) {
-      const document = stores.documents.get(activeDocumentId);
-      if (!document) {
-        return;
-      }
-
-      await document.move({
-        collectionId: null,
-      });
-    }
-  },
-});
-
-export const moveDocumentToCollection = createAction({
-  name: ({ activeDocumentId, stores, t }) => {
-    if (!activeDocumentId) {
-      return t("Move");
-    }
-    const document = stores.documents.get(activeDocumentId);
-    return document?.template && document?.collectionId
-      ? t("Move to collection")
-      : t("Move");
-  },
+export const moveDocument = createAction({
+  name: ({ t }) => t("Move"),
  analyticsName: "Move document",
  section: DocumentSection,
  icon: <MoveIcon />,
-  iconInContextMenu: false,
  visible: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
      return false;
@@ -806,50 +621,13 @@ export const moveDocumentToCollection = createAction({
        title: t("Move {{ documentType }}", {
          documentType: document.noun,
        }),
+        isCentered: true,
        content: <DocumentMove document={document} />,
      });
    }
  },
 });

-export const moveDocument = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the button if this is a non-workspace template.
-    if (!document || (document.template && !document.isWorkspaceTemplate)) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  perform: moveDocumentToCollection.perform,
-});
-
-export const moveTemplate = createAction({
-  name: ({ t }) => t("Move"),
-  analyticsName: "Move document",
-  section: DocumentSection,
-  icon: <MoveIcon />,
-  visible: ({ activeDocumentId, stores }) => {
-    if (!activeDocumentId) {
-      return false;
-    }
-    const document = stores.documents.get(activeDocumentId);
-    // Don't show the menu if this is not a template (or) a workspace template.
-    if (!document || !document.template || document.isWorkspaceTemplate) {
-      return false;
-    }
-    return !!stores.policies.abilities(activeDocumentId).move;
-  },
-  children: [moveTemplateToWorkspace, moveDocumentToCollection],
-});
-
 export const archiveDocument = createAction({
  name: ({ t }) => t("Archive"),
  analyticsName: "Archive document",
@@ -869,13 +647,15 @@ export const archiveDocument = createAction({
      }

      await document.archive();
-      toast.success(t("Document archived"));
+      stores.toasts.showToast(t("Document archived"), {
+        type: "success",
+      });
    }
  },
 });

 export const deleteDocument = createAction({
-  name: ({ t }) => `${t("Delete")}…`,
+  name: ({ t }) => t("Delete"),
  analyticsName: "Delete document",
  section: DocumentSection,
  icon: <TrashIcon />,
@@ -897,6 +677,7 @@ export const deleteDocument = createAction({
        title: t("Delete {{ documentName }}", {
          documentName: document.noun,
        }),
+        isCentered: true,
        content: (
          <DocumentDelete
            document={document}
@@ -931,6 +712,7 @@ export const permanentlyDeleteDocument = createAction({
        title: t("Permanently delete {{ documentName }}", {
          documentName: document.noun,
        }),
+        isCentered: true,
        content: (
          <DocumentPermanentDelete
            document={document}
@@ -942,27 +724,6 @@ 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",
@@ -972,7 +733,8 @@ export const openDocumentComments = createAction({
    const can = stores.policies.abilities(activeDocumentId ?? "");
    return (
      !!activeDocumentId &&
-      can.comment &&
+      can.read &&
+      !can.restore &&
      !!stores.auth.team?.getPreference(TeamPreference.Commenting)
    );
  },
@@ -992,7 +754,7 @@ export const openDocumentHistory = createAction({
  icon: <HistoryIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
-    return !!activeDocumentId && can.listRevisions;
+    return !!activeDocumentId && can.read && !can.restore;
  },
  perform: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -1010,19 +772,10 @@ export const openDocumentInsights = createAction({
  name: ({ t }) => t("Insights"),
  analyticsName: "Open document insights",
  section: DocumentSection,
-  icon: <GraphIcon />,
+  icon: <LightBulbIcon />,
  visible: ({ activeDocumentId, stores }) => {
    const can = stores.policies.abilities(activeDocumentId ?? "");
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-
-    return (
-      !!activeDocumentId &&
-      can.listViews &&
-      !document?.isTemplate &&
-      !document?.isDeleted
-    );
+    return !!activeDocumentId && can.read;
  },
  perform: ({ activeDocumentId, stores }) => {
    if (!activeDocumentId) {
@@ -1036,47 +789,14 @@ 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,
  createDocument,
-  createTemplateFromDocument,
+  createTemplate,
  deleteDocument,
  importDocument,
  downloadDocument,
-  copyDocumentLink,
-  copyDocumentAsMarkdown,
  starDocument,
  unstarDocument,
  publishDocument,
@@ -1084,16 +804,13 @@ export const rootDocumentActions = [
  subscribeDocument,
  unsubscribeDocument,
  duplicateDocument,
-  moveTemplateToWorkspace,
-  moveDocumentToCollection,
+  moveDocument,
  openRandomDocument,
  permanentlyDeleteDocument,
-  permanentlyDeleteDocumentsInTrash,
  printDocument,
  pinDocumentToCollection,
  pinDocumentToHome,
  openDocumentComments,
  openDocumentHistory,
  openDocumentInsights,
-  shareDocument,
 ];
@@ -3,32 +3,37 @@ import {
  SearchIcon,
  ArchiveIcon,
  TrashIcon,
+  EditIcon,
  OpenIcon,
  SettingsIcon,
+  ShapesIcon,
  KeyboardIcon,
  EmailIcon,
  LogoutIcon,
  ProfileIcon,
  BrowserIcon,
-  ShapesIcon,
-  DraftsIcon,
 } from "outline-icons";
 import * as React from "react";
-import { UrlHelper } from "@shared/utils/UrlHelper";
-import { isMac } from "@shared/utils/browser";
+import {
+  developersUrl,
+  changelogUrl,
+  feedbackUrl,
+  githubIssuesUrl,
+} from "@shared/utils/urlHelpers";
 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,
@@ -57,11 +62,20 @@ export const navigateToDrafts = createAction({
  name: ({ t }) => t("Drafts"),
  analyticsName: "Navigate to drafts",
  section: NavigationSection,
-  icon: <DraftsIcon />,
+  icon: <EditIcon />,
  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",
@@ -87,8 +101,9 @@ export const navigateToSettings = createAction({
  section: NavigationSection,
  shortcut: ["g", "s"],
  icon: <SettingsIcon />,
-  visible: () => stores.policies.abilities(stores.auth.team?.id || "").update,
-  perform: () => history.push(settingsPath()),
+  visible: ({ stores }) =>
+    stores.policies.abilities(stores.auth.team?.id || "").update,
+  perform: () => history.push(settingsPath("details")),
 });

 export const navigateToProfileSettings = createAction({
@@ -100,15 +115,6 @@ 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",
@@ -127,22 +133,13 @@ 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(UrlHelper.developers),
+  perform: () => window.open(developersUrl()),
 });

 export const toggleSidebar = createAction({
@@ -150,7 +147,7 @@ export const toggleSidebar = createAction({
  analyticsName: "Toggle sidebar",
  keywords: "hide show navigation",
  section: NavigationSection,
-  perform: () => stores.ui.toggleCollapsedSidebar(),
+  perform: ({ stores }) => stores.ui.toggleCollapsedSidebar(),
 });

 export const openFeedbackUrl = createAction({
@@ -159,14 +156,14 @@ export const openFeedbackUrl = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <EmailIcon />,
-  perform: () => window.open(UrlHelper.contact),
+  perform: () => window.open(feedbackUrl()),
 });

 export const openBugReportUrl = createAction({
  name: ({ t }) => t("Report a bug"),
  analyticsName: "Open bug report",
  section: NavigationSection,
-  perform: () => window.open(UrlHelper.github),
+  perform: () => window.open(githubIssuesUrl()),
 });

 export const openChangelog = createAction({
@@ -175,7 +172,7 @@ export const openChangelog = createAction({
  section: NavigationSection,
  iconInContextMenu: false,
  icon: <OpenIcon />,
-  perform: () => window.open(UrlHelper.changelog),
+  perform: () => window.open(changelogUrl()),
 });

 export const openKeyboardShortcuts = createAction({
@@ -213,23 +210,16 @@ export const logout = createAction({
  analyticsName: "Log out",
  section: NavigationSection,
  icon: <LogoutIcon />,
-  perform: async () => {
-    await stores.auth.logout();
-    if (env.OIDC_LOGOUT_URI) {
-      setTimeout(() => {
-        window.location.replace(env.OIDC_LOGOUT_URI);
-      }, 200);
-    }
-  },
+  perform: () => stores.auth.logout(),
 });

 export const rootNavigationActions = [
  navigateToHome,
  navigateToDrafts,
+  navigateToTemplates,
  navigateToArchive,
  navigateToTrash,
  downloadApp,
-  openDocumentation,
  openAPIDocumentation,
  openFeedbackUrl,
  openBugReportUrl,
@@ -1,4 +1,4 @@
-import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
+import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { createAction } from "..";
 import { NotificationSection } from "../sections";
@@ -13,17 +13,4 @@ export const markNotificationsAsRead = createAction({
  visible: ({ stores }) => stores.notifications.approximateUnreadCount > 0,
 });

-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,
-];
+export const rootNotificationActions = [markNotificationsAsRead];
@@ -2,7 +2,6 @@ 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";
@@ -17,7 +16,7 @@ export const restoreRevision = createAction({
  analyticsName: "Restore revision",
  icon: <RestoreIcon />,
  section: RevisionSection,
-  visible: ({ activeDocumentId }) =>
+  visible: ({ activeDocumentId, stores }) =>
    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
  perform: async ({ event, location, activeDocumentId }) => {
    event?.preventDefault();
@@ -47,7 +46,7 @@ export const copyLinkToRevision = createAction({
  analyticsName: "Copy link to revision",
  icon: <LinkIcon />,
  section: RevisionSection,
-  perform: async ({ activeDocumentId, t }) => {
+  perform: async ({ activeDocumentId, stores, t }) => {
    if (!activeDocumentId) {
      return;
    }
@@ -69,7 +68,9 @@ export const copyLinkToRevision = createAction({
    copy(url, {
      format: "text/plain",
      onCopy: () => {
-        toast.message(t("Link copied"));
+        stores.toasts.showToast(t("Link copied"), {
+          type: "info",
+        });
      },
    });
  },
@@ -1,14 +1,12 @@
-import { ArrowIcon, PlusIcon } from "outline-icons";
+import { PlusIcon } from "outline-icons";
 import * as React from "react";
 import styled from "styled-components";
 import { stringToColor } from "@shared/utils/color";
 import RootStore from "~/stores/RootStore";
-import { 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 }) =>
@@ -62,33 +60,14 @@ 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, desktopLoginTeam];
+export const rootTeamActions = [switchTeam, createTeam];
@@ -1,14 +1,8 @@
 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 {
-  UserChangeRoleDialog,
-  UserDeleteDialog,
-} from "~/components/UserDialogs";
+import { UserDeleteDialog } from "~/components/UserDialogs";
 import { createAction } from "~/actions";
 import { UserSection } from "~/actions/sections";

@@ -18,51 +12,16 @@ export const inviteUser = createAction({
  icon: <PlusIcon />,
  keywords: "team member workspace user",
  section: UserSection,
-  visible: () =>
+  visible: ({ stores }) =>
    stores.policies.abilities(stores.auth.team?.id || "").inviteUser,
  perform: ({ t }) => {
    stores.dialogs.openModal({
-      title: t("Invite to workspace"),
+      title: t("Invite people"),
      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: () => {
-      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")}…`,
@@ -70,7 +29,7 @@ export const deleteUserActionFactory = (userId: string) =>
    keywords: "leave",
    dangerous: true,
    section: UserSection,
-    visible: () => stores.policies.abilities(userId).delete,
+    visible: ({ stores }) => stores.policies.abilities(userId).delete,
    perform: ({ t }) => {
      const user = stores.users.get(userId);
      if (!user) {
@@ -79,6 +38,7 @@ export const deleteUserActionFactory = (userId: string) =>

      stores.dialogs.openModal({
        title: t("Delete user"),
+        isCentered: true,
        content: (
          <UserDeleteDialog
            user={user}
@@ -1,6 +1,5 @@
-import flattenDeep from "lodash/flattenDeep";
+import { flattenDeep } from "lodash";
 import * as React from "react";
-import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";
 import {
@@ -74,7 +73,15 @@ export function actionToMenuItem(
    icon,
    visible,
    dangerous: action.dangerous,
-    onClick: () => performAction(action, context),
+    onClick: () => {
+      try {
+        action.perform?.(context);
+      } catch (err) {
+        context.stores.toasts.showToast(err.message, {
+          type: "error",
+        });
+      }
+    },
    selected: action.selected?.(context),
  };
 }
@@ -108,24 +115,8 @@ export function actionToKBar(
      keywords: action.keywords ?? "",
      shortcut: action.shortcut || [],
      icon: resolvedIcon,
-      perform: action.perform
-        ? () => performAction(action, context)
-        : undefined,
+      perform: action.perform ? () => action.perform?.(context) : undefined,
    },
-  ].concat(
    // @ts-expect-error ts-migrate(2769) FIXME: No overload matches this call.
-    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;
+  ].concat(children.map((child) => ({ ...child, parent: action.id })));
 }
@@ -20,5 +20,3 @@ export const TeamSection = ({ t }: ActionContext) => t("Workspace");

 export const RecentSearchesSection = ({ t }: ActionContext) =>
  t("Recent searches");
-
-export const TrashSection = ({ t }: ActionContext) => t("Trash");
@@ -1,8 +1,6 @@
 /* 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> & {
@@ -26,7 +24,6 @@ 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;

@@ -63,12 +60,10 @@ const ActionButton = React.forwardRef<HTMLButtonElement, Props>(
            ? (ev) => {
                ev.preventDefault();
                ev.stopPropagation();
-                const response = performAction(action, actionContext);
+                const response = action.perform?.(actionContext);
                if (response?.finally) {
                  setExecuting(true);
-                  void response.finally(
-                    () => isMounted() && setExecuting(false)
-                  );
+                  response.finally(() => setExecuting(false));
                }
              }
            : rest.onClick
@@ -1,15 +1,14 @@
 /* eslint-disable prefer-rest-params */
 /* global ga */
-import escape from "lodash/escape";
+import { escape } from "lodash";
 import * as React from "react";
-import { IntegrationService, PublicEnv } from "@shared/types";
+import { IntegrationService } 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(() => {
@@ -44,16 +43,12 @@ 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;
    }
@@ -80,32 +75,6 @@ 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}</>;
 };

@@ -1,50 +1,54 @@
-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: () => React.ReactNode;
+  children: (composite: CompositeStateReturn) => React.ReactNode;
  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
-  items: unknown[];
 };

 function ArrowKeyNavigation(
-  { children, onEscape, items, ...rest }: Props,
+  { children, onEscape, ...rest }: Props,
  ref: React.RefObject<HTMLDivElement>
 ) {
+  const composite = useCompositeState();
+
  const handleKeyDown = React.useCallback(
-    (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    (ev) => {
      if (onEscape) {
        if (ev.nativeEvent.isComposing) {
          return;
        }

        if (ev.key === "Escape") {
-          ev.preventDefault();
          onEscape(ev);
        }

        if (
          ev.key === "ArrowUp" &&
-          // If the first item is focused and the user presses ArrowUp
-          ev.currentTarget.firstElementChild === document.activeElement
+          composite.currentId === composite.items[0].id
        ) {
          onEscape(ev);
        }
      }
    },
-    [onEscape]
+    [composite.currentId, composite.items, onEscape]
  );

  return (
-    <RovingTabIndexProvider
-      options={{ focusOnClick: true, direction: "both" }}
-      items={items}
+    <Composite
+      {...rest}
+      {...composite}
+      onKeyDown={handleKeyDown}
+      role="menu"
+      ref={ref}
    >
-      <div {...rest} onKeyDown={handleKeyDown} ref={ref}>
-        {children()}
-      </div>
-    </RovingTabIndexProvider>
+      {children(composite)}
+    </Composite>
  );
 }

@@ -0,0 +1,41 @@
+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;
@@ -2,7 +2,6 @@ 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";
@@ -14,11 +13,10 @@ type Props = {
 const Authenticated = ({ children }: Props) => {
  const { auth } = useStores();
  const { i18n } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const language = user?.language;
+  const language = auth.user?.language;

-  // 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
+  // Watching for language changes here as this is the earliest point we have
+  // the user available and means we can start loading translations faster
  React.useEffect(() => {
    void changeLanguage(language, i18n);
  }, [i18n, language]);
@@ -12,7 +12,6 @@ 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";
@@ -26,7 +25,6 @@ import {
  matchDocumentInsights,
 } from "~/utils/routeHelpers";
 import Fade from "./Fade";
-import { PortalContext } from "./Portal";

 const DocumentComments = lazyWithRetry(
  () => import("~/scenes/Document/components/Comments")
@@ -46,10 +44,8 @@ type Props = {
 const AuthenticatedLayout: React.FC = ({ children }: Props) => {
  const { ui, auth } = useStores();
  const location = useLocation();
-  const layoutRef = React.useRef<HTMLDivElement>(null);
-  const can = usePolicy(ui.activeDocumentId);
-  const canCollection = usePolicy(ui.activeCollectionId);
-  const team = useCurrentTeam();
+  const can = usePolicy(ui.activeCollectionId);
+  const { user, team } = auth;
  const documentContext = useLocalStore<DocumentContextValue>(() => ({
    editor: null,
    setEditor: (editor: TEditor) => {
@@ -70,7 +66,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
      return;
    }
    const { activeCollectionId } = ui;
-    if (!activeCollectionId || !canCollection.createDocument) {
+    if (!activeCollectionId || !can.createDocument) {
      return;
    }
    history.push(newDocumentPath(activeCollectionId));
@@ -80,30 +76,29 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
    return <ErrorSuspended />;
  }

-  const sidebar = (
+  const showSidebar = auth.authenticated && user && team;
+
+  const sidebar = showSidebar ? (
    <Fade>
      <Switch>
        <Route path={settingsPath()} component={SettingsSidebar} />
        <Route component={Sidebar} />
      </Switch>
    </Fade>
-  );
+  ) : undefined;

-  const showHistory =
-    !!matchPath(location.pathname, {
-      path: matchDocumentHistory,
-    }) && can.listRevisions;
-  const showInsights =
-    !!matchPath(location.pathname, {
-      path: matchDocumentInsights,
-    }) && can.listViews;
+  const showHistory = !!matchPath(location.pathname, {
+    path: matchDocumentHistory,
+  });
+  const showInsights = !!matchPath(location.pathname, {
+    path: matchDocumentInsights,
+  });
  const showComments =
    !showInsights &&
    !showHistory &&
-    can.comment &&
    ui.activeDocumentId &&
    ui.commentsExpanded.includes(ui.activeDocumentId) &&
-    team.getPreference(TeamPreference.Commenting);
+    team?.getPreference(TeamPreference.Commenting);

  const sidebarRight = (
    <AnimatePresence
@@ -126,22 +121,15 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {

  return (
    <DocumentContext.Provider value={documentContext}>
-      <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>
+      <Layout title={team?.name} sidebar={sidebar} sidebarRight={sidebarRight}>
+        <RegisterKeyDown trigger="n" handler={goToNewDocument} />
+        <RegisterKeyDown trigger="t" handler={goToSearch} />
+        <RegisterKeyDown trigger="/" handler={goToSearch} />
+        {children}
+        <React.Suspense fallback={null}>
+          <CommandBar />
+        </React.Suspense>
+      </Layout>
    </DocumentContext.Provider>
  );
 };
@@ -5,7 +5,6 @@ import Initials from "./Initials";

 export enum AvatarSize {
  Small = 16,
-  Toast = 18,
  Medium = 24,
  Large = 32,
  XLarge = 48,
@@ -4,8 +4,8 @@ import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
+import Avatar from "~/components/Avatar";
 import Tooltip from "~/components/Tooltip";
-import Avatar from "./Avatar";

 type Props = {
  user: User;
@@ -34,7 +34,7 @@ function AvatarWithPresence({
  return (
    <>
      <Tooltip
-        content={
+        tooltip={
          <Centered>
            <strong>{user.name}</strong> {isCurrentUser && `(${t("You")})`}
            {status && (
@@ -1,35 +0,0 @@
-import { GroupIcon } from "outline-icons";
-import * as React from "react";
-import { useTheme } from "styled-components";
-import Squircle from "@shared/components/Squircle";
-import Group from "~/models/Group";
-import { AvatarSize } from "../Avatar/Avatar";
-
-type Props = {
-  /** The group to show an avatar for */
-  group: Group;
-  /** The size of the icon, 24px is default to match standard avatars */
-  size?: number;
-  /** The color of the avatar */
-  color?: string;
-  /** The background color of the avatar */
-  backgroundColor?: string;
-  className?: string;
-};
-
-export function GroupAvatar({
-  color,
-  backgroundColor,
-  size = AvatarSize.Medium,
-  className,
-}: Props) {
-  const theme = useTheme();
-  return (
-    <Squircle color={color ?? theme.text} size={size} className={className}>
-      <GroupIcon
-        color={backgroundColor ?? theme.background}
-        size={size * 0.75}
-      />
-    </Squircle>
-  );
-}
@@ -1,5 +1,4 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
 import Flex from "~/components/Flex";

 const Initials = styled(Flex)<{
@@ -12,7 +11,7 @@ const Initials = styled(Flex)<{
  border-radius: 50%;
  width: 100%;
  height: 100%;
-  color: ${s("white75")};
+  color: #fff;
  background-color: ${(props) => props.color};
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
@@ -1,7 +1,6 @@
-import Avatar, { IAvatar, AvatarSize } from "./Avatar";
+import Avatar from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
-import { GroupAvatar } from "./GroupAvatar";

-export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
+export { AvatarWithPresence };

-export type { IAvatar };
+export default Avatar;
@@ -34,17 +34,16 @@ 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;
-    right: 0;
+    left: 0;
    padding: 16px;
-
-    &:hover {
-      background: ${s("sidebarControlHoverBackground")};
-    }
  `};
 `;

@@ -5,7 +5,6 @@ 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 = {
@@ -76,7 +75,6 @@ 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;
@@ -25,7 +25,7 @@ const RealButton = styled(ActionButton)<RealProps>`
  background: ${s("accent")};
  color: ${s("accentText")};
  box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px;
-  border-radius: 6px;
+  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  height: 32px;
@@ -49,8 +49,8 @@ const RealButton = styled(ActionButton)<RealProps>`
  &:disabled {
    cursor: default;
    pointer-events: none;
-    color: ${(props) => transparentize(0.3, props.theme.accentText)};
-    background: ${(props) => transparentize(0.1, props.theme.accent)};
+    color: ${(props) => transparentize(0.5, props.theme.accentText)};
+    background: ${(props) => lighten(0.2, props.theme.accent)};

    svg {
      fill: ${(props) => props.theme.white50};
@@ -105,7 +105,7 @@ const RealButton = styled(ActionButton)<RealProps>`
        background: ${lighten(0.05, props.theme.danger)};
      }

-      &:focus-visible {
+      &.focus-visible {
        outline-color: ${darken(0.2, props.theme.danger)} !important;
      }
  `};
@@ -171,7 +171,7 @@ const Button = <T extends React.ElementType = "button">(
    danger,
    ...rest
  } = props;
-  const hasText = !!children || value !== undefined;
+  const hasText = children !== undefined || value !== undefined;
  const ic = hideIcon ? undefined : action?.icon ?? icon;
  const hasIcon = ic !== undefined;

@@ -4,7 +4,6 @@ import breakpoint from "styled-components-breakpoint";

 type Props = {
  children?: React.ReactNode;
-  maxWidth?: string;
  withStickyHeader?: boolean;
 };

@@ -19,24 +18,18 @@ const Container = styled.div<Props>`
  `};
 `;

-type ContentProps = { $maxWidth?: string };
-
-const Content = styled.div<ContentProps>`
-  max-width: ${(props) => props.$maxWidth ?? "46em"};
+const Content = styled.div`
+  max-width: 46em;
  margin: 0 auto;

  ${breakpoint("desktopLarge")`
-    max-width: ${(props: ContentProps) => props.$maxWidth ?? "52em"};
+    max-width: 52em;
  `};
 `;

-const CenteredContent: React.FC<Props> = ({
-  children,
-  maxWidth,
-  ...rest
-}: Props) => (
+const CenteredContent: React.FC<Props> = ({ children, ...rest }: Props) => (
  <Container {...rest}>
-    <Content $maxWidth={maxWidth}>{children}</Content>
+    <Content>{children}</Content>
  </Container>
 );

@@ -1,17 +0,0 @@
-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;
-}
@@ -1,13 +1,10 @@
-import filter from "lodash/filter";
-import isEqual from "lodash/isEqual";
-import orderBy from "lodash/orderBy";
-import uniq from "lodash/uniq";
+import { sortBy, filter, uniq, isEqual } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
-import { AvatarWithPresence } from "~/components/Avatar";
+import AvatarWithPresence from "~/components/Avatar/AvatarWithPresence";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
@@ -16,14 +13,9 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

 type Props = {
-  /** The document to display live collaborators for */
  document: Document;
 };

-/**
- * Displays a list of live collaborators for a document, including their avatars
- * and presence status.
- */
 function Collaborators(props: Props) {
  const { t } = useTranslation();
  const user = useCurrentUser();
@@ -44,16 +36,15 @@ function Collaborators(props: Props) {
  // ensure currently present via websocket are always ordered first
  const collaborators = React.useMemo(
    () =>
-      orderBy(
+      sortBy(
        filter(
          users.orderedData,
-          (u) =>
-            (presentIds.includes(u.id) ||
-              document.collaboratorIds.includes(u.id)) &&
-            !u.isSuspended
+          (user) =>
+            (presentIds.includes(user.id) ||
+              document.collaboratorIds.includes(user.id)) &&
+            !user.isSuspended
        ),
-        [(u) => presentIds.includes(u.id), "id"],
-        ["asc", "asc"]
+        (user) => presentIds.includes(user.id)
      ),
    [document.collaboratorIds, users.orderedData, presentIds]
  );
@@ -75,19 +66,12 @@ function Collaborators(props: Props) {
    placement: "bottom-end",
  });

-  const limit = 8;
-
  return (
    <>
      <PopoverDisclosure {...popover}>
-        {(popoverProps) => (
-          <NudeButton
-            width={Math.min(collaborators.length, limit) * 32}
-            height={32}
-            {...popoverProps}
-          >
+        {(props) => (
+          <NudeButton width={collaborators.length * 32} height={32} {...props}>
            <Facepile
-              limit={limit}
              users={collaborators}
              renderAvatar={(collaborator) => {
                const isPresent = presentIds.includes(collaborator.id);
@@ -1,32 +0,0 @@
-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} />;
-});
@@ -1,193 +0,0 @@
-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 Icon from "~/components/Icon";
-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 { EmptySelectValue } from "~/types";
-import { Feature, FeatureFlags } from "~/utils/FeatureFlags";
-
-const IconPicker = React.lazy(() => import("~/components/IconPicker"));
-
-export interface FormData {
-  name: string;
-  icon: string;
-  color: string | null;
-  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 iconColor = React.useMemo(
-    () => collection?.color ?? randomElement(colorPalette),
-    [collection?.color]
-  );
-
-  const fallbackIcon = <Icon value="collection" color={iconColor} />;
-
-  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: iconColor,
-    },
-  });
-
-  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"
-      );
-    }
-  }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
-
-  React.useEffect(() => {
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [setFocus]);
-
-  const handleIconChange = React.useCallback(
-    (icon: string, color: string | null) => {
-      if (icon !== values.icon) {
-        setFocus("name");
-      }
-
-      setValue("icon", icon);
-      setValue("color", color);
-    },
-    [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={
-            <React.Suspense fallback={fallbackIcon}>
-              <StyledIconPicker
-                icon={values.icon}
-                color={values.color ?? iconColor}
-                initial={values.name[0]}
-                popoverPosition="right"
-                onOpen={setHasOpenedIconPicker}
-                onChange={handleIconChange}
-              />
-            </React.Suspense>
-          }
-          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 | typeof EmptySelectValue
-              ) => {
-                field.onChange(value === EmptySelectValue ? null : 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;
-`;
@@ -1,32 +0,0 @@
-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} />;
-});
@@ -2,7 +2,6 @@ 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";
@@ -23,14 +22,11 @@ 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 (
@@ -41,7 +37,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
      danger
    >
      <>
-        <Text as="p" type="secondary">
+        <Text 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={{
@@ -53,7 +49,7 @@ function CollectionDeleteDialog({ collection, onSubmit }: Props) {
          />
        </Text>
        {team.defaultCollectionId === collection.id ? (
-          <Text as="p" type="secondary">
+          <Text 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={{
@@ -3,9 +3,7 @@ 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";
@@ -13,18 +11,9 @@ 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";
-
-const extensions = [
-  ...richExtensions,
-  BlockMenuExtension,
-  EmojiMenuExtension,
-  HoverPreviewsExtension,
-];
+import useToasts from "~/hooks/useToasts";

 type Props = {
  collection: Collection;
@@ -32,6 +21,7 @@ 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);
@@ -65,15 +55,19 @@ function CollectionDescription({ collection }: Props) {
      debounce(async (getValue) => {
        try {
          await collection.save({
-            data: getValue(false),
+            description: getValue(),
          });
          setDirty(false);
        } catch (err) {
-          toast.error(t("Sorry, an error occurred saving the collection"));
+          showToast(
+            t("Sorry, an error occurred saving the collection", {
+              type: "error",
+            })
+          );
          throw err;
        }
      }, 1000),
-    [collection, t]
+    [collection, showToast, t]
  );

  const handleChange = React.useCallback(
@@ -109,13 +103,12 @@ function CollectionDescription({ collection }: Props) {
            >
              <Editor
                key={key}
-                defaultValue={collection.data}
+                defaultValue={collection.description || ""}
                onChange={handleChange}
                placeholder={placeholder}
                readOnly={!isEditing}
                autoFocus={isEditing}
                onBlur={handleStopEditing}
-                extensions={extensions}
                maxLength={1000}
                embedsDisabled
                canUpdate
@@ -177,7 +170,7 @@ const MaxHeight = styled.div`
  position: relative;
  max-height: 25vh;
  overflow: hidden;
-  margin: 8px -8px -8px;
+  margin: -12px -8px -8px;
  padding: 8px;

  &[data-editing="true"],
@@ -11,26 +11,39 @@ import SearchActions from "~/components/SearchActions";
 import rootActions from "~/actions/root";
 import useCommandBarActions from "~/hooks/useCommandBarActions";
 import useSettingsActions from "~/hooks/useSettingsActions";
-import useTemplateActions from "~/hooks/useTemplateActions";
+import { CommandBarAction } from "~/types";

 function CommandBar() {
  const { t } = useTranslation();
  const settingsActions = useSettingsActions();
-  const templateActions = useTemplateActions();
  const commandBarActions = React.useMemo(
-    () => [...rootActions, templateActions, settingsActions],
-    [settingsActions, templateActions]
+    () => [...rootActions, settingsActions],
+    [settingsActions]
  );

  useCommandBarActions(commandBarActions);

+  const { rootAction } = useKBar((state) => ({
+    rootAction: state.currentRootActionId
+      ? (state.actions[
+          state.currentRootActionId
+        ] as unknown as CommandBarAction)
+      : undefined,
+  }));
+
  return (
    <>
      <KBarPortal>
        <Positioner>
          <Animator>
            <SearchActions />
-            <SearchInput defaultPlaceholder={t("Type a command or search")} />
+            <SearchInput
+              placeholder={`${
+                rootAction?.placeholder ||
+                rootAction?.name ||
+                t("Type a command or search")
+              }…`}
+            />
            <CommandBarResults />
          </Animator>
        </Positioner>
@@ -70,7 +83,6 @@ const SearchInput = styled(KBarSearch)`
  &:disabled,
  &::placeholder {
    color: ${s("placeholder")};
-    opacity: 1;
  }
 `;

@@ -62,15 +62,15 @@ function CommandBarItem(
              {index > 0 ? (
                <>
                  {" "}
-                  <Text size="xsmall" type="secondary">
+                  <Text size="xsmall" as="span" type="secondary">
                    then
                  </Text>{" "}
                </>
              ) : (
                ""
              )}
-              {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+              {sc.split("+").map((s) => (
+                <Key key={s}>{s}</Key>
              ))}
            </React.Fragment>
          ))}
@@ -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,6 +14,7 @@ type Props = {

 function CommentDeleteDialog({ comment, onSubmit }: Props) {
  const { comments } = useStores();
+  const { showToast } = useToasts();
  const { t } = useTranslation();
  const hasChildComments = comments.inThread(comment.id).length > 1;

@@ -22,7 +23,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
      await comment.delete();
      onSubmit?.();
    } catch (err) {
-      toast.error(err.message);
+      showToast(err.message, { type: "error" });
    }
  };

@@ -33,7 +34,7 @@ function CommentDeleteDialog({ comment, onSubmit }: Props) {
      savingText={`${t("Deleting")}…`}
      danger
    >
-      <Text as="p" type="secondary">
+      <Text type="secondary">
        {hasChildComments ? (
          <Trans>
            Are you sure you want to permanently delete this entire comment
@@ -1,11 +1,10 @@
 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 */
@@ -30,8 +29,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) => {
@@ -41,31 +40,30 @@ const ConfirmationDialog: React.FC<Props> = ({
        await onSubmit();
        dialogs.closeAllModals();
      } catch (err) {
-        toast.error(err.message);
+        showToast(err.message, {
+          type: "error",
+        });
      } finally {
        setIsSaving(false);
      }
    },
-    [onSubmit, dialogs]
+    [onSubmit, dialogs, showToast]
  );

  return (
-    <form onSubmit={handleSubmit}>
-      <Flex gap={12} column>
+    <Flex column>
+      <form onSubmit={handleSubmit}>
        <Text type="secondary">{children}</Text>
-
-        <Flex justify="flex-end">
-          <Button
-            type="submit"
-            disabled={isSaving || disabled}
-            danger={danger}
-            autoFocus
-          >
-            {isSaving && savingText ? savingText : submitText ?? t("Confirm")}
-          </Button>
-        </Flex>
-      </Flex>
-    </form>
+        <Button
+          type="submit"
+          disabled={isSaving || disabled}
+          danger={danger}
+          autoFocus
+        >
+          {isSaving && savingText ? savingText : submitText}
+        </Button>
+      </form>
+    </Flex>
  );
 };

@@ -14,48 +14,15 @@ 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
-      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>
-        )
+      tooltip={
+        <Centered>
+          <strong>{t("Server connection lost")}</strong>
+          <br />
+          {t("Edits you make will sync once you’re online")}
+        </Centered>
      }
      placement="bottom"
    >
@@ -9,7 +9,6 @@ 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;
@@ -36,7 +35,6 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
    disabled,
    onChange,
    onInput,
-    onFocus,
    onBlur,
    onKeyDown,
    value,
@@ -145,13 +143,11 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
  );

  return (
-    <div className={className} dir={dir} onClick={onClick} tabIndex={-1}>
-      {children}
+    <div className={className} dir={dir} onClick={onClick}>
      <Content
        ref={contentRef}
        contentEditable={!disabled && !readOnly}
        onInput={wrappedEvent(onInput)}
-        onFocus={wrappedEvent(onFocus)}
        onBlur={wrappedEvent(onBlur)}
        onKeyDown={wrappedEvent(onKeyDown)}
        onPaste={handlePaste}
@@ -162,6 +158,7 @@ const ContentEditable = React.forwardRef(function _ContentEditable(
      >
        {innerValue}
      </Content>
+      {children}
    </div>
  );
 });
@@ -1,17 +1,15 @@
 import { LocationDescriptor } from "history";
 import { CheckmarkIcon } from "outline-icons";
-import { ellipsis, transparentize } 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 Text from "../Text";
-import MenuIconWrapper from "./MenuIconWrapper";
+import MenuIconWrapper from "../MenuIconWrapper";

 type Props = {
  id?: string;
-  onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  onClick?: (event: React.SyntheticEvent) => void | Promise<void>;
  active?: boolean;
  selected?: boolean;
  disabled?: boolean;
@@ -43,43 +41,43 @@ const MenuItem = (
 ) => {
  const content = React.useCallback(
    (props) => {
-      // Preventing default mousedown otherwise menu items do not work in Firefox,
-      // which triggers the hideOnClickOutside handler first via mousedown – hiding
-      // and un-rendering the menu contents.
-      const preventDefault = (ev: React.MouseEvent) => {
-        ev.preventDefault();
-        ev.stopPropagation();
-      };
-
      const handleClick = async (ev: React.MouseEvent) => {
        hide?.();

        if (onClick) {
-          preventDefault(ev);
+          ev.preventDefault();
          await onClick(ev);
        }
      };

+      // Preventing default mousedown otherwise menu items do not work in Firefox,
+      // which triggers the hideOnClickOutside handler first via mousedown – hiding
+      // and un-rendering the menu contents.
+      const handleMouseDown = (ev: React.MouseEvent) => {
+        ev.preventDefault();
+        ev.stopPropagation();
+      };
+
      return (
        <MenuAnchor
          {...props}
          $active={active}
          as={onClick ? "button" : as}
          onClick={handleClick}
-          onPointerDown={preventDefault}
-          onMouseDown={preventDefault}
+          onMouseDown={handleMouseDown}
          ref={mergeRefs([
            ref,
            props.ref as React.RefObject<HTMLAnchorElement>,
          ])}
        >
          {selected !== undefined && (
-            <MenuIconWrapper aria-hidden>
+            <>
              {selected ? <CheckmarkIcon /> : <Spacer />}
-            </MenuIconWrapper>
+              &nbsp;
+            </>
          )}
-          {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
-          <Title>{children}</Title>
+          {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
+          {children}
        </MenuAnchor>
      );
    },
@@ -104,12 +102,6 @@ const Spacer = styled.svg`
  flex-shrink: 0;
 `;

-const Title = styled.div`
-  ${ellipsis()}
-  flex-grow: 1;
-  display: flex;
-`;
-
 type MenuAnchorProps = {
  level?: number;
  disabled?: boolean;
@@ -138,6 +130,10 @@ 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)};
@@ -152,20 +148,15 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
  @media (hover: hover) {
    &:hover,
    &:focus,
-    &:focus-visible {
+    &.focus-visible {
      color: ${props.theme.accentText};
      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
      box-shadow: none;
      cursor: var(--pointer);

      svg {
-        color: ${props.theme.accentText};
        fill: ${props.theme.accentText};
      }
-
-      ${Text} {
-        color: ${transparentize(0.5, props.theme.accentText)};
-      }
    }
  }
  `}
@@ -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;
 };

@@ -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 {
@@ -30,7 +30,6 @@ type Props = Omit<MenuStateReturn, "items"> & {
  actions?: (Action | MenuSeparator | MenuHeading)[];
  context?: Partial<ActionContext>;
  items?: TMenuItem[];
-  showIcons?: boolean;
 };

 const Disclosure = styled(ExpandedIcon)`
@@ -99,7 +98,7 @@ export function filterTemplateItems(items: TMenuItem[]): TMenuItem[] {
    });
 }

-function Template({ items, actions, context, showIcons, ...menu }: Props) {
+function Template({ items, actions, context, ...menu }: Props) {
  const ctx = useActionContext({
    isContextMenu: true,
  });
@@ -125,10 +124,9 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        if (
          iconIsPresentInAnyMenuItem &&
          item.type !== "separator" &&
-          item.type !== "heading" &&
-          showIcons !== false
+          item.type !== "heading"
        ) {
-          item.icon = item.icon || <MenuIconWrapper aria-hidden />;
+          item.icon = item.icon || <MenuIconWrapper />;
        }

        if (item.type === "route") {
@@ -140,7 +138,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              key={index}
              disabled={item.disabled}
              selected={item.selected}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -158,7 +156,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              selected={item.selected}
              level={item.level}
              target={item.href.startsWith("#") ? undefined : "_blank"}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -176,7 +174,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              selected={item.selected}
              dangerous={item.dangerous}
              key={index}
-              icon={showIcons !== false ? item.icon : undefined}
+              icon={item.icon}
              {...menu}
            >
              {item.title}
@@ -192,12 +190,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              id={`${item.title}-${index}`}
              templateItems={item.items}
              parentMenuState={menu}
-              title={
-                <Title
-                  title={item.title}
-                  icon={showIcons !== false ? item.icon : undefined}
-                />
-              }
+              title={<Title title={item.title} icon={item.icon} />}
              {...menu}
            />
          );
@@ -208,7 +201,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
        }

        if (item.type === "heading") {
-          return <Header key={index}>{item.title}</Header>;
+          return <Header>{item.title}</Header>;
        }

        const _exhaustiveCheck: never = item;
@@ -227,7 +220,7 @@ function Title({
 }) {
  return (
    <Flex align="center">
-      {icon && <MenuIconWrapper aria-hidden>{icon}</MenuIconWrapper>}
+      {icon && <MenuIconWrapper>{icon}</MenuIconWrapper>}
      {title}
    </Flex>
  );
@@ -6,7 +6,6 @@ import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
 import Scrollable from "~/components/Scrollable";
-import useEventListener from "~/hooks/useEventListener";
 import useMenuContext from "~/hooks/useMenuContext";
 import useMenuHeight from "~/hooks/useMenuHeight";
 import useMobile from "~/hooks/useMobile";
@@ -39,8 +38,6 @@ 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. */
@@ -49,13 +46,10 @@ 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,
@@ -63,6 +57,11 @@ 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();
@@ -100,6 +99,21 @@ 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;
@@ -109,130 +123,52 @@ const ContextMenu: React.FC<Props> = ({
  // trigger and the bottom of the window
  return (
    <>
-      <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 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>
    </>
  );
 };

-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]);
-
-  useEventListener(
-    "animationstart",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "none";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  useEventListener(
-    "animationend",
-    (event) => {
-      if (event.target instanceof HTMLElement) {
-        const parent = event.target.parentElement;
-        if (parent) {
-          parent.style.pointerEvents = "auto";
-        }
-      }
-    },
-    backgroundRef.current
-  );
-
-  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`
@@ -250,15 +186,6 @@ export const Position = styled.div`
  position: absolute;
  z-index: ${depths.menu};

-  // Note: pointer events are re-enabled after the animation ends, see event listeners above
-  pointer-events: none;
-
-  &: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
@@ -276,7 +203,6 @@ export const Position = styled.div`
 type BackgroundProps = {
  topAnchor?: boolean;
  rightAnchor?: boolean;
-  maxWidth?: number;
  theme: DefaultTheme;
 };

@@ -290,6 +216,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
  min-width: 180px;
  min-height: 44px;
  max-height: 75vh;
+  pointer-events: all;
  font-weight: normal;

  @media print {
@@ -301,8 +228,7 @@ export const Background = styled(Scrollable)<BackgroundProps>`
      props.topAnchor ? fadeAndSlideDown : fadeAndSlideUp} 200ms ease;
    transform-origin: ${(props: BackgroundProps) =>
      props.rightAnchor ? "75%" : "25%"} 0;
-    max-width: ${(props: BackgroundProps) => props.maxWidth ?? 276}px;
-    max-height: 100vh;
+    max-width: 276px;
    background: ${(props: BackgroundProps) => props.theme.menuBackground};
    box-shadow: ${(props: BackgroundProps) => props.theme.menuShadow};
  `};
@@ -1,6 +1,5 @@
 import copy from "copy-to-clipboard";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import env from "~/env";

 type Props = {
@@ -10,43 +9,32 @@ type Props = {
  onCopy?: () => void;
 };

-function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
-  const { text, onCopy, children, ...rest } = props;
+class CopyToClipboard extends React.PureComponent<Props> {
+  onClick = (ev: React.SyntheticEvent) => {
+    const { text, onCopy, children } = this.props;
+    const elem = React.Children.only(children);

-  const onClick = React.useCallback(
-    (ev: React.MouseEvent<HTMLElement>) => {
-      const elem = React.Children.only(children);
+    copy(text, {
+      debug: env.ENVIRONMENT !== "production",
+      format: "text/plain",
+    });

-      copy(text, {
-        debug: env.ENVIRONMENT !== "production",
-        format: "text/plain",
-      });
+    onCopy?.();

-      onCopy?.();
+    if (elem && elem.props && typeof elem.props.onClick === "function") {
+      elem.props.onClick(ev);
+    }
+  };

-      if (elem && elem.props && typeof elem.props.onClick === "function") {
-        elem.props.onClick(ev);
-      } else {
-        ev.preventDefault();
-        ev.stopPropagation();
-      }
-    },
-    [children, onCopy, text]
-  );
+  render() {
+    const { text, onCopy, children, ...rest } = this.props;
+    const elem = React.Children.only(children);
+    if (!elem) {
+      return null;
+    }

-  const elem = React.Children.only(children);
-  if (!elem) {
-    return null;
+    return React.cloneElement(elem, { ...rest, onClick: this.onClick });
  }
-
-  return React.cloneElement(elem, {
-    ...rest,
-    ref:
-      "ref" in elem
-        ? mergeRefs([elem.ref as React.MutableRefObject<HTMLElement>, ref])
-        : ref,
-    onClick,
-  });
 }

-export default React.forwardRef(CopyToClipboard);
+export default CopyToClipboard;
@@ -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,6 +25,7 @@ const DefaultCollectionInputSelect = ({
  const { collections } = useStores();
  const [fetching, setFetching] = useState(false);
  const [fetchError, setFetchError] = useState();
+  const { showToast } = useToasts();

  React.useEffect(() => {
    async function fetchData() {
@@ -35,8 +36,11 @@ const DefaultCollectionInputSelect = ({
            limit: 100,
          });
        } catch (error) {
-          toast.error(
-            t("Collections could not be loaded, please reload the app")
+          showToast(
+            t("Collections could not be loaded, please reload the app"),
+            {
+              type: "error",
+            }
          );
          setFetchError(error);
        } finally {
@@ -45,7 +49,7 @@ const DefaultCollectionInputSelect = ({
      }
    }
    void fetchData();
-  }, [fetchError, t, fetching, collections]);
+  }, [showToast, fetchError, t, fetching, collections]);

  const options = React.useMemo(
    () =>
@@ -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 hasDisabledUpdateMessage = React.useRef(false);
+  const { showToast } = useToasts();

  React.useEffect(() => {
    Desktop.bridge?.redirect((path: string, replace = false) => {
@@ -24,16 +24,11 @@ export default function DesktopEventHandler() {
    });

    Desktop.bridge?.updateDownloaded(() => {
-      if (hasDisabledUpdateMessage.current) {
-        return;
-      }
-
-      hasDisabledUpdateMessage.current = true;
-      toast.message("An update is ready to install.", {
-        duration: Infinity,
-        dismissible: true,
+      showToast("An update is ready to install.", {
+        type: "info",
+        timeout: Infinity,
        action: {
-          label: t("Install now"),
+          text: "Install now",
          onClick: () => {
            void Desktop.bridge?.restartAndInstall();
          },
@@ -55,7 +50,7 @@ export default function DesktopEventHandler() {
        content: <KeyboardShortcuts />,
      });
    });
-  }, [t, history, dialogs]);
+  }, [t, history, dialogs, showToast]);

  return null;
 }
@@ -22,10 +22,9 @@ function Dialogs() {
        <Modal
          key={id}
          isOpen={modal.isOpen}
-          fullscreen={modal.fullscreen ?? false}
+          isCentered={modal.isCentered}
          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
-          style={modal.style}
        >
          {modal.content}
        </Modal>
@@ -6,15 +6,13 @@ import styled from "styled-components";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
-import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
 import {
  archivePath,
  collectionPath,
-  settingsPath,
+  templatesPath,
  trashPath,
 } from "~/utils/routeHelpers";

@@ -45,12 +43,12 @@ function useCategory(document: Document): MenuInternalLink | null {
    };
  }

-  if (document.template) {
+  if (document.isTemplate) {
    return {
      type: "route",
      icon: <ShapesIcon />,
      title: t("Templates"),
-      to: settingsPath("templates"),
+      to: templatesPath(),
    };
  }

@@ -68,31 +66,30 @@ const DocumentBreadcrumb: React.FC<Props> = ({
  const collection = document.collectionId
    ? collections.get(document.collectionId)
    : undefined;
-  const can = usePolicy(collection);
-
-  React.useEffect(() => {
-    void document.loadRelations();
-  }, [document]);

  let collectionNode: MenuInternalLink | undefined;

-  if (collection && can.readDocument) {
+  if (collection) {
    collectionNode = {
      type: "route",
      title: collection.name,
      icon: <CollectionIcon collection={collection} expanded />,
-      to: collectionPath(collection.path),
+      to: collectionPath(collection.url),
    };
-  } else if (document.isCollectionDeleted) {
+  } else if (document.collectionId && !collection) {
    collectionNode = {
      type: "route",
      title: t("Deleted Collection"),
      icon: undefined,
-      to: "",
+      to: collectionPath("deleted-collection"),
    };
  }

-  const path = document.pathTo;
+  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 items = React.useMemo(() => {
    const output = [];
@@ -105,16 +102,10 @@ const DocumentBreadcrumb: React.FC<Props> = ({
      output.push(collectionNode);
    }

-    path.slice(0, -1).forEach((node: NavigationNode) => {
+    path.forEach((node: NavigationNode) => {
      output.push({
        type: "route",
-        title: node.icon ? (
-          <>
-            <StyledIcon value={node.icon} color={node.color} /> {node.title}
-          </>
-        ) : (
-          node.title
-        ),
+        title: node.title,
        to: node.url,
      });
    });
@@ -129,7 +120,7 @@ const DocumentBreadcrumb: React.FC<Props> = ({
    return (
      <>
        {collection?.name}
-        {path.slice(0, -1).map((node: NavigationNode) => (
+        {path.map((node: NavigationNode) => (
          <React.Fragment key={node.id}>
            <SmallSlash />
            {node.title}
@@ -146,10 +137,6 @@ const DocumentBreadcrumb: React.FC<Props> = ({
  );
 };

-const StyledIcon = styled(Icon)`
-  margin-right: 2px;
-`;
-
 const SmallSlash = styled(GoToIcon)`
  width: 12px;
  height: 12px;
@@ -7,19 +7,17 @@ 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 { IconType } from "@shared/types";
-import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
-import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 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";

@@ -54,8 +52,6 @@ function DocumentCard(props: Props) {
    disabled: !isDraggable || !canUpdatePin,
  });

-  const hasEmojiInTitle = determineIconType(document.icon) === IconType.Emoji;
-
  const style = {
    transform: CSS.Transform.toString(transform),
    transition,
@@ -113,20 +109,13 @@ function DocumentCard(props: Props) {
              <path d="M19.5 19.5H6C2.96243 19.5 0.5 17.0376 0.5 14V0.5H0.792893L19.5 19.2071V19.5Z" />
            </Fold>

-            {document.icon ? (
-              <DocumentSquircle
-                icon={document.icon}
-                color={document.color ?? undefined}
-              />
+            {document.emoji ? (
+              <Squircle color={theme.slateLight}>
+                <EmojiIcon emoji={document.emoji} size={26} />
+              </Squircle>
            ) : (
-              <Squircle
-                color={
-                  collection?.color ??
-                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
-                }
-              >
+              <Squircle color={collection?.color}>
                {collection?.icon &&
-                collection?.icon !== "letter" &&
                collection?.icon !== "collection" &&
                !pin?.collectionId ? (
                  <CollectionIcon collection={collection} color="white" />
@@ -137,8 +126,8 @@ function DocumentCard(props: Props) {
            )}
            <div>
              <Heading dir={document.dir}>
-                {hasEmojiInTitle
-                  ? document.titleWithDefault.replace(document.icon!, "")
+                {document.emoji
+                  ? document.titleWithDefault.replace(document.emoji, "")
                  : document.titleWithDefault}
              </Heading>
              <DocumentMeta size="xsmall">
@@ -155,7 +144,7 @@ function DocumentCard(props: Props) {
          {canUpdatePin && (
            <Actions dir={document.dir} gap={4}>
              {!isDragging && pin && (
-                <Tooltip content={t("Unpin")}>
+                <Tooltip tooltip={t("Unpin")}>
                  <PinButton onClick={handleUnpin} aria-label={t("Unpin")}>
                    <CloseIcon />
                  </PinButton>
@@ -169,24 +158,6 @@ function DocumentCard(props: Props) {
  );
 }

-const DocumentSquircle = ({
-  icon,
-  color,
-}: {
-  icon: string;
-  color?: string;
-}) => {
-  const theme = useTheme();
-  const iconType = determineIconType(icon)!;
-  const squircleColor = iconType === IconType.SVG ? color : theme.slateLight;
-
-  return (
-    <Squircle color={squircleColor}>
-      <Icon value={icon} color={theme.white} forceColor />
-    </Squircle>
-  );
-};
-
 const Clock = styled(ClockIcon)`
  flex-shrink: 0;
 `;
@@ -308,8 +279,8 @@ const Heading = styled.h3`
  overflow: hidden;

  color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

 export default observer(DocumentCard);
@@ -1,6 +1,5 @@
 import * as React from "react";
 import { Editor } from "~/editor";
-import useIdle from "~/hooks/useIdle";

 export type DocumentContextValue = {
  /** The current editor instance for this document. */
@@ -17,21 +16,4 @@ 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;
@@ -1,10 +1,5 @@
 import FuzzySearch from "fuzzy-search";
-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 { includes, difference, concat, filter, map, fill } from "lodash";
 import { observer } from "mobx-react";
 import { StarredIcon, DocumentIcon } from "outline-icons";
 import * as React from "react";
@@ -15,11 +10,12 @@ import scrollIntoView from "smooth-scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { NavigationNode } from "@shared/types";
+import parseTitle from "@shared/utils/parseTitle";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
-import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
@@ -204,91 +200,84 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
    }
  };

-  const ListItem = observer(
-    ({
-      index,
-      data,
-      style,
-    }: {
-      index: number;
-      data: NavigationNode[];
-      style: React.CSSProperties;
-    }) => {
-      const node = data[index];
-      const isCollection = node.type === "collection";
-      let renderedIcon,
-        title: string,
-        icon: string | undefined,
-        color: string | undefined,
-        path;
+  const ListItem = ({
+    index,
+    data,
+    style,
+  }: {
+    index: number;
+    data: NavigationNode[];
+    style: React.CSSProperties;
+  }) => {
+    const node = data[index];
+    const isCollection = node.type === "collection";
+    let icon, title, path;

-      if (isCollection) {
-        const col = collections.get(node.collectionId as string);
-        renderedIcon = col && (
-          <CollectionIcon collection={col} expanded={isExpanded(index)} />
-        );
-        title = node.title;
+    if (isCollection) {
+      const col = collections.get(node.collectionId as string);
+      icon = col && (
+        <CollectionIcon collection={col} expanded={isExpanded(index)} />
+      );
+      title = node.title;
+    } else {
+      const doc = documents.get(node.id);
+      const { strippedTitle, emoji } = parseTitle(node.title);
+      title = strippedTitle;
+
+      if (emoji) {
+        icon = <EmojiIcon emoji={emoji} />;
+      } else if (doc?.isStarred) {
+        icon = <StarredIcon color={theme.yellow} />;
      } else {
-        const doc = documents.get(node.id);
-        icon = doc?.icon ?? node.icon ?? node.emoji;
-        color = doc?.color ?? node.color;
-        title = doc?.title ?? node.title;
-
-        if (icon) {
-          renderedIcon = <Icon value={icon} color={color} />;
-        } else if (doc?.isStarred) {
-          renderedIcon = <StarredIcon color={theme.yellow} />;
-        } else {
-          renderedIcon = <DocumentIcon color={theme.textSecondary} />;
-        }
-
-        path = ancestors(node)
-          .map((a) => a.title)
-          .join(" / ");
+        icon = <DocumentIcon color={theme.textSecondary} />;
      }

-      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={renderedIcon}
-          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={renderedIcon}
-          title={title}
-          depth={node.depth as number}
-          hasChildren={hasChildren(index)}
-          ref={itemRefs[index]}
-        />
-      );
+      path = ancestors(node)
+        .map((a) => parseTitle(a.title).strippedTitle)
+        .join(" / ");
    }
-  );
+
+    return searchTerm ? (
+      <DocumentExplorerSearchResult
+        selected={isSelected(index)}
+        active={activeNode === index}
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        icon={icon}
+        title={title}
+        path={path}
+      />
+    ) : (
+      <DocumentExplorerNode
+        style={{
+          ...style,
+          top: (style.top as number) + VERTICAL_PADDING,
+          left: (style.left as number) + HORIZONTAL_PADDING,
+          width: `calc(${style.width} - ${HORIZONTAL_PADDING * 2}px)`,
+        }}
+        onPointerMove={() => setActiveNode(index)}
+        onClick={() => toggleSelect(index)}
+        onDisclosureClick={(ev) => {
+          ev.stopPropagation();
+          toggleCollapse(index);
+        }}
+        selected={isSelected(index)}
+        active={activeNode === index}
+        expanded={isExpanded(index)}
+        icon={icon}
+        title={title}
+        depth={node.depth as number}
+        hasChildren={hasChildren(index)}
+        ref={itemRefs[index]}
+      />
+    );
+  };

  const focusSearchInput = () => {
    inputSearchRef.current?.focus();
@@ -394,9 +383,7 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
          </AutoSizer>
        ) : (
          <FlexContainer>
-            <Text as="p" type="secondary">
-              {t("No results found")}.
-            </Text>
+            <Text type="secondary">{t("No results found")}.</Text>
          </FlexContainer>
        )}
      </ListContainer>
@@ -120,7 +120,6 @@ export const Node = styled.span<{
      color: ${props.theme.white};

      svg {
-        color: ${props.theme.white};
        fill: ${props.theme.white};
      }
    `}
@@ -1,29 +1,29 @@
-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 EventBoundary from "@shared/components/EventBoundary";
 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";
 import Highlight from "~/components/Highlight";
-import Icon from "~/components/Icon";
 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 { documentPath } from "~/utils/routeHelpers";
+import { newDocumentPath } from "~/utils/routeHelpers";

 type Props = {
  document: Document;
@@ -35,13 +35,14 @@ 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 directly here as it causes an infinite loop
-  return tag.replace(new RegExp(SEARCH_RESULT_REGEX.source), "$1");
+  // 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");
 }

 function DocumentListItem(
@@ -50,17 +51,9 @@ 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,
@@ -76,54 +69,51 @@ function DocumentListItem(
  const queryIsInTitle =
    !!highlight &&
    !!document.title.toLowerCase().includes(highlight.toLowerCase());
-  const canStar = !document.isArchived && !document.isTemplate;
+  const canStar =
+    !document.isDraft && !document.isArchived && !document.isTemplate;
+  const can = usePolicy(team);
+  const canCollection = usePolicy(document.collectionId);

  return (
-    <DocumentLink
-      ref={itemRef}
+    <CompositeItem
+      as={DocumentLink}
+      ref={ref}
      dir={document.dir}
      role="menuitem"
      $isStarred={document.isStarred}
      $menuOpen={menuOpen}
      to={{
-        pathname: documentPath(document),
+        pathname: document.url,
        state: {
          title: document.titleWithDefault,
        },
      }}
      {...rest}
-      {...rovingTabIndex}
    >
      <Content>
        <Heading dir={document.dir}>
-          {document.icon && (
-            <>
-              <Icon value={document.icon} color={document.color ?? undefined} />
-              &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>
          )}
-          {document.isDraft && showDraft && (
-            <Tooltip
-              content={t("Only visible to you")}
-              delay={500}
-              placement="top"
-            >
-              <Badge>{t("Draft")}</Badge>
-            </Tooltip>
-          )}
          {canStar && (
            <StarPositioner>
              <StarButton document={document} />
            </StarPositioner>
          )}
+          {document.isDraft && showDraft && (
+            <Tooltip
+              tooltip={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
+              <Badge>{t("Draft")}</Badge>
+            </Tooltip>
+          )}
          {document.isTemplate && showTemplate && (
            <Badge primary>{t("Template")}</Badge>
          )}
@@ -145,6 +135,25 @@ 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}
@@ -153,7 +162,7 @@ function DocumentListItem(
          modal={false}
        />
      </Actions>
-    </DocumentLink>
+    </CompositeItem>
  );
 }

@@ -253,8 +262,8 @@ const Heading = styled.h3<{ rtl?: boolean }>`
  margin-bottom: 0.25em;
  white-space: nowrap;
  color: ${s("text")};
-  font-family: ${s("fontFamily")};
-  font-weight: 500;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
+    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
 `;

 const StarPositioner = styled(Flex)`
@@ -270,12 +279,10 @@ const Title = styled(Highlight)`

 const ResultContext = styled(Highlight)`
  display: block;
-  color: ${s("textSecondary")};
-  font-size: 15px;
+  color: ${s("textTertiary")};
+  font-size: 14px;
  margin-top: -0.25em;
  margin-bottom: 0.25em;
-  max-height: 90px;
-  overflow: hidden;
 `;

 export default observer(React.forwardRef(DocumentListItem));
@@ -95,21 +95,6 @@ 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>
@@ -128,6 +113,15 @@ const DocumentMeta: React.FC<Props> = ({
        <Time dateTime={publishedAt} addSuffix />
      </span>
    );
+  } else if (isDraft) {
+    content = (
+      <span>
+        {lastUpdatedByCurrentUser
+          ? t("You saved")
+          : t("{{ userName }} saved", { userName })}{" "}
+        <Time dateTime={updatedAt} addSuffix />
+      </span>
+    );
  } else {
    content = (
      <Modified highlight={modifiedSinceViewed && !lastUpdatedByCurrentUser}>
@@ -168,13 +162,7 @@ const DocumentMeta: React.FC<Props> = ({
  };

  return (
-    <Container
-      align="center"
-      rtl={document.dir === "rtl"}
-      {...rest}
-      dir="ltr"
-      lang=""
-    >
+    <Container align="center" rtl={document.dir === "rtl"} {...rest} dir="ltr">
      {to ? (
        <Link to={to} replace={replace}>
          {content}
@@ -0,0 +1,52 @@
+import invariant from "invariant";
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import useStores from "~/hooks/useStores";
+import useToasts from "~/hooks/useToasts";
+import { documentPath } from "~/utils/routeHelpers";
+
+type Props = {
+  documentId: string;
+};
+
+function DocumentTemplatizeDialog({ documentId }: Props) {
+  const history = useHistory();
+  const { showToast } = useToasts();
+  const { t } = useTranslation();
+  const { documents } = useStores();
+  const document = documents.get(documentId);
+  invariant(document, "Document must exist");
+
+  const handleSubmit = React.useCallback(async () => {
+    const template = await document?.templatize();
+    if (template) {
+      history.push(documentPath(template));
+      showToast(t("Template created, go ahead and customize it"), {
+        type: "info",
+      });
+    }
+  }, [document, showToast, history, t]);
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Create template")}
+      savingText={`${t("Creating")}…`}
+    >
+      <Trans
+        defaults="Creating a template from <em>{{titleWithDefault}}</em> is a non-destructive action – we'll make a copy of the document and turn it into a template that can be used as a starting point for new documents."
+        values={{
+          titleWithDefault: document.titleWithDefault,
+        }}
+        components={{
+          em: <strong />,
+        }}
+      />
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DocumentTemplatizeDialog);
@@ -1,15 +1,13 @@
-import compact from "lodash/compact";
-import sortBy from "lodash/sortBy";
+import { sortBy } from "lodash";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { dateLocale, dateToRelative } from "@shared/utils/date";
+import { dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
 import User from "~/models/User";
-import { Avatar } from "~/components/Avatar";
+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 = {
@@ -20,9 +18,6 @@ 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())
@@ -36,10 +31,10 @@ function DocumentViews({ document, isOpen }: Props) {
  const documentViews = views.inDocument(document.id);
  const sortedViews = sortBy(
    documentViews,
-    (view) => !presentIds.includes(view.userId)
+    (view) => !presentIds.includes(view.user.id)
  );
  const users = React.useMemo(
-    () => compact(sortedViews.map((v) => v.user)),
+    () => sortedViews.map((v) => v.user),
    [sortedViews]
  );

@@ -50,20 +45,16 @@ function DocumentViews({ document, isOpen }: Props) {
          aria-label={t("Viewers")}
          items={users}
          renderItem={(model: User) => {
-            const view = documentViews.find((v) => v.userId === model.id);
+            const view = documentViews.find((v) => v.user.id === model.id);
            const isPresent = presentIds.includes(model.id);
            const isEditing = editingIds.includes(model.id);
            const subtitle = isPresent
              ? isEditing
                ? t("Currently editing")
                : t("Currently viewing")
-              : t("Viewed {{ timeAgo }}", {
+              : t("Viewed {{ timeAgo }} ago", {
                  timeAgo: dateToRelative(
-                    view ? Date.parse(view.lastViewedAt) : new Date(),
-                    {
-                      addSuffix: true,
-                      locale,
-                    }
+                    view ? Date.parse(view.lastViewedAt) : new Date()
                  ),
                });
            return (
@@ -1,97 +0,0 @@
-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("Publish")}
-                labelPosition="right"
-                checked={publish}
-                onChange={handlePublishChange}
-              />
-            </Text>
-          )}
-          {document.publishedAt && document.childDocuments.length > 0 && (
-            <Text size="small">
-              <Switch
-                name="recursive"
-                label={t("Include nested documents")}
-                labelPosition="right"
-                checked={recursive}
-                onChange={handleRecursiveChange}
-              />
-            </Text>
-          )}
-        </>
-      )}
-    </ConfirmationDialog>
-  );
-}
-
-export default observer(DuplicateDialog);
@@ -1,11 +1,10 @@
-import deburr from "lodash/deburr";
-import difference from "lodash/difference";
-import sortBy from "lodash/sortBy";
+import { deburr, difference, sortBy } from "lodash";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
+import { useHistory } from "react-router-dom";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
@@ -15,20 +14,23 @@ 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";
-import Icon from "./Icon";

 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));

@@ -39,13 +41,14 @@ 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) => void;
+  onPublish?: (event: React.MouseEvent) => any;
  editorStyle?: React.CSSProperties;
 };

@@ -60,14 +63,27 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  } = props;
  const userLocale = useUserLocale();
  const locale = dateLocale(userLocale);
-  const { comments, documents } = useStores();
+  const { auth, comments, documents } = useStores();
+  const { showToast } = useToasts();
  const dictionary = useDictionary();
  const embeds = useEmbeds(!shareId);
+  const history = useHistory();
  const localRef = React.useRef<SharedEditor>();
-  const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
+  const preferences = auth.user?.preferences;
  const previousHeadings = React.useRef<Heading[] | null>(null);
+  const [activeLinkElement, setActiveLink] =
+    React.useState<HTMLAnchorElement | null>(null);
  const previousCommentIds = React.useRef<string[]>();

+  const handleLinkActive = React.useCallback((element: HTMLAnchorElement) => {
+    setActiveLink(element);
+    return false;
+  }, []);
+
+  const handleLinkInactive = React.useCallback(() => {
+    setActiveLink(null);
+  }, []);
+
  const handleSearchLink = React.useCallback(
    async (term: string) => {
      if (isInternalUrl(term)) {
@@ -90,12 +106,6 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
              title: document.title,
              subtitle: `Updated ${time}`,
              url: document.url,
-              icon: document.icon ? (
-                <Icon
-                  value={document.icon}
-                  color={document.color ?? undefined}
-                />
-              ) : undefined,
            },
          ];
        } catch (error) {
@@ -110,13 +120,10 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      const results = await documents.searchTitles(term);

      return sortBy(
-        results.map(({ document }) => ({
+        results.map((document: Document) => ({
          title: document.title,
          subtitle: <DocumentBreadcrumb document={document} onlyText />,
          url: document.url,
-          icon: document.icon ? (
-            <Icon value={document.icon} color={document.color ?? undefined} />
-          ) : undefined,
        })),
        (document) =>
          deburr(document.title)
@@ -126,7 +133,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
            : 1
      );
    },
-    [locale, documents]
+    [documents]
  );

  const handleUploadFile = React.useCallback(
@@ -140,7 +147,47 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    [id]
  );

-  const { handleClickLink } = useEditorClickHandlers({ shareId });
+  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 focusAtEnd = React.useCallback(() => {
    localRef?.current?.focusAtEnd();
@@ -186,10 +233,11 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
        (file) => !AttachmentValidation.imageContentTypes.includes(file.type)
      );

-      return insertFiles(view, event, pos, files, {
+      insertFiles(view, event, pos, files, {
        uploadFile: handleUploadFile,
        onFileUploadStart: props.onFileUploadStart,
        onFileUploadStop: props.onFileUploadStop,
+        onShowToast: showToast,
        dictionary,
        isAttachment,
      });
@@ -200,6 +248,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
      props.onFileUploadStop,
      dictionary,
      handleUploadFile,
+      showToast,
    ]
  );

@@ -228,8 +277,8 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
  }, [localRef, onHeadingsChange]);

  const updateComments = React.useCallback(() => {
-    if (onCreateCommentMark && onDeleteCommentMark && localRef.current) {
-      const commentMarks = localRef.current.getComments();
+    if (onCreateCommentMark && onDeleteCommentMark) {
+      const commentMarks = localRef.current?.getComments();
      const commentIds = comments.orderedData.map((c) => c.id);
      const commentMarkIds = commentMarks?.map((c) => c.id);
      const newCommentIds = difference(
@@ -239,7 +288,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);
        }
@@ -283,10 +332,12 @@ 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}
@@ -301,6 +352,12 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
            minHeight={props.editorStyle.paddingBottom}
          />
        )}
+        {activeLinkElement && !shareId && (
+          <HoverPreview
+            element={activeLinkElement}
+            onClose={handleLinkInactive}
+          />
+        )}
      </>
    </ErrorBoundary>
  );
@@ -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 { UrlHelper } from "@shared/utils/UrlHelper";
+import { githubIssuesUrl, feedbackUrl } from "@shared/utils/urlHelpers";
 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 ? UrlHelper.contact : UrlHelper.github);
+    window.open(isCloudHosted ? feedbackUrl() : githubIssuesUrl());
  };

  render() {
@@ -82,7 +82,7 @@ class ErrorBoundary extends React.Component<Props> {
                </h1>
              </>
            )}
-            <Text as="p" type="secondary">
+            <Text 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 as="p" type="secondary">
+          <Text 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>
@@ -11,13 +11,16 @@ 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 EventBoundary from "@shared/components/EventBoundary";
 import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
-import { Avatar } from "~/components/Avatar";
-import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
+import Avatar from "~/components/Avatar";
+import CompositeItem, {
+  Props as ItemProps,
+} from "~/components/List/CompositeItem";
+import Item, { Actions } from "~/components/List/Item";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
@@ -29,7 +32,7 @@ type Props = {
  document: Document;
  event: Event;
  latest?: boolean;
-};
+} & CompositeStateReturn;

 const EventListItem = ({ event, latest, document, ...rest }: Props) => {
  const { t } = useTranslation();
@@ -83,18 +86,6 @@ 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);
@@ -159,9 +150,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      }
      actions={
        isRevision && isActive && event.modelId && !latest ? (
-          <StyledEventBoundary>
-            <RevisionMenu document={document} revisionId={event.modelId} />
-          </StyledEventBoundary>
+          <RevisionMenu document={document} revisionId={event.modelId} />
        ) : undefined
      }
      onMouseEnter={prefetchRevision}
@@ -175,12 +164,12 @@ const BaseItem = React.forwardRef(function _BaseItem(
  { to, ...rest }: ItemProps,
  ref?: React.Ref<HTMLAnchorElement>
 ) {
-  return <ListItem to={to} ref={ref} {...rest} />;
-});
+  if (to) {
+    return <CompositeListItem to={to} ref={ref} {...rest} />;
+  }

-const StyledEventBoundary = styled(EventBoundary)`
-  height: 24px;
-`;
+  return <ListItem ref={ref} {...rest} />;
+});

 const Subtitle = styled.span`
  svg {
@@ -239,4 +228,8 @@ const ListItem = styled(Item)`
  ${ItemStyle}
 `;

+const CompositeListItem = styled(CompositeItem)`
+  ${ItemStyle}
+`;
+
 export default observer(EventListItem);
@@ -1,7 +1,6 @@
 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";
@@ -11,8 +10,7 @@ import Text from "~/components/Text";
 import env from "~/env";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import history from "~/utils/history";
-import { settingsPath } from "~/utils/routeHelpers";
+import useToasts from "~/hooks/useToasts";

 type Props = {
  collection?: Collection;
@@ -26,6 +24,7 @@ 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;
@@ -47,22 +46,11 @@ 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 = [
@@ -95,7 +83,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
  return (
    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Export")}>
      {collection && (
-        <Text as="p">
+        <Text>
          <Trans
            defaults="Exporting the collection <em>{{collectionName}}</em> may take some time."
            values={{
@@ -120,7 +108,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
              onChange={handleFormatChange}
            />
            <div>
-              <Text as="p" size="small" weight="bold">
+              <Text size="small" weight="bold">
                {item.title}
              </Text>
              <Text size="small">{item.description}</Text>
@@ -137,7 +125,7 @@ function ExportDialog({ collection, onSubmit }: Props) {
          onChange={handleIncludeAttachmentsChange}
        />
        <div>
-          <Text as="p" size="small" weight="bold">
+          <Text size="small" weight="bold">
            {t("Include attachments")}
          </Text>
          <Text size="small">
@@ -3,7 +3,7 @@ import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import User from "~/models/User";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import Avatar from "~/components/Avatar";
 import Flex from "~/components/Flex";

 type Props = {
@@ -17,7 +17,7 @@ type Props = {
 function Facepile({
  users,
  overflow = 0,
-  size = AvatarSize.Large,
+  size = 32,
  limit = 8,
  renderAvatar = DefaultAvatar,
  ...rest
@@ -32,18 +32,15 @@ function Facepile({
          </span>
        </More>
      )}
-      {users
-        .filter(Boolean)
-        .slice(0, limit)
-        .map((user) => (
-          <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
-        ))}
+      {users.slice(0, limit).map((user) => (
+        <AvatarWrapper key={user.id}>{renderAvatar(user)}</AvatarWrapper>
+      ))}
    </Avatars>
  );
 }

 function DefaultAvatar(user: User) {
-  return <Avatar model={user} size={AvatarSize.Large} />;
+  return <Avatar model={user} size={32} />;
 }

 const AvatarWrapper = styled.div`
@@ -62,11 +59,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.textTertiary};
-  color: ${s("white")};
+  background: ${(props) => props.theme.slate};
+  color: ${s("text")};
  border: 2px solid ${s("background")};
  text-align: center;
-  font-size: 12px;
+  font-size: 11px;
  font-weight: 600;
 `;

@@ -16,7 +16,7 @@ type TFilterOption = {

 type Props = {
  options: TFilterOption[];
-  selectedKeys: (string | null | undefined)[];
+  activeKey: string | null | undefined;
  defaultLabel?: string;
  selectedPrefix?: string;
  className?: string;
@@ -25,7 +25,7 @@ type Props = {

 const FilterOptions = ({
  options,
-  selectedKeys = [],
+  activeKey = "",
  defaultLabel = "Filter options",
  selectedPrefix = "",
  className,
@@ -34,22 +34,17 @@ const FilterOptions = ({
  const menu = useMenuState({
    modal: true,
  });
-  const selectedItems = options.filter((option) =>
-    selectedKeys.includes(option.key)
-  );
+  const selected =
+    options.find((option) => option.key === activeKey) || options[0];

-  const selectedLabel = selectedItems.length
-    ? selectedItems
-        .map((selected) => `${selectedPrefix} ${selected.label}`)
-        .join(", ")
-    : "";
+  const selectedLabel = selected ? `${selectedPrefix} ${selected.label}` : "";

  return (
-    <div>
+    <Wrapper>
      <MenuButton {...menu}>
        {(props) => (
          <StyledButton {...props} className={className} neutral disclosure>
-            {selectedItems.length ? selectedLabel : defaultLabel}
+            {activeKey ? selectedLabel : defaultLabel}
          </StyledButton>
        )}
      </MenuButton>
@@ -61,7 +56,7 @@ const FilterOptions = ({
              onSelect(option.key);
              menu.hide();
            }}
-            selected={selectedKeys.includes(option.key)}
+            selected={option.key === activeKey}
            {...menu}
          >
            {option.icon && <Icon>{option.icon}</Icon>}
@@ -76,16 +71,16 @@ const FilterOptions = ({
          </MenuItem>
        ))}
      </ContextMenu>
-    </div>
+    </Wrapper>
  );
 };

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

@@ -98,7 +93,7 @@ const LabelWithNote = styled.div`
  }
 `;

-export const StyledButton = styled(Button)`
+const StyledButton = styled(Button)`
  box-shadow: none;
  text-transform: none;
  border-color: transparent;
@@ -120,4 +115,8 @@ const Icon = styled.div`
  height: 18px;
 `;

+const Wrapper = styled.div`
+  margin-right: 8px;
+`;
+
 export default FilterOptions;
@@ -1,3 +1,38 @@
-import Flex from "@shared/components/Flex";
+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;
+`;

 export default Flex;
@@ -5,31 +5,36 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { MAX_AVATAR_DISPLAY } from "@shared/constants";
 import { s } from "@shared/styles";
+import CollectionGroupMembership from "~/models/CollectionGroupMembership";
 import Group from "~/models/Group";
-import GroupMembership from "~/models/GroupMembership";
 import GroupMembers from "~/scenes/GroupMembers";
 import Facepile from "~/components/Facepile";
 import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Modal from "~/components/Modal";
 import useBoolean from "~/hooks/useBoolean";
+import useStores from "~/hooks/useStores";
 import { hover } from "~/styles";
 import NudeButton from "./NudeButton";

 type Props = {
  group: Group;
-  membership?: GroupMembership;
+  membership?: CollectionGroupMembership;
  showFacepile?: boolean;
  showAvatar?: boolean;
  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
 };

 function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { groupMemberships } = useStores();
  const { t } = useTranslation();
  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
    useBoolean();
  const memberCount = group.memberCount;
-  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  const membershipsInGroup = groupMemberships.inGroup(group.id);
+  const users = membershipsInGroup
+    .slice(0, MAX_AVATAR_DISPLAY)
+    .map((gm) => gm.user);
  const overflow = memberCount - users.length;

  return (
@@ -1,4 +1,4 @@
-import throttle from "lodash/throttle";
+import { throttle } from "lodash";
 import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
@@ -6,7 +6,6 @@ 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";
@@ -15,16 +14,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, className }: Props) {
+function Header({ left, title, actions, hasSidebar }: Props) {
  const { ui } = useStores();
  const isMobile = useMobile();
  const hasMobileSidebar = hasSidebar && isMobile;
@@ -55,7 +54,6 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
    <Wrapper
      align="center"
      shrink={false}
-      className={className}
      $passThrough={passThrough}
      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
    >
@@ -1,10 +1,9 @@
 import styled from "styled-components";

-const Heading = styled.h1<{ as?: string; centered?: boolean }>`
+const Heading = styled.h1<{ 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;" : "")}
 `;

@@ -1,4 +1,4 @@
-import escapeRegExp from "lodash/escapeRegExp";
+import { escapeRegExp } from "lodash";
 import * as React from "react";
 import replace from "string-replace-to-array";
 import styled from "styled-components";
@@ -44,9 +44,9 @@ function Highlight({
 }

 export const Mark = styled.mark`
-  color: ${s("text")};
-  background: transparent;
-  font-weight: 600;
+  background: ${s("searchHighlight")};
+  border-radius: 2px;
+  padding: 0 2px;
 `;

 export default Highlight;
@@ -2,10 +2,9 @@ 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 = 10;
+export const CARD_MARGIN = 16;

 const NUMBER_OF_LINES = 10;

@@ -18,22 +17,21 @@ const StyledText = styled(Text)`
 `;

 export const Preview = styled(Link)`
-  cursor: ${(props: { as?: string }) =>
+  cursor: ${(props: any) =>
    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;
-  width: 375px;
+  min-width: 350px;
+  max-width: 375px;
 `;

-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 Title = styled.h2`
+  font-size: 1.25em;
+  margin: 0;
+  color: ${s("text")};
 `;

 export const Info = styled(StyledText).attrs(() => ({
@@ -48,7 +46,6 @@ 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`
@@ -57,20 +54,6 @@ 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;
@@ -2,93 +2,146 @@ import { m } from "framer-motion";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
-import { depths } from "@shared/styles";
-import { UnfurlResourceType } from "@shared/types";
+import { depths, s } from "@shared/styles";
+import { UnfurlType } from "@shared/types";
+import LoadingIndicator from "~/components/LoadingIndicator";
 import useEventListener from "~/hooks/useEventListener";
 import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
-import LoadingIndicator from "../LoadingIndicator";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import { client } from "~/utils/ApiClient";
 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_CLOSE = 500;
-const POINTER_HEIGHT = 22;
-const POINTER_WIDTH = 22;
+const DELAY_OPEN = 300;
+const DELAY_CLOSE = 600;

 type Props = {
-  /** 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. */
+  /* The HTML element that is being hovered over */
+  element: HTMLAnchorElement;
+  /* A callback on close of the hover preview */
  onClose: () => void;
 };

-enum Direction {
-  UP,
-  DOWN,
-}
-
-function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
+function HoverPreviewInternal({ element, onClose }: Props) {
+  const url = element.href || element.dataset.url;
  const [isVisible, setVisible] = React.useState(false);
  const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
-  const cardRef = React.useRef<HTMLDivElement | null>(null);
-  const { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir } =
-    useHoverPosition({
-      cardRef,
-      element,
-      isVisible,
-    });
+  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 closePreview = React.useCallback(() => {
-    setVisible(false);
-    onClose();
-  }, [onClose]);
-
-  const stopCloseTimer = React.useCallback(() => {
-    if (timerClose.current) {
-      clearTimeout(timerClose.current);
-      timerClose.current = undefined;
+    if (isVisible) {
+      stopOpenTimer();
+      setVisible(false);
+      onClose();
    }
-  }, []);
+  }, [isVisible, onClose]);

-  const startCloseTimer = React.useCallback(() => {
-    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.
+  const stopCloseTimer = () => {
+    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]);
+
  React.useEffect(() => {
    const card = cardRef.current;

-    if (isVisible) {
+    if (data) {
+      startOpenTimer();
+
      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);
@@ -96,9 +149,9 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {

      stopCloseTimer();
    };
-  }, [element, startCloseTimer, isVisible, stopCloseTimer]);
+  }, [element, startCloseTimer, data]);

-  if (dataLoading) {
+  if (loading) {
    return <LoadingIndicator />;
  }

@@ -112,51 +165,24 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
        {isVisible ? (
          <Animate
            initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
-            animate={{
-              opacity: 1,
-              y: 0,
-              transitionEnd: { pointerEvents: "auto" },
-            }}
+            animate={{ opacity: 1, y: 0, pointerEvents: "auto" }}
          >
-            {data.type === UnfurlResourceType.Mention ? (
+            {data.type === UnfurlType.Mention ? (
              <HoverPreviewMention
                ref={cardRef}
-                name={data.name}
-                avatarUrl={data.avatarUrl}
-                color={data.color}
-                lastActive={data.lastActive}
+                url={data.thumbnailUrl}
+                title={data.title}
+                info={data.meta.info}
+                color={data.meta.color}
              />
-            ) : data.type === UnfurlResourceType.Document ? (
+            ) : data.type === UnfurlType.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}
-                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}
+                info={data.meta.info}
              />
            ) : (
              <HoverPreviewLink
@@ -167,11 +193,7 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
                description={data.description}
              />
            )}
-            <Pointer
-              top={pointerTop}
-              left={pointerLeft}
-              direction={pointerDir}
-            />
+            <Pointer offset={pointerOffset} />
          </Animate>
        ) : null}
      </Position>
@@ -179,77 +201,13 @@ function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
  );
 }

-function HoverPreview({ element, data, dataLoading, ...rest }: Props) {
+function HoverPreview({ element, ...rest }: Props) {
  const isMobile = useMobile();
  if (isMobile) {
    return null;
  }

-  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 };
+  return <HoverPreviewInternal {...rest} element={element} />;
 }

 const Animate = styled(m.div)`
@@ -259,6 +217,7 @@ 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;
@@ -268,11 +227,11 @@ const Position = styled.div<{ fixed?: boolean; top?: number; left?: number }>`
  ${({ left }) => (left !== undefined ? `left: ${left}px` : "")};
 `;

-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;
+const Pointer = styled.div<{ offset: number }>`
+  top: -22px;
+  left: ${(props) => props.offset}px;
+  width: 22px;
+  height: 22px;
  position: absolute;
  transform: translateX(-50%);
  pointer-events: none;
@@ -282,26 +241,20 @@ const Pointer = styled.div<{ top: number; left: number; direction: Direction }>`
    content: "";
    display: inline-block;
    position: absolute;
-    ${({ direction }) => (direction === Direction.UP ? "bottom: 0" : "top: 0")};
-    ${({ direction }) => (direction === Direction.UP ? "right: 0" : "left: 0")};
+    bottom: 0;
+    right: 0;
  }

  &:before {
    border: 8px solid transparent;
-    ${({ 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"};
+    border-bottom-color: ${(props) =>
+      props.theme.menuBorder || "rgba(0, 0, 0, 0.1)"};
+    right: -1px;
  }

  &:after {
    border: 7px solid transparent;
-    ${({ direction, theme }) =>
-      direction === Direction.UP
-        ? `border-bottom-color: ${theme.menuBackground}`
-        : `border-top-color: ${theme.menuBackground}`};
+    border-bottom-color: ${s("menuBackground")};
  }
 `;

@@ -1,9 +1,6 @@
 import * as React from "react";
-import { richExtensions } from "@shared/editor/nodes";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import Editor from "~/components/Editor";
 import Flex from "~/components/Flex";
-import ErrorBoundary from "../ErrorBoundary";
 import {
  Preview,
  Title,
@@ -13,33 +10,41 @@ import {
  Description,
 } from "./Components";

-type Props = Omit<UnfurlResponse[UnfurlResourceType.Document], "type">;
+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;
+};

 const HoverPreviewDocument = React.forwardRef(function _HoverPreviewDocument(
-  { url, id, title, summary, lastActivityByViewer }: Props,
+  { id, url, title, info, description }: Props,
  ref: React.Ref<HTMLDivElement>
 ) {
  return (
    <Preview to={url}>
      <Card ref={ref}>
        <CardContent>
-          <ErrorBoundary showTitle={false} reloadOnChunkMissing={false}>
-            <Flex column gap={2}>
-              <Title>{title}</Title>
-              <Info>{lastActivityByViewer}</Info>
-              <Description as="div">
-                <React.Suspense fallback={<div />}>
-                  <Editor
-                    key={id}
-                    extensions={richExtensions}
-                    defaultValue={summary}
-                    embedsDisabled
-                    readOnly
-                  />
-                </React.Suspense>
-              </Description>
-            </Flex>
-          </ErrorBoundary>
+          <Flex column gap={2}>
+            <Title>{title}</Title>
+            <Info>{info}</Info>
+            <Description as="div">
+              <React.Suspense fallback={<div />}>
+                <Editor
+                  key={id}
+                  defaultValue={description}
+                  embedsDisabled
+                  readOnly
+                />
+              </React.Suspense>
+            </Description>
+          </Flex>
        </CardContent>
      </Card>
    </Preview>
@@ -1,65 +0,0 @@
-import * as React from "react";
-import { Trans } from "react-i18next";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
-import Flex from "~/components/Flex";
-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;
@@ -26,9 +26,9 @@ const HoverPreviewLink = React.forwardRef(function _HoverPreviewLink(
 ) {
  return (
    <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
-      <Flex column ref={ref}>
+      <Flex column>
        {thumbnailUrl ? <Thumbnail src={thumbnailUrl} alt={""} /> : null}
-        <Card>
+        <Card ref={ref}>
          <CardContent>
            <Flex column>
              <Title>{title}</Title>
@@ -1,13 +1,22 @@
 import * as React from "react";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+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 = Omit<UnfurlResponse[UnfurlResourceType.Mention], "type">;
+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;
+};

 const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
-  { avatarUrl, name, lastActive, color }: Props,
+  { url, title, info, color }: Props,
  ref: React.Ref<HTMLDivElement>
 ) {
  return (
@@ -17,15 +26,15 @@ const HoverPreviewMention = React.forwardRef(function _HoverPreviewMention(
          <Flex gap={12}>
            <Avatar
              model={{
-                avatarUrl,
-                initial: name ? name[0] : "?",
+                avatarUrl: url,
+                initial: title ? title[0] : "?",
                color,
              }}
              size={AvatarSize.XLarge}
            />
            <Flex column gap={2} justify="center">
-              <Title>{name}</Title>
-              <Info>{lastActive}</Info>
+              <Title>{title}</Title>
+              <Info>{info}</Info>
            </Flex>
          </Flex>
        </CardContent>
@@ -1,58 +0,0 @@
-import * as React from "react";
-import { Trans } from "react-i18next";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import { Avatar } from "~/components/Avatar";
-import Flex from "~/components/Flex";
-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;
@@ -1,129 +0,0 @@
-import { observer } from "mobx-react";
-import { getLuminance } from "polished";
-import * as React from "react";
-import styled from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { IconType } from "@shared/types";
-import { IconLibrary } from "@shared/utils/IconLibrary";
-import { colorPalette } from "@shared/utils/collections";
-import { determineIconType } from "@shared/utils/icon";
-import EmojiIcon from "~/components/Icons/EmojiIcon";
-import useStores from "~/hooks/useStores";
-import Logger from "~/utils/Logger";
-import Flex from "./Flex";
-
-export type Props = {
-  /** The icon to render */
-  value: string;
-  /** The color of the icon */
-  color?: string;
-  /** The size of the icon */
-  size?: number;
-  /** The initial to display if the icon is a letter icon */
-  initial?: string;
-  /** Optional additional class name */
-  className?: string;
-  /**
-   * Ensure the color does not change in response to theme and contrast. Should only be
-   * used in color picker UI.
-   */
-  forceColor?: boolean;
-};
-
-const Icon = ({
-  value: icon,
-  color,
-  size = 24,
-  initial,
-  forceColor,
-  className,
-}: Props) => {
-  const iconType = determineIconType(icon);
-
-  if (!iconType) {
-    Logger.warn("Failed to determine icon type", {
-      icon,
-    });
-    return null;
-  }
-
-  try {
-    if (iconType === IconType.SVG) {
-      return (
-        <SVGIcon
-          value={icon}
-          color={color}
-          size={size}
-          initial={initial}
-          className={className}
-          forceColor={forceColor}
-        />
-      );
-    }
-
-    return <EmojiIcon emoji={icon} size={size} className={className} />;
-  } catch (err) {
-    Logger.warn("Failed to render icon", {
-      icon,
-    });
-  }
-
-  return null;
-};
-
-const SVGIcon = observer(
-  ({
-    value: icon,
-    color: inputColor,
-    initial,
-    size,
-    className,
-    forceColor,
-  }: Props) => {
-    const { ui } = useStores();
-
-    let color = inputColor ?? colorPalette[0];
-
-    // If the chosen icon color is very dark then we invert it in dark mode
-    if (!forceColor) {
-      if (ui.resolvedTheme === "dark" && color !== "currentColor") {
-        color = getLuminance(color) > 0.09 ? color : "currentColor";
-      }
-
-      // If the chosen icon color is very light then we invert it in light mode
-      if (ui.resolvedTheme === "light" && color !== "currentColor") {
-        color = getLuminance(color) < 0.9 ? color : "currentColor";
-      }
-    }
-
-    const Component = IconLibrary.getComponent(icon);
-
-    return (
-      <Component color={color} size={size} className={className}>
-        {initial}
-      </Component>
-    );
-  }
-);
-
-export const IconTitleWrapper = styled(Flex)<{ dir?: string }>`
-  align-items: center;
-  justify-content: center;
-  position: absolute;
-  top: 3px;
-  height: 40px;
-  width: 40px;
-
-  // Always move above TOC
-  z-index: 1;
-
-  ${(props: { dir?: string }) =>
-    props.dir === "rtl" ? "right: -40px" : "left: -40px"};
-
-  ${breakpoint("desktop")`
-    ${(props: { dir?: string }) =>
-      props.dir === "rtl" ? "right: -44px" : "left: -44px"};
-  `}
-`;
-
-export default Icon;
@@ -0,0 +1,349 @@
+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 styled, { useTheme } from "styled-components";
+import breakpoint from "styled-components-breakpoint";
+import { s } from "@shared/styles";
+import { colorPalette } from "@shared/utils/collections";
+import ContextMenu from "~/components/ContextMenu";
+import Flex from "~/components/Flex";
+import { LabelText } from "~/components/Input";
+import NudeButton from "~/components/NudeButton";
+import Text from "~/components/Text";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import DelayedMount from "./DelayedMount";
+
+const style = {
+  width: 30,
+  height: 30,
+};
+
+const TwitterPicker = 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;
+  icon: string;
+  color: string;
+};
+
+function IconPicker({ onOpen, onClose, icon, color, onChange }: Props) {
+  const { t } = useTranslation();
+  const theme = useTheme();
+  const menu = useMenuState({
+    modal: true,
+    placement: "bottom-end",
+  });
+
+  return (
+    <Wrapper>
+      <Label>
+        <LabelText>{t("Icon")}</LabelText>
+      </Label>
+      <MenuButton {...menu}>
+        {(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>
+            }
+          >
+            <ColorPicker
+              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>
+  );
+}
+
+const Icon = styled.svg`
+  transition: 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)`
+  border-radius: 4px;
+  margin: 0px 6px 6px 0px;
+  width: 30px;
+  height: 30px;
+`;
+
+const ColorPicker = styled(TwitterPicker)`
+  box-shadow: none !important;
+  background: transparent !important;
+  width: 100% !important;
+`;
+
+const Wrapper = styled("div")`
+  display: inline-block;
+  position: relative;
+`;
+
+export default IconPicker;
@@ -1,218 +0,0 @@
-import { BackIcon } from "outline-icons";
-import React from "react";
-import styled from "styled-components";
-import { breakpoints, s } from "@shared/styles";
-import { colorPalette } from "@shared/utils/collections";
-import { validateColorHex } from "@shared/utils/color";
-import Flex from "~/components/Flex";
-import NudeButton from "~/components/NudeButton";
-import Text from "~/components/Text";
-import { hover } from "~/styles";
-
-enum Panel {
-  Builtin,
-  Hex,
-}
-
-type Props = {
-  width: number;
-  activeColor: string;
-  onSelect: (color: string) => void;
-};
-
-const ColorPicker = ({ width, activeColor, onSelect }: Props) => {
-  const [localValue, setLocalValue] = React.useState(activeColor);
-
-  const [panel, setPanel] = React.useState(
-    colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex
-  );
-
-  const handleSwitcherClick = React.useCallback(() => {
-    setPanel(panel === Panel.Builtin ? Panel.Hex : Panel.Builtin);
-  }, [panel, setPanel]);
-
-  const isLargeMobile = width > breakpoints.mobileLarge + 12; // 12px for the Container padding
-
-  React.useEffect(() => {
-    setLocalValue(activeColor);
-    setPanel(colorPalette.includes(activeColor) ? Panel.Builtin : Panel.Hex);
-  }, [activeColor]);
-
-  return isLargeMobile ? (
-    <Container justify="space-between">
-      <LargeMobileBuiltinColors activeColor={activeColor} onClick={onSelect} />
-      <LargeMobileCustomColor
-        value={localValue}
-        setLocalValue={setLocalValue}
-        onValidHex={onSelect}
-      />
-    </Container>
-  ) : (
-    <Container gap={12}>
-      <PanelSwitcher align="center">
-        <SwitcherButton panel={panel} onClick={handleSwitcherClick}>
-          {panel === Panel.Builtin ? "#" : <BackIcon />}
-        </SwitcherButton>
-      </PanelSwitcher>
-      {panel === Panel.Builtin ? (
-        <BuiltinColors activeColor={activeColor} onClick={onSelect} />
-      ) : (
-        <CustomColor
-          value={localValue}
-          setLocalValue={setLocalValue}
-          onValidHex={onSelect}
-        />
-      )}
-    </Container>
-  );
-};
-
-const BuiltinColors = ({
-  activeColor,
-  onClick,
-  className,
-}: {
-  activeColor: string;
-  onClick: (color: string) => void;
-  className?: string;
-}) => (
-  <Flex className={className} justify="space-between" align="center" auto>
-    {colorPalette.map((color) => (
-      <ColorButton
-        key={color}
-        color={color}
-        active={color === activeColor}
-        onClick={() => onClick(color)}
-      >
-        <Selected />
-      </ColorButton>
-    ))}
-  </Flex>
-);
-
-const CustomColor = ({
-  value,
-  setLocalValue,
-  onValidHex,
-  className,
-}: {
-  value: string;
-  setLocalValue: (value: string) => void;
-  onValidHex: (color: string) => void;
-  className?: string;
-}) => {
-  const hasHexChars = React.useCallback(
-    (color: string) => /(^#[0-9A-F]{1,6}$)/i.test(color),
-    []
-  );
-
-  const handleInputChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      const val = ev.target.value;
-
-      if (val === "" || val === "#") {
-        setLocalValue("#");
-        return;
-      }
-
-      const uppercasedVal = val.toUpperCase();
-
-      if (hasHexChars(uppercasedVal)) {
-        setLocalValue(uppercasedVal);
-      }
-
-      if (validateColorHex(uppercasedVal)) {
-        onValidHex(uppercasedVal);
-      }
-    },
-    [setLocalValue, hasHexChars, onValidHex]
-  );
-
-  return (
-    <Flex className={className} align="center" gap={8}>
-      <Text type="tertiary" size="small">
-        HEX
-      </Text>
-      <CustomColorInput
-        maxLength={7}
-        value={value}
-        onChange={handleInputChange}
-      />
-    </Flex>
-  );
-};
-
-const Container = styled(Flex)`
-  height: 48px;
-  padding: 8px 12px;
-  border-bottom: 1px solid ${s("inputBorder")};
-`;
-
-const Selected = styled.span`
-  width: 10px;
-  height: 5px;
-  border-left: 2px solid white;
-  border-bottom: 2px solid white;
-  transform: translateY(-25%) rotate(-45deg);
-`;
-
-const ColorButton = styled(NudeButton)<{ color: string; active: boolean }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  background-color: ${({ color }) => color};
-
-  &: ${hover} {
-    outline: 2px solid ${s("menuBackground")} !important;
-    box-shadow: ${({ color }) => `0px 0px 3px 3px ${color}`};
-  }
-
-  & ${Selected} {
-    display: ${({ active }) => (active ? "block" : "none")};
-  }
-`;
-
-const PanelSwitcher = styled(Flex)`
-  width: 40px;
-  border-right: 1px solid ${s("inputBorder")};
-`;
-
-const SwitcherButton = styled(NudeButton)<{ panel: Panel }>`
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 14px;
-  border: 1px solid ${s("inputBorder")};
-  transition: all 100ms ease-in-out;
-
-  &: ${hover} {
-    border-color: ${s("inputBorderFocused")};
-  }
-`;
-
-const LargeMobileBuiltinColors = styled(BuiltinColors)`
-  max-width: 380px;
-  padding-right: 8px;
-`;
-
-const LargeMobileCustomColor = styled(CustomColor)`
-  padding-left: 8px;
-  border-left: 1px solid ${s("inputBorder")};
-  width: 120px;
-`;
-
-const CustomColorInput = styled.input.attrs(() => ({
-  type: "text",
-  autocomplete: "off",
-}))`
-  font-size: 14px;
-  color: ${s("textSecondary")};
-  background: transparent;
-  border: 0;
-  outline: 0;
-`;
-
-export default ColorPicker;
@@ -1,8 +0,0 @@
-import styled from "styled-components";
-import { s } from "@shared/styles";
-
-export const Emoji = styled.span`
-  font-family: ${s("fontFamilyEmoji")};
-  width: 24px;
-  height: 24px;
-`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	8e9beac59f	test	2023-08-08 23:12:41 -04:00
Tom Moor	a0f7c76405	Add support for SSL in development	2023-08-08 22:46:31 -04:00