Update yarn.lock for React 18 dependencies

Update React and React DOM to version 18 and update related dependencies
Update React types to match React 18 version and update testing library
2026-06-13 11:25:03 +03:00 · 2025-05-20 03:33:22 +00:00 · 2025-05-20 03:30:40 +00:00 · 2025-05-20 03:25:53 +00:00 · 2025-05-20 03:22:18 +00:00 · 2025-05-20 03:09:58 +00:00
290 changed files with 11961 additions and 3224 deletions
@@ -1,48 +1,80 @@
-# –––––––––––––––– REQUIRED ––––––––––––––––
-
 NODE_ENV=production

-# Generate a hex-encoded 32-byte random key. You should use `openssl rand -hex 32`
-# in your terminal to generate a random value.
-SECRET_KEY=generate_a_new_key
-
-# Generate a unique random key. The format is not important but you could still use
-# `openssl rand -hex 32` in your terminal to produce this.
-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@postgres:5432/outline
-DATABASE_CONNECTION_POOL_MIN=
-DATABASE_CONNECTION_POOL_MAX=
-# Uncomment this to disable SSL for connecting to Postgres
-# PGSSLMODE=disable
-
-# For redis you can either specify an ioredis compatible url like this
-REDIS_URL=redis://redis:6379
-# or alternatively, if you would like to provide additional connection options,
-# use a base64 encoded JSON connection option object. Refer to the ioredis documentation
-# for a list of available options.
-# Example: Use Redis Sentinel for high availability
-# {"sentinels":[{"host":"sentinel-0","port":26379},{"host":"sentinel-1","port":26379}],"name":"mymaster"}
-# REDIS_URL=ioredis://eyJzZW50aW5lbHMiOlt7Imhvc3QiOiJzZW50aW5lbC0wIiwicG9ydCI6MjYzNzl9LHsiaG9zdCI6InNlbnRpbmVsLTEiLCJwb3J0IjoyNjM3OX1dLCJuYW1lIjoibXltYXN0ZXIifQ==
-
-# URL should point to the fully qualified, publicly accessible URL. If using a
-# proxy the port in URL and PORT may be different.
+# This URL should point to the fully qualified, publicly accessible, URL. If using a
+# proxy this will be the proxy's URL.
 URL=
+
+# The port to expose the Outline server on, this should match what is configured
+# in your docker-compose.yml
 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=

+# If using a Cloudfront/Cloudflare distribution or similar it can be set below.
+# This will cause paths to javascript, stylesheets, and images to be updated to
+# the hostname defined in CDN_URL. In your CDN configuration the origin server
+# should be set to the same as URL.
+CDN_URL=
+
+# How many processes should be spawned. As a reasonable rule divide your servers
+# available memory by 512 for a rough estimate
+WEB_CONCURRENCY=1
+
+# Generate a hex-encoded 32-byte random key. Use `openssl rand -hex 32` in your
+# terminal to generate a random value.
+SECRET_KEY=generate_a_new_key
+
+# Generate a unique random key. The format is not important but you could still use
+# `openssl rand -hex 32` in your terminal to generate a random value.
+UTILS_SECRET=generate_a_new_key
+
+# The default interface language. See translate.getoutline.com for a list of
+# available language codes and their rough percentage translated.
+DEFAULT_LANGUAGE=en_US
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# –––––––––––––  DATABASE  –––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# The database URL for your production database, including username, password, and database name.
+DATABASE_URL=postgres://user:pass@postgres:5432/outline
+
+# The in-memory database pool per-process settings. Ensure that the pool size that will not exceed
+# the maximum number of connections allowed by your database. Defaults to 0 and 5.
+DATABASE_CONNECTION_POOL_MIN=
+DATABASE_CONNECTION_POOL_MAX=
+
+# Uncomment this line if you will not use SSL for connecting to Postgres. This is acceptable
+# if the database and the application are on the same machine.
+# PGSSLMODE=disable
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# ––––––––––––––  REDIS  –––––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# The Redis URL for your environment you can either specify an ioredis compatible url or a Base64
+# encoded configuration object.
+# DOCS: https://docs.getoutline.com/s/hosting/doc/redis-LGM4BFXYp4
+REDIS_URL=redis://redis:6379
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# –––––––––––  FILE STORAGE  –––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
 # 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. 
+# For "local" images and document attachments will be saved on local disk, for "s3" they
+# will be stored in an S3-compatible network store.
+# DOCS: https://docs.getoutline.com/s/hosting/doc/file-storage-N4M0T6Ypu7
 FILE_STORAGE=local

 # If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images go. Make sure that the process has permissions to create
-# this path and also to write files to it.
+# which all attachments/images are stored. 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.
@@ -56,8 +88,8 @@ FILE_STORAGE_IMPORT_MAX_SIZE=
 # 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.
+# To support uploading of images for avatars and document attachments in a distributed
+# architecture, an s3-compatible storage can be configured if FILE_STORAGE=s3 above.
 AWS_ACCESS_KEY_ID=get_a_key_from_aws
 AWS_SECRET_ACCESS_KEY=get_the_secret_of_above_key
 AWS_REGION=xx-xxxx-x
@@ -67,38 +99,55 @@ AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private

-# –––––––––––––– AUTHENTICATION ––––––––––––––
+
+# ––––––––––––––––––––––––––––––––––––––
+# ––––––––––––––––  SSL  –––––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# Base64 encoded private key and certificate for HTTPS termination. This is one
+# of three ways to configure SSL and can be left empty.
+# DOCS: https://docs.getoutline.com/s/hosting/doc/ssl-pzk7WO8d1n
+SSL_KEY=
+SSL_CERT=
+
+# Auto-redirect to https in production. The default is true but you may set to
+# false if you can be sure that SSL is terminated at an external loadbalancer.
+FORCE_HTTPS=true
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# ––––––––––  AUTHENTICATION  ––––––––––
+# ––––––––––––––––––––––––––––––––––––––

 # Third party signin credentials, at least ONE OF EITHER Google, Slack,
-# or Microsoft is required for a working installation or you'll have no sign-in
-# options.
+# Discord, or Microsoft is required for a working installation or you'll
+# have no sign-in options.

-# To configure Slack auth, you'll need to create an Application at
-# => https://api.slack.com/apps
-#
-# When configuring the Client ID, add a redirect URL under "OAuth & Permissions":
-# https://<URL>/auth/slack.callback
+# Slack sign-in provider
+# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-sgMujR8J9J
 SLACK_CLIENT_ID=get_a_key_from_slack
 SLACK_CLIENT_SECRET=get_the_secret_of_above_key

-# To configure Google auth, you'll need to create an OAuth Client ID at
-# => https://console.cloud.google.com/apis/credentials
-#
-# When configuring the Client ID, add an Authorized redirect URI:
-# https://<URL>/auth/google.callback
+# Google sign-in provider
+# DOCS: https://docs.getoutline.com/s/hosting/doc/google-hOuvtCmTqQ
 GOOGLE_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=

-# To configure Microsoft/Azure auth, you'll need to create an OAuth Client. See
-# the guide for details on setting up your Azure App:
-# => https://wiki.generaloutline.com/share/dfa77e56-d4d2-4b51-8ff8-84ea6608faa4
+# Microsoft Entra / Azure AD sign-in provider
+# DOCS: https://docs.getoutline.com/s/hosting/doc/microsoft-entra-UVz6jsIOcv
 AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=

-# To configure generic OIDC auth, you'll need some kind of identity provider.
-# See documentation for whichever IdP you use to acquire the following info:
-# Redirect URI is https://<URL>/auth/oidc.callback
+# Discord sign-in provider
+# DOCS: https://docs.getoutline.com/s/hosting/doc/discord-g4JdWFFub6
+DISCORD_CLIENT_ID=
+DISCORD_CLIENT_SECRET=
+DISCORD_SERVER_ID=
+DISCORD_SERVER_ROLES=
+
+# Generic OIDC provider
+# DOCS: https://docs.getoutline.com/s/hosting/doc/oidc-8CPBm6uC0I
 OIDC_CLIENT_ID=
 OIDC_CLIENT_SECRET=
 OIDC_AUTH_URI=
@@ -116,83 +165,54 @@ 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
+
+# ––––––––––––––––––––––––––––––––––––––
+# ––––––––––––––  EMAIL  –––––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# To support sending outgoing transactional emails such as "document updated" or
+# email sign-in you'll need to connect an SMTP server. Service can be configured
+# with any service from this list: https://community.nodemailer.com/2-0-0-beta/setup-smtp/well-known-services/
+# DOCS: https://docs.getoutline.com/s/hosting/doc/smtp-cqCJyZGMIB
+SMTP_SERVICE=
+SMTP_USERNAME=
+SMTP_PASSWORD=
+SMTP_FROM_EMAIL=
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# ––––––––––  RATE LIMITER  ––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# Whether the rate limiter is enabled or not
+RATE_LIMITER_ENABLED=true
+
+# Individual endpoints have hardcoded rate limits that are enabled
+# with the above setting, however this is a global rate limiter
+# across all requests
+RATE_LIMITER_REQUESTS=1000
+RATE_LIMITER_DURATION_WINDOW=60
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# –––––––––––  INTEGRATIONS  –––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# The GitHub integration allows previewing issue and pull request links
+# DOCS: https://docs.getoutline.com/s/hosting/doc/github-GchT3NNxI9
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=

-# Linear
+# The Linear integration allows previewing issue links as rich mentions
 LINEAR_CLIENT_ID=
 LINEAR_CLIENT_SECRET=

-# 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=
-
-# –––––––––––––– IMPORTS ––––––––––––––
-NOTION_CLIENT_ID=
-NOTION_CLIENT_SECRET=
-
-# –––––––––––––––– OPTIONAL ––––––––––––––––
-
-# Base64 encoded private key and certificate for HTTPS termination. This is only
-# required if you do not use an external reverse proxy. See documentation:
-# https://wiki.generaloutline.com/share/1c922644-40d8-41fe-98f9-df2b67239d45
-SSL_KEY=
-SSL_CERT=
-
-# If using a Cloudfront/Cloudflare distribution or similar it can be set below.
-# This will cause paths to javascript, stylesheets, and images to be updated to
-# the hostname defined in CDN_URL. In your CDN configuration the origin server
-# should be set to the same as URL.
-CDN_URL=
-
-# Auto-redirect to https in production. The default is true but you may set to
-# false if you can be sure that SSL is terminated at an external loadbalancer.
-FORCE_HTTPS=true
-
-# Have the installation check for updates by sending anonymized statistics to
-# the maintainers
-ENABLE_UPDATES=true
-
-# How many processes should be spawned. As a reasonable rule divide your servers
-# available memory by 512 for a rough estimate
-WEB_CONCURRENCY=1
-
-# You can remove this line if your reverse proxy already logs incoming http
-# requests and this ends up being duplicative
-DEBUG=http
-
-# Configure lowest severity level for server logs. Should be one of
-# error, warn, info, http, verbose, debug and silly
-LOG_LEVEL=info
-
 # For a complete Slack integration with search and posting to channels the
-# following configs are also needed, some more details
-# => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
-#
+# following configs are also needed in addition to Slack authentication:
+# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-G2mc8DOJHk
 SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
@@ -202,29 +222,34 @@ SLACK_MESSAGE_ACTIONS=true
 DROPBOX_APP_KEY=

 # Optionally enable Sentry (sentry.io) to track errors and performance,
-# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
-# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
+# DOCS: https://docs.getoutline.com/s/hosting/doc/sentry-jxcFttcDl5
 SENTRY_DSN=
 SENTRY_TUNNEL=

-# To support sending outgoing transactional emails such as "document updated" or
-# "you've been invited" you'll need to provide authentication for an SMTP server
-SMTP_SERVICE=
-SMTP_USERNAME=
-SMTP_PASSWORD=
-SMTP_FROM_EMAIL=
+# Enable importing pages from a Notion workspace
+# DOCS: https://docs.getoutline.com/s/hosting/doc/notion-2v6g7WY3l3
+NOTION_CLIENT_ID=
+NOTION_CLIENT_SECRET=

-# The default interface language. See translate.getoutline.com for a list of
-# available language codes and their rough percentage translated.
-DEFAULT_LANGUAGE=en_US
-
-# Optionally enable rate limiter at application web server
-RATE_LIMITER_ENABLED=true
-
-# Configure default throttling parameters for rate limiter
-RATE_LIMITER_REQUESTS=1000
-RATE_LIMITER_DURATION_WINDOW=60
-
-# Iframely API config
+# The Iframely integration allows previews of third-party content within Outline.
+# For example, hovering over an external link will show a preview.
+# DOCS: https://docs.getoutline.com/s/hosting/doc/iframely-HwLF1EZ9mo
 IFRAMELY_URL=
 IFRAMELY_API_KEY=
+
+
+# ––––––––––––––––––––––––––––––––––––––
+# –––––––––––––  DEBUGGING  ––––––––––––
+# ––––––––––––––––––––––––––––––––––––––
+
+# Have the installation check for updates by sending anonymized statistics to
+# the maintainers
+ENABLE_UPDATES=true
+
+# Debugging categories to enable – you can remove the default "http" value if
+# your proxy already logs incoming http requests and this ends up being duplicative
+DEBUG=http
+
+# Configure lowest severity level for server logs. Should be one of
+# error, warn, info, http, verbose, debug, or silly
+LOG_LEVEL=info
@@ -0,0 +1,59 @@
+name: Auto Close Unsigned PRs
+
+on:
+  schedule:
+    - cron: '0 0 * * *'  # Run daily at midnight UTC
+
+jobs:
+  close-unsigned-prs:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      issues: write
+
+    steps:
+      - name: Close unsigned PRs
+        uses: actions/github-script@v6
+        with:
+          script: |
+            const now = new Date();
+            const TWO_WEEKS = 14 * 24 * 60 * 60 * 1000; // 14 days in milliseconds
+
+            const prs = await github.rest.pulls.list({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              state: 'open'
+            });
+
+            for (const pr of prs.data) {
+              const prCreatedAt = new Date(pr.created_at);
+              const prAge = now - prCreatedAt;
+
+              if (prAge < TWO_WEEKS) continue;
+
+              const comments = await github.rest.issues.listComments({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: pr.number
+              });
+
+              const hasNotSignedComment = comments.data.some(comment =>
+                comment.body.toLowerCase().includes('https://cla-assistant.io/pull/badge/not_signed')
+              );
+
+              if (hasNotSignedComment) {
+                await github.rest.pulls.update({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  pull_number: pr.number,
+                  state: 'closed'
+                });
+
+                await github.rest.issues.createComment({
+                  owner: context.repo.owner,
+                  repo: context.repo.repo,
+                  issue_number: pr.number,
+                  body: 'This PR has been automatically closed because it has been open for more than 14 days and has not accepted the CLA.'
+                });
+              }
+            }
@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters

 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.83.0
+Licensed Work:        Outline 0.84.0
                      The Licensed Work is (c) 2025 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:          2029-04-11
+Change Date:          2029-05-11

 Change License:       Apache License, Version 2.0

@@ -0,0 +1,25 @@
+import { PlusIcon } from "outline-icons";
+import * as React from "react";
+import stores from "~/stores";
+import { OAuthClientNew } from "~/components/OAuthClient/OAuthClientNew";
+import { createAction } from "..";
+import { SettingsSection } from "../sections";
+
+export const createOAuthClient = createAction({
+  name: ({ t }) => t("New App"),
+  analyticsName: "New App",
+  section: SettingsSection,
+  icon: <PlusIcon />,
+  keywords: "create",
+  visible: () =>
+    stores.policies.abilities(stores.auth.team?.id || "").createOAuthClient,
+  perform: ({ t, event }) => {
+    event?.preventDefault();
+    event?.stopPropagation();
+
+    stores.dialogs.openModal({
+      title: t("New Application"),
+      content: <OAuthClientNew onSubmit={stores.dialogs.closeAllModals} />,
+    });
+  },
+});
@@ -11,7 +11,7 @@ import { ActionContext } from "~/types";
 import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";

-export const createTeamsList = ({ stores }: { stores: RootStore }) =>
+export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
  stores.auth.availableTeams?.map((session) => ({
    id: `switch-${session.id}`,
    name: session.name,
@@ -44,7 +44,7 @@ export const switchTeam = createAction({
  section: TeamSection,
  visible: ({ stores }) =>
    !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
-  children: createTeamsList,
+  children: switchTeamsList,
 });

 export const createTeam = createAction({
@@ -13,6 +13,11 @@ export enum AvatarSize {
  Upload = 64,
 }

+export enum AvatarVariant {
+  Round = "round",
+  Square = "square",
+}
+
 export interface IAvatar {
  avatarUrl: string | null;
  color?: string;
@@ -23,6 +28,8 @@ export interface IAvatar {
 type Props = {
  /** The size of the avatar */
  size: AvatarSize;
+  /** The variant of the avatar */
+  variant?: AvatarVariant;
  /** The source of the avatar image, if not passing a model. */
  src?: string;
  /** The avatar model, if not passing a source. */
@@ -38,14 +45,14 @@ type Props = {
 };

 function Avatar(props: Props) {
-  const { model, style, ...rest } = props;
+  const { model, style, variant = AvatarVariant.Round, ...rest } = props;
  const src = props.src || model?.avatarUrl;
  const [error, handleError] = useBoolean(false);

  return (
-    <Relative style={style}>
+    <Relative style={style} $variant={variant} $size={props.size}>
      {src && !error ? (
-        <CircleImg onError={handleError} src={src} {...rest} />
+        <Image onError={handleError} src={src} {...rest} />
      ) : model ? (
        <Initials color={model.color} {...rest}>
          {model.initial}
@@ -61,19 +68,19 @@ Avatar.defaultProps = {
  size: AvatarSize.Medium,
 };

-const Relative = styled.div`
+const Relative = styled.div<{ $variant: AvatarVariant; $size: AvatarSize }>`
  position: relative;
  user-select: none;
  flex-shrink: 0;
-`;
-
-const CircleImg = styled.img<{ size: number }>`
-  display: block;
-  width: ${(props) => props.size}px;
-  height: ${(props) => props.size}px;
-  border-radius: 50%;
-  flex-shrink: 0;
+  border-radius: ${(props) =>
+    props.$variant === AvatarVariant.Round ? "50%" : `${props.$size / 8}px`};
  overflow: hidden;
 `;

+const Image = styled.img<{ size: number }>`
+  display: block;
+  width: ${(props) => props.size}px;
+  height: ${(props) => props.size}px;
+`;
+
 export default Avatar;
@@ -13,7 +13,6 @@ const Initials = styled(Flex)<{
 }>`
  align-items: center;
  justify-content: center;
-  border-radius: 50%;
  width: 100%;
  height: 100%;
  color: ${(props) =>
@@ -23,7 +22,6 @@ const Initials = styled(Flex)<{
  background-color: ${(props) => props.color ?? props.theme.textTertiary};
  width: ${(props) => props.size}px;
  height: ${(props) => props.size}px;
-  border-radius: 50%;
  flex-shrink: 0;

  // adjust font size down for each additional character
@@ -1,3 +1,4 @@
+import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -14,13 +15,15 @@ import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
+import { createLazyComponent } from "~/components/LazyLoad";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useStores from "~/hooks/useStores";
 import { EmptySelectValue } from "~/types";

-const IconPicker = React.lazy(() => import("~/components/IconPicker"));
+const IconPicker = createLazyComponent(() => import("~/components/IconPicker"));

 export interface FormData {
  name: string;
@@ -30,6 +33,26 @@ export interface FormData {
  permission: CollectionPermission | undefined;
 }

+const useIconColor = (collection?: Collection) => {
+  const { collections } = useStores();
+  const hasMultipleCollections = collections.orderedData.length > 1;
+  const collectionColors = uniq(
+    collections.orderedData.map((c) => c.color).filter(Boolean)
+  ) as string[];
+
+  const iconColor = React.useMemo(
+    () =>
+      collection?.color ??
+      // If all the existing collections have the same color, use that color,
+      // otherwise pick a random color from the palette
+      (hasMultipleCollections && collectionColors.length === 1
+        ? collectionColors[0]
+        : randomElement(colorPalette)),
+    [collection?.color]
+  );
+  return iconColor;
+};
+
 export const CollectionForm = observer(function CollectionForm_({
  handleSubmit,
  collection,
@@ -42,11 +65,7 @@ export const CollectionForm = observer(function CollectionForm_({

  const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);

-  const iconColor = React.useMemo(
-    () => collection?.color ?? randomElement(colorPalette),
-    [collection?.color]
-  );
-
+  const iconColor = useIconColor(collection);
  const fallbackIcon = <Icon value="collection" color={iconColor} />;

  const {
@@ -70,6 +89,11 @@ export const CollectionForm = observer(function CollectionForm_({

  const values = watch();

+  // Preload the IconPicker component on mount
+  React.useEffect(() => {
+    void IconPicker.preload();
+  }, []);
+
  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.
@@ -184,7 +208,7 @@ export const CollectionForm = observer(function CollectionForm_({
  );
 });

-const StyledIconPicker = styled(IconPicker)`
+const StyledIconPicker = styled(IconPicker.Component)`
  margin-left: 4px;
  margin-right: 4px;
 `;
@@ -138,7 +138,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              as={Link}
              id={`${item.title}-${index}`}
              to={item.to}
-              key={index}
+              key={`${item.type}-${item.title}-${index}`}
              disabled={item.disabled}
              selected={item.selected}
              icon={showIcons !== false ? item.icon : undefined}
@@ -154,7 +154,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
            <MenuItem
              id={`${item.title}-${index}`}
              href={item.href}
-              key={index}
+              key={`${item.type}-${item.title}-${index}`}
              disabled={item.disabled}
              selected={item.selected}
              level={item.level}
@@ -176,7 +176,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              disabled={item.disabled}
              selected={item.selected}
              dangerous={item.dangerous}
-              key={index}
+              key={`${item.type}-${item.title}-${index}`}
              icon={showIcons !== false ? item.icon : undefined}
              {...menu}
            >
@@ -185,18 +185,25 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
          );

          return item.tooltip ? (
-            <Tooltip content={item.tooltip} placement={"bottom"}>
+            <Tooltip
+              content={item.tooltip}
+              placement={"bottom"}
+              key={`tooltip-${item.title}-${index}`}
+            >
              <div>{menuItem}</div>
            </Tooltip>
          ) : (
-            <>{menuItem}</>
+            <React.Fragment key={`${item.type}-${item.title}-${index}`}>
+              {menuItem}
+            </React.Fragment>
          );
        }

        if (item.type === "submenu") {
-          return (
+          // Skip rendering empty submenus
+          return item.items.length > 0 ? (
            <BaseMenuItem
-              key={index}
+              key={`${item.type}-${item.title}-${index}`}
              as={SubMenu}
              id={`${item.title}-${index}`}
              templateItems={item.items}
@@ -209,15 +216,17 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
              }
              {...menu}
            />
-          );
+          ) : null;
        }

        if (item.type === "separator") {
-          return <Separator key={index} />;
+          return <Separator key={`separator-${index}`} />;
        }

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

        const _exhaustiveCheck: never = item;
@@ -64,11 +64,12 @@ function EditableTitle(
    async (ev) => {
      ev.preventDefault();
      ev.stopPropagation();
-      setIsEditing(false);
+
      const trimmedValue = value.trim();

      if (trimmedValue === originalValue || trimmedValue.length === 0) {
        setValue(originalValue);
+        setIsEditing(false);
        onCancel?.();
        return;
      }
@@ -80,6 +81,8 @@ function EditableTitle(
        setValue(originalValue);
        toast.error(error.message);
        throw error;
+      } finally {
+        setIsEditing(false);
      }
    },
    [originalValue, value, onCancel, onSubmit]
@@ -45,6 +45,7 @@ type Props = {
  onChange: (icon: string | null, color: string | null) => void;
  onOpen?: () => void;
  onClose?: () => void;
+  children?: React.ReactNode;
 };

 const IconPicker = ({
@@ -59,6 +60,7 @@ const IconPicker = ({
  onOpen,
  onClose,
  borderOnHover,
+  children,
 }: Props) => {
  const { t } = useTranslation();

@@ -174,7 +176,9 @@ const IconPicker = ({
            onClick={handlePopoverButtonClick}
            $borderOnHover={borderOnHover}
          >
-            {iconType && icon ? (
+            {children ? (
+              children
+            ) : iconType && icon ? (
              <Icon value={icon} color={color} size={size} initial={initial} />
            ) : (
              <StyledSmileyIcon color={theme.placeholder} size={size} />
@@ -0,0 +1,47 @@
+import * as React from "react";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+
+export interface LazyComponent<T extends React.ComponentType<any>> {
+  Component: React.LazyExoticComponent<T>;
+  preload: () => Promise<{ default: T }>;
+}
+
+interface LazyLoadOptions {
+  retries?: number;
+  interval?: number;
+}
+
+/**
+ * Creates a lazy-loaded component with preloading capability and automatic retries on failure.
+ *
+ * @param factory A function that returns a promise of a component (eg: () => import('./MyComponent'))
+ * @param options Optional configuration for retry behavior
+ * @returns An object containing the lazy Component and a preload function
+ *
+ * @example
+ * ```typescript
+ * const MyComponent = createLazyComponent(() => import('./MyComponent'));
+ *
+ * function App() {
+ *   return (
+ *     <Suspense fallback={<div>Loading...</div>}>
+ *       <MyComponent.Component />
+ *     </Suspense>
+ *   );
+ * }
+ *
+ * // Preload when needed:
+ * MyComponent.preload();
+ * ```
+ */
+export function createLazyComponent<T extends React.ComponentType<any>>(
+  factory: () => Promise<{ default: T }>,
+  options: LazyLoadOptions = {}
+): LazyComponent<T> {
+  const { retries, interval } = options;
+
+  return {
+    Component: lazyWithRetry(factory, retries, interval),
+    preload: factory,
+  };
+}
@@ -0,0 +1,142 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { OAuthClientValidation } from "@shared/validations";
+import OAuthClient from "~/models/oauth/OAuthClient";
+import ImageInput from "~/scenes/Settings/components/ImageInput";
+import Button from "~/components/Button";
+import Flex from "~/components/Flex";
+import Input, { LabelText } from "~/components/Input";
+import isCloudHosted from "~/utils/isCloudHosted";
+import Switch from "../Switch";
+
+export interface FormData {
+  name: string;
+  developerName: string;
+  developerUrl: string;
+  description: string;
+  avatarUrl: string;
+  redirectUris: string[];
+  published: boolean;
+}
+
+export const OAuthClientForm = observer(function OAuthClientForm_({
+  handleSubmit,
+  oauthClient,
+}: {
+  handleSubmit: (data: FormData) => void;
+  oauthClient?: OAuthClient;
+}) {
+  const { t } = useTranslation();
+
+  const {
+    register,
+    handleSubmit: formHandleSubmit,
+    formState,
+    getValues,
+    setFocus,
+    setError,
+    control,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      name: oauthClient?.name ?? "",
+      description: oauthClient?.description ?? "",
+      avatarUrl: oauthClient?.avatarUrl ?? "",
+      redirectUris: oauthClient?.redirectUris ?? [],
+      published: oauthClient?.published ?? false,
+    },
+  });
+
+  React.useEffect(() => {
+    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
+  }, [setFocus]);
+
+  return (
+    <form onSubmit={formHandleSubmit(handleSubmit)}>
+      <>
+        <label style={{ marginBottom: "1em" }}>
+          <LabelText>{t("Icon")}</LabelText>
+          <Controller
+            control={control}
+            name="avatarUrl"
+            render={({ field }) => (
+              <ImageInput
+                onSuccess={(url) => field.onChange(url)}
+                onError={(err) => setError("avatarUrl", { message: err })}
+                model={{
+                  id: oauthClient?.id,
+                  avatarUrl: field.value,
+                  initial: getValues().name[0],
+                }}
+                borderRadius={0}
+              />
+            )}
+          />
+        </label>
+        <Input
+          type="text"
+          label={t("Name")}
+          placeholder={t("My App")}
+          {...register("name", {
+            required: true,
+            maxLength: OAuthClientValidation.maxNameLength,
+          })}
+          autoComplete="off"
+          autoFocus
+          flex
+        />
+        <Input
+          type="text"
+          label={t("Tagline")}
+          placeholder={t("A short description")}
+          {...register("description", {
+            maxLength: OAuthClientValidation.maxDescriptionLength,
+          })}
+          flex
+        />
+        <Controller
+          control={control}
+          name="redirectUris"
+          render={({ field }) => (
+            <Input
+              type="textarea"
+              label={t("Callback URLs")}
+              placeholder="https://example.com/callback"
+              ref={field.ref}
+              value={field.value.join("\n")}
+              rows={Math.max(2, field.value.length + 1)}
+              onChange={(event) => {
+                field.onChange(event.target.value.split("\n"));
+              }}
+              required
+            />
+          )}
+        />
+        {isCloudHosted && (
+          <Switch
+            {...register("published")}
+            label={t("Published")}
+            note={t("Allow this app to be installed by other workspaces")}
+          />
+        )}
+      </>
+
+      <Flex justify="flex-end">
+        <Button
+          type="submit"
+          disabled={formState.isSubmitting || !formState.isValid}
+        >
+          {oauthClient
+            ? formState.isSubmitting
+              ? `${t("Saving")}…`
+              : t("Save")
+            : formState.isSubmitting
+            ? `${t("Creating")}…`
+            : t("Create")}
+        </Button>
+      </Flex>
+    </form>
+  );
+});
@@ -0,0 +1,33 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useHistory } from "react-router-dom";
+import { toast } from "sonner";
+import useStores from "~/hooks/useStores";
+import { settingsPath } from "~/utils/routeHelpers";
+import { OAuthClientForm, FormData } from "./OAuthClientForm";
+
+type Props = {
+  onSubmit: () => void;
+};
+
+export const OAuthClientNew = observer(function OAuthClientNew_({
+  onSubmit,
+}: Props) {
+  const { oauthClients } = useStores();
+  const history = useHistory();
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        const oauthClient = await oauthClients.save(data);
+        onSubmit?.();
+        history.push(settingsPath("applications", oauthClient.id));
+      } catch (error) {
+        toast.error(error.message);
+      }
+    },
+    [oauthClients, history, onSubmit]
+  );
+
+  return <OAuthClientForm handleSubmit={handleSubmit} />;
+});
@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { PopoverDisclosure, usePopoverState } from "reakit";
 import EventBoundary from "@shared/components/EventBoundary";
 import Flex from "~/components/Flex";
+import { createLazyComponent } from "~/components/LazyLoad";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
 import Popover from "~/components/Popover";
@@ -12,7 +13,7 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useWindowSize from "~/hooks/useWindowSize";
 import Tooltip from "../Tooltip";

-const EmojiPanel = React.lazy(
+const EmojiPanel = createLazyComponent(
  () => import("~/components/IconPicker/components/EmojiPanel")
 );

@@ -104,6 +105,7 @@ const ReactionPicker: React.FC<Props> = ({
              aria-label={t("Reaction picker")}
              className={className}
              onClick={handlePopoverButtonClick}
+              onMouseEnter={() => EmojiPanel.preload()}
              size={size}
            >
              <ReactionIcon size={22} />
@@ -123,7 +125,7 @@ const ReactionPicker: React.FC<Props> = ({
        {popover.visible && (
          <React.Suspense fallback={<Placeholder />}>
            <EventBoundary>
-              <EmojiPanel
+              <EmojiPanel.Component
                height={300}
                panelWidth={panelWidth}
                query={query}
@@ -93,11 +93,13 @@ export const Suggestions = observer(
    const suggestions = React.useMemo(() => {
      const filtered: Suggestion[] = (
        document
-          ? users.notInDocument(document.id, query)
+          ? users
+              .notInDocument(document.id, query)
+              .filter((u) => u.id !== user.id)
          : collection
          ? users.notInCollection(collection.id, query)
          : users.activeOrInvited
-      ).filter((u) => !u.isSuspended && u.id !== user.id);
+      ).filter((u) => !u.isSuspended);

      if (isEmail(query)) {
        filtered.push(getSuggestionForEmail(query));
@@ -12,7 +12,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import OrganizationMenu from "~/menus/OrganizationMenu";
+import TeamMenu from "~/menus/TeamMenu";
 import { homePath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";
@@ -62,7 +62,7 @@ function AppSidebar() {
        <DndProvider backend={HTML5Backend} options={html5Options}>
          <DragPlaceholder />

-          <OrganizationMenu>
+          <TeamMenu>
            {(props: SidebarButtonProps) => (
              <SidebarButton
                {...props}
@@ -91,7 +91,7 @@ function AppSidebar() {
                </Tooltip>
              </SidebarButton>
            )}
-          </OrganizationMenu>
+          </TeamMenu>
          <Overflow>
            <Section>
              <SidebarLink
@@ -23,12 +23,20 @@ import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";

 function SettingsSidebar() {
-  const { ui } = useStores();
+  const { ui, integrations } = useStores();
  const { t } = useTranslation();
  const history = useHistory();
  const location = useLocation();
  const configs = useSettingsConfig();
-  const groupedConfig = groupBy(configs, "group");
+
+  const groupedConfig = groupBy(
+    configs.filter((item) =>
+      item.group === "Integrations" && item.pluginId
+        ? integrations.findByService(item.pluginId)
+        : true
+    ),
+    "group"
+  );

  const returnToApp = React.useCallback(() => {
    history.push("/home");
@@ -63,8 +71,9 @@ function SettingsSidebar() {
                  <SidebarLink
                    key={item.path}
                    to={item.path}
+                    onClickIntent={item.preload}
                    active={
-                      item.path !== settingsPath()
+                      item.path.startsWith(settingsPath("templates"))
                        ? location.pathname.startsWith(item.path)
                        : undefined
                    }
@@ -321,6 +321,7 @@ const Container = styled(Flex)<ContainerProps>`
  z-index: ${depths.mobileSidebar};
  max-width: 80%;
  min-width: 280px;
+  padding-left: var(--sal);
  ${fadeOnDesktopBackgrounded()}

  @media print {
@@ -22,7 +22,7 @@ import SidebarContext from "./SidebarContext";
 function Collections() {
  const { documents, collections } = useStores();
  const { t } = useTranslation();
-  const orderedCollections = collections.orderedData;
+  const orderedCollections = collections.allActive;

  const params = React.useMemo(
    () => ({
@@ -38,10 +38,10 @@ function StarredLink({ star }: Props) {
  const { ui, collections, documents } = useStores();
  const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
  const { documentId, collectionId } = star;
-  const collection = collections.get(collectionId);
+  const collection = collectionId ? collections.get(collectionId) : undefined;
  const locationSidebarContext = useLocationSidebarContext();
  const sidebarContext = starredSidebarContext(
-    star.documentId ?? star.collectionId
+    star.documentId ?? star.collectionId ?? ""
  );
  const [expanded, setExpanded] = useState(
    (star.documentId
@@ -78,9 +78,9 @@ function StarredLink({ star }: Props) {
  }, [documentId, documents]);

  const handleDisclosureClick = React.useCallback(
-    (ev: React.MouseEvent<HTMLButtonElement>) => {
-      ev.preventDefault();
-      ev.stopPropagation();
+    (ev?: React.MouseEvent<HTMLButtonElement>) => {
+      ev?.preventDefault();
+      ev?.stopPropagation();
      setExpanded((prevExpanded) => !prevExpanded);
    },
    []
@@ -1,8 +1,11 @@
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { Avatar } from "./Avatar";
+import { AvatarVariant } from "./Avatar/Avatar";

-const TeamLogo = styled(Avatar)`
+const TeamLogo = styled(Avatar).attrs({
+  variant: AvatarVariant.Square,
+})`
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px ${s("divider")};
  border: 0;
@@ -1,3 +1,4 @@
+import * as Sentry from "@sentry/react";
 import invariant from "invariant";
 import find from "lodash/find";
 import { action, observable } from "mobx";
@@ -134,6 +135,15 @@ class WebsocketProvider extends React.Component<Props> {
      throw err;
    });

+    // add a listener for all events that logs a sentry breadcrumb
+    this.socket.onAny((event: string, data: Record<string, unknown>) => {
+      Sentry.addBreadcrumb({
+        category: "websocket",
+        message: `Received event: ${event}`,
+        data,
+      });
+    });
+
    this.socket.on(
      "entities",
      action(async (event: WebsocketEntitiesEvent) => {
@@ -251,8 +261,10 @@ class WebsocketProvider extends React.Component<Props> {
          }
          policies.remove(document.id);

-          const collection = collections.get(event.collectionId);
-          collection?.removeDocument(document.id);
+          if (event.collectionId) {
+            const collection = collections.get(event.collectionId);
+            collection?.removeDocument(document.id);
+          }
        }
      )
    );
@@ -41,6 +41,7 @@ function useKeyboardShortcuts({
  useKeyDown(
    (ev) =>
      isModKey(ev) &&
+      !popover.visible &&
      ev.code === "KeyF" &&
      // Keyboard handler is through the AppMenu on Desktop v1.2.0+
      !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
@@ -7,6 +7,7 @@ import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
 import { depths, s } from "@shared/styles";
+import { getSafeAreaInsets } from "@shared/utils/browser";
 import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
 import useEventListener from "~/hooks/useEventListener";
@@ -241,12 +242,16 @@ const FloatingToolbar = React.forwardRef(function FloatingToolbar_(

    if (props.active) {
      const rect = document.body.getBoundingClientRect();
+      const safeAreaInsets = getSafeAreaInsets();
+
      return (
        <ReactPortal>
          <MobileWrapper
            ref={menuRef}
            style={{
-              bottom: `calc(100% - ${height - rect.y}px)`,
+              bottom: `calc(100% - ${
+                height - rect.y - safeAreaInsets.bottom
+              }px)`,
            }}
          >
            {props.children}
@@ -6,6 +6,7 @@ import { v4 } from "uuid";
 import { EmbedDescriptor } from "@shared/editor/embeds";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
+import { isUrl } from "@shared/utils/urls";
 import Integration from "~/models/Integration";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
@@ -29,9 +30,9 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
  const user = useCurrentUser({ rejectOnEmpty: false });

  let mentionType: MentionType | undefined;
-  const url = pastedText ? new URL(pastedText) : undefined;

-  if (url) {
+  if (pastedText && isUrl(pastedText)) {
+    const url = new URL(pastedText);
    const integration = integrations.find((intg: Integration) =>
      isURLMentionable({ url, integration: intg })
    );
@@ -1,10 +1,12 @@
 import { action } from "mobx";
 import { PlusIcon } from "outline-icons";
-import { Plugin } from "prosemirror-state";
+import { Node, ResolvedPos } from "prosemirror-model";
+import { EditorState, Plugin } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import * as React from "react";
-import ReactDOM from "react-dom";
+import { createRoot } from "react-dom/client";
 import { WidgetProps } from "@shared/editor/lib/Extension";
+import { PlaceholderPlugin } from "@shared/editor/plugins/PlaceholderPlugin";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import Suggestion from "~/editor/extensions/Suggestion";
 import BlockMenu from "../components/BlockMenu";
@@ -27,7 +29,10 @@ export default class BlockMenuExtension extends Suggestion {
    const button = document.createElement("button");
    button.className = "block-menu-trigger";
    button.type = "button";
-    ReactDOM.render(<PlusIcon />, button);
+    button.addEventListener("click", this.handleClick);
+    const root = createRoot(button);
+    root.render(<PlusIcon />);
+    return button;

    return [
      ...super.plugins,
@@ -49,7 +54,6 @@ export default class BlockMenuExtension extends Suggestion {

            const decorations: Decoration[] = [];
            const isEmptyNode = parent && parent.node.content.size === 0;
-            const isSlash = parent && parent.node.textContent === "/";

            if (isEmptyNode) {
              decorations.push(
@@ -69,33 +73,39 @@ export default class BlockMenuExtension extends Suggestion {
                  }
                )
              );
-
-              const isEmptyDoc = state.doc.textContent === "";
-              if (!isEmptyDoc) {
-                decorations.push(
-                  Decoration.node(
-                    parent.pos,
-                    parent.pos + parent.node.nodeSize,
-                    {
-                      class: "placeholder",
-                      "data-empty-text": this.options.dictionary.newLineEmpty,
-                    }
-                  )
-                );
-              }
-            } else if (isSlash) {
-              decorations.push(
-                Decoration.node(parent.pos, parent.pos + parent.node.nodeSize, {
-                  class: "placeholder",
-                  "data-empty-text": `  ${this.options.dictionary.newLineWithSlash}`,
-                })
-              );
            }

            return DecorationSet.create(state.doc, decorations);
          },
        },
      }),
+      new PlaceholderPlugin([
+        {
+          condition: (
+            node: Node,
+            $start: ResolvedPos,
+            _parent: Node | null,
+            state: EditorState
+          ) =>
+            $start.depth === 1 &&
+            node.textContent === "" &&
+            !!state.doc.textContent &&
+            state.selection.$from.pos === $start.pos + node.content.size,
+          text: this.options.dictionary.newLineEmpty,
+        },
+        {
+          condition: (
+            node: Node,
+            $start: ResolvedPos,
+            _parent: Node,
+            state: EditorState
+          ) =>
+            $start.depth === 1 &&
+            node.textContent === "/" &&
+            state.selection.$from.pos === $start.pos + node.content.size,
+          text: `  ${this.options.dictionary.newLineWithSlash}`,
+        },
+      ]),
    ];
  }

@@ -2,7 +2,8 @@ import Extension from "@shared/editor/lib/Extension";
 import { InputRule } from "@shared/editor/lib/InputRule";

 const rightArrow = new InputRule(/->$/, "→");
-const emdash = new InputRule(/--$/, "—");
+// Note that the suppression of pipe here prevents conflict with table creation rule.
+const emdash = new InputRule(/(?:^|[^\|])(--)$/, "—");
 const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
 const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");
@@ -67,7 +67,7 @@ export default function formattingMenuItems(
      shortcut: `${metaDisplay}+B`,
      icon: <BoldIcon />,
      active: isMarkActive(schema.marks.strong),
-      visible: !isCode && (!isMobile || !isEmpty),
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
    },
    {
      name: "em",
@@ -75,7 +75,7 @@ export default function formattingMenuItems(
      shortcut: `${metaDisplay}+I`,
      icon: <ItalicIcon />,
      active: isMarkActive(schema.marks.em),
-      visible: !isCode && (!isMobile || !isEmpty),
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
    },
    {
      name: "strikethrough",
@@ -83,7 +83,7 @@ export default function formattingMenuItems(
      shortcut: `${metaDisplay}+D`,
      icon: <StrikethroughIcon />,
      active: isMarkActive(schema.marks.strikethrough),
-      visible: !isCode && (!isMobile || !isEmpty),
+      visible: !isCodeBlock && (!isMobile || !isEmpty),
    },
    {
      tooltip: dictionary.mark,
@@ -18,8 +18,7 @@ export default function useEmbeds(loadIfMissing = false) {
  React.useEffect(() => {
    async function fetchEmbedIntegrations() {
      try {
-        await integrations.fetchPage({
-          limit: 100,
+        await integrations.fetchAll({
          type: IntegrationType.Embed,
        });
      } catch (err) {
@@ -0,0 +1,14 @@
+import { getCookie } from "tiny-cookie";
+
+export type Sessions = Record<
+  string,
+  {
+    name: string;
+    logoUrl: string;
+    url: string;
+  }
+>;
+
+export function useLoggedInSessions(): Sessions {
+  return JSON.parse(getCookie("sessions") || "{}");
+}
@@ -59,7 +59,7 @@ export default function useRequest<T = unknown>(
    if (makeRequestOnMount) {
      void request();
    }
-  }, [request, makeRequestOnMount]);
+  }, []);

  return { data, loading, loaded, error, request };
 }
@@ -13,22 +13,25 @@ import {
  ImportIcon,
  ShapesIcon,
  Icon,
+  PlusIcon,
+  InternetIcon,
 } from "outline-icons";
 import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
 import { integrationSettingsPath } from "@shared/utils/routeHelpers";
-import ZapierIcon from "~/components/Icons/ZapierIcon";
+import { Integrations } from "~/scenes/Settings/Integrations";
+import { createLazyComponent as lazy } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
-import isCloudHosted from "~/utils/isCloudHosted";
-import lazy from "~/utils/lazyWithRetry";
 import { settingsPath } from "~/utils/routeHelpers";
 import { useComputed } from "./useComputed";
 import useCurrentTeam from "./useCurrentTeam";
 import useCurrentUser from "./useCurrentUser";
 import usePolicy from "./usePolicy";
+import useStores from "./useStores";

 const ApiKeys = lazy(() => import("~/scenes/Settings/ApiKeys"));
-const PersonalApiKeys = lazy(() => import("~/scenes/Settings/PersonalApiKeys"));
+const Applications = lazy(() => import("~/scenes/Settings/Applications"));
+const APIAndApps = lazy(() => import("~/scenes/Settings/APIAndApps"));
 const Details = lazy(() => import("~/scenes/Settings/Details"));
 const Export = lazy(() => import("~/scenes/Settings/Export"));
 const Features = lazy(() => import("~/scenes/Settings/Features"));
@@ -41,30 +44,38 @@ const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
-const Zapier = lazy(() => import("~/scenes/Settings/Zapier"));

 export type ConfigItem = {
  name: string;
  path: string;
  icon: React.FC<ComponentProps<typeof Icon>>;
  component: React.ComponentType;
+  description?: string;
+  preload?: () => void;
  enabled: boolean;
  group: string;
+  pluginId?: string;
 };

 const useSettingsConfig = () => {
+  const { integrations } = useStores();
  const user = useCurrentUser();
  const team = useCurrentTeam();
  const can = usePolicy(team);
  const { t } = useTranslation();

+  React.useEffect(() => {
+    void integrations.fetchAll();
+  }, [integrations]);
+
  const config = useComputed(() => {
    const items: ConfigItem[] = [
      // Account
      {
        name: t("Profile"),
        path: settingsPath(),
-        component: Profile,
+        component: Profile.Component,
+        preload: Profile.preload,
        enabled: true,
        group: t("Account"),
        icon: ProfileIcon,
@@ -72,7 +83,8 @@ const useSettingsConfig = () => {
      {
        name: t("Preferences"),
        path: settingsPath("preferences"),
-        component: Preferences,
+        component: Preferences.Component,
+        preload: Preferences.preload,
        enabled: true,
        group: t("Account"),
        icon: SettingsIcon,
@@ -80,24 +92,27 @@ const useSettingsConfig = () => {
      {
        name: t("Notifications"),
        path: settingsPath("notifications"),
-        component: Notifications,
+        component: Notifications.Component,
+        preload: Notifications.preload,
        enabled: true,
        group: t("Account"),
        icon: EmailIcon,
      },
      {
-        name: t("API Keys"),
-        path: settingsPath("personal-api-keys"),
-        component: PersonalApiKeys,
-        enabled: can.createApiKey && !can.listApiKeys,
+        name: t("API & Apps"),
+        path: settingsPath("api-and-apps"),
+        component: APIAndApps.Component,
+        preload: APIAndApps.preload,
+        enabled: true,
        group: t("Account"),
-        icon: CodeIcon,
+        icon: PadlockIcon,
      },
      // Workspace
      {
        name: t("Details"),
        path: settingsPath("details"),
-        component: Details,
+        component: Details.Component,
+        preload: Details.preload,
        enabled: can.update,
        group: t("Workspace"),
        icon: TeamIcon,
@@ -105,7 +120,8 @@ const useSettingsConfig = () => {
      {
        name: t("Security"),
        path: settingsPath("security"),
-        component: Security,
+        component: Security.Component,
+        preload: Security.preload,
        enabled: can.update,
        group: t("Workspace"),
        icon: PadlockIcon,
@@ -113,7 +129,8 @@ const useSettingsConfig = () => {
      {
        name: t("Features"),
        path: settingsPath("features"),
-        component: Features,
+        component: Features.Component,
+        preload: Features.preload,
        enabled: can.update,
        group: t("Workspace"),
        icon: BeakerIcon,
@@ -121,7 +138,8 @@ const useSettingsConfig = () => {
      {
        name: t("Members"),
        path: settingsPath("members"),
-        component: Members,
+        component: Members.Component,
+        preload: Members.preload,
        enabled: can.listUsers,
        group: t("Workspace"),
        icon: UserIcon,
@@ -129,7 +147,8 @@ const useSettingsConfig = () => {
      {
        name: t("Groups"),
        path: settingsPath("groups"),
-        component: Groups,
+        component: Groups.Component,
+        preload: Groups.preload,
        enabled: can.listGroups,
        group: t("Workspace"),
        icon: GroupIcon,
@@ -137,7 +156,8 @@ const useSettingsConfig = () => {
      {
        name: t("Templates"),
        path: settingsPath("templates"),
-        component: Templates,
+        component: Templates.Component,
+        preload: Templates.preload,
        enabled: can.readTemplate,
        group: t("Workspace"),
        icon: ShapesIcon,
@@ -145,15 +165,26 @@ const useSettingsConfig = () => {
      {
        name: t("API Keys"),
        path: settingsPath("api-keys"),
-        component: ApiKeys,
+        component: ApiKeys.Component,
+        preload: ApiKeys.preload,
        enabled: can.listApiKeys,
        group: t("Workspace"),
        icon: CodeIcon,
      },
+      {
+        name: t("Applications"),
+        path: settingsPath("applications"),
+        component: Applications.Component,
+        preload: Applications.preload,
+        enabled: can.listOAuthClients,
+        group: t("Workspace"),
+        icon: InternetIcon,
+      },
      {
        name: t("Shared Links"),
        path: settingsPath("shares"),
-        component: Shares,
+        component: Shares.Component,
+        preload: Shares.preload,
        enabled: can.listShares,
        group: t("Workspace"),
        icon: GlobeIcon,
@@ -161,7 +192,8 @@ const useSettingsConfig = () => {
      {
        name: t("Import"),
        path: settingsPath("import"),
-        component: Import,
+        component: Import.Component,
+        preload: Import.preload,
        enabled: can.createImport,
        group: t("Workspace"),
        icon: ImportIcon,
@@ -169,19 +201,20 @@ const useSettingsConfig = () => {
      {
        name: t("Export"),
        path: settingsPath("export"),
-        component: Export,
+        component: Export.Component,
+        preload: Export.preload,
        enabled: can.createExport,
        group: t("Workspace"),
        icon: ExportIcon,
      },
      // Integrations
      {
-        name: "Zapier",
-        path: integrationSettingsPath("zapier"),
-        component: Zapier,
-        enabled: can.update && isCloudHosted,
+        name: `${t("Install")}…`,
+        path: settingsPath("integrations"),
+        component: Integrations,
+        enabled: true,
        group: t("Integrations"),
-        icon: ZapierIcon,
+        icon: PlusIcon,
      },
    ];

@@ -198,7 +231,10 @@ const useSettingsConfig = () => {
            ? integrationSettingsPath(plugin.id)
            : settingsPath(plugin.id),
        group: t(group),
-        component: plugin.value.component,
+        pluginId: plugin.id,
+        description: plugin.value.description,
+        component: plugin.value.component.Component,
+        preload: plugin.value.component.preload,
        enabled: plugin.value.enabled
          ? plugin.value.enabled(team, user)
          : can.update,
@@ -0,0 +1,88 @@
+import { DocumentIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Icon from "@shared/components/Icon";
+import { TextHelper } from "@shared/utils/TextHelper";
+import Document from "~/models/Document";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import useStores from "~/hooks/useStores";
+import { MenuItem } from "~/types";
+
+type Props = {
+  /** The document to which the templates will be applied */
+  document: Document;
+  /** Callback to handle when a template is selected */
+  onSelectTemplate?: (template: Document) => void;
+};
+
+/**
+ * This hook provides a memoized list of menu items for both collection-specific
+ * templates and workspace-wide templates. It filters templates based on whether
+ * they are published and organizes them into appropriate sections.
+ *
+ * Collection-specific templates are displayed first, followed by workspace templates
+ * with a separator in between (if both types exist).
+ *
+ * @returns An array of MenuItem objects representing templates that can be applied
+ * to the current document. Returns an empty array if no callback is provided.
+ */
+export function useTemplateMenuItems({ document, onSelectTemplate }: Props) {
+  const user = useCurrentUser();
+  const { documents } = useStores();
+  const { t } = useTranslation();
+
+  const templateToMenuItem = React.useCallback(
+    (template: Document): MenuItem => ({
+      type: "button",
+      title: TextHelper.replaceTemplateVariables(
+        template.titleWithDefault,
+        user
+      ),
+      icon: template.icon ? (
+        <Icon value={template.icon} color={template.color ?? undefined} />
+      ) : (
+        <DocumentIcon />
+      ),
+      onClick: () => onSelectTemplate?.(template),
+    }),
+    [user, onSelectTemplate]
+  );
+
+  const templates = documents.templates.filter(
+    (template) => template.publishedAt
+  );
+
+  const collectionItems = templates
+    .filter(
+      (template) =>
+        !template.isWorkspaceTemplate &&
+        template.collectionId === document.collectionId
+    )
+    .map(templateToMenuItem);
+
+  const workspaceTemplates = templates
+    .filter((tmpl) => tmpl.isWorkspaceTemplate)
+    .map(templateToMenuItem);
+
+  const workspaceItems: MenuItem[] = React.useMemo(
+    () =>
+      workspaceTemplates.length
+        ? [{ type: "heading", title: t("Workspace") }, ...workspaceTemplates]
+        : [],
+    [t, workspaceTemplates]
+  );
+
+  if (!onSelectTemplate) {
+    return [];
+  }
+
+  return collectionItems
+    ? workspaceItems.length
+      ? [
+          ...collectionItems,
+          { type: "separator" } as MenuItem,
+          ...workspaceItems,
+        ]
+      : collectionItems
+    : workspaceItems;
+}
@@ -4,7 +4,7 @@ import { LazyMotion } from "framer-motion";
 import { KBarProvider } from "kbar";
 import { Provider } from "mobx-react";
 import * as React from "react";
-import { render } from "react-dom";
+import { createRoot } from "react-dom/client";
 import { HelmetProvider } from "react-helmet-async";
 import { Router } from "react-router-dom";
 import stores from "~/stores";
@@ -79,7 +79,8 @@ if (element) {
    </React.StrictMode>
  );

-  render(<App />, element);
+  const root = createRoot(element);
+  root.render(<App />);
 }

 window.addEventListener("load", async () => {
@@ -2,7 +2,13 @@ import capitalize from "lodash/capitalize";
 import isEmpty from "lodash/isEmpty";
 import noop from "lodash/noop";
 import { observer } from "mobx-react";
-import { EditIcon, InputIcon, RestoreIcon, SearchIcon } from "outline-icons";
+import {
+  EditIcon,
+  InputIcon,
+  RestoreIcon,
+  SearchIcon,
+  ShapesIcon,
+} from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -57,6 +63,7 @@ import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
+import { useTemplateMenuItems } from "~/hooks/useTemplateMenuItems";
 import { MenuItem, MenuItemButton } from "~/types";
 import { documentEditPath } from "~/utils/routeHelpers";
 import { MenuContext, useMenuContext } from "./MenuContext";
@@ -76,6 +83,7 @@ type Props = {
  label?: (props: MenuButtonHTMLProps) => React.ReactNode;
  /** Invoked when the "Find and replace" menu item is clicked */
  onFindAndReplace?: () => void;
+  onSelectTemplate?: (template: Document) => void;
  /** Invoked when the "Rename" menu item is clicked */
  onRename?: () => void;
  /** Invoked when menu is opened */
@@ -147,6 +155,7 @@ type MenuContentProps = {
  onOpen?: () => void;
  onClose?: () => void;
  onFindAndReplace?: () => void;
+  onSelectTemplate?: (template: Document) => void;
  onRename?: () => void;
  showDisplayOptions?: boolean;
  showToggleEmbeds?: boolean;
@@ -156,6 +165,7 @@ const MenuContent: React.FC<MenuContentProps> = observer(function MenuContent_({
  onOpen,
  onClose,
  onFindAndReplace,
+  onSelectTemplate,
  onRename,
  showDisplayOptions,
  showToggleEmbeds,
@@ -218,6 +228,11 @@ const MenuContent: React.FC<MenuContentProps> = observer(function MenuContent_({
    [collections.orderedData, handleRestore, policies]
  );

+  const templateMenuItems = useTemplateMenuItems({
+    document,
+    onSelectTemplate,
+  });
+
  return !isEmpty(can) ? (
    <ContextMenu
      {...menuState}
@@ -310,6 +325,12 @@ const MenuContent: React.FC<MenuContentProps> = observer(function MenuContent_({
          actionToMenuItem(archiveDocument, context),
          actionToMenuItem(moveDocument, context),
          actionToMenuItem(moveTemplate, context),
+          {
+            type: "submenu",
+            title: t("Apply template"),
+            icon: <ShapesIcon />,
+            items: templateMenuItems,
+          },
          actionToMenuItem(pinDocument, context),
          actionToMenuItem(createDocumentFromTemplate, context),
          {
@@ -383,6 +404,7 @@ function DocumentMenu({
  modal = true,
  showToggleEmbeds,
  showDisplayOptions,
+  onSelectTemplate,
  label,
  onRename,
  onOpen,
@@ -466,6 +488,7 @@ function DocumentMenu({
            onOpen={onOpen}
            onClose={onClose}
            onRename={onRename}
+            onSelectTemplate={onSelectTemplate}
            showDisplayOptions={showDisplayOptions}
            showToggleEmbeds={showToggleEmbeds}
          />
@@ -0,0 +1,57 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useMenuState } from "reakit/Menu";
+import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import ContextMenu from "~/components/ContextMenu";
+import MenuItem from "~/components/ContextMenu/MenuItem";
+import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
+import useStores from "~/hooks/useStores";
+
+type Props = {
+  /** The OAuthAuthentication to associate with the menu */
+  oauthAuthentication: OAuthAuthentication;
+};
+
+function OAuthAuthenticationMenu({ oauthAuthentication }: Props) {
+  const menu = useMenuState({
+    modal: true,
+  });
+  const { dialogs } = useStores();
+  const { t } = useTranslation();
+
+  const handleRevoke = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Revoke {{ appName }}", {
+        appName: oauthAuthentication.oauthClient.name,
+      }),
+      content: (
+        <ConfirmationDialog
+          onSubmit={async () => {
+            await oauthAuthentication.deleteAll();
+            dialogs.closeAllModals();
+          }}
+          submitText={t("Revoke")}
+          savingText={`${t("Revoking")}…`}
+          danger
+        >
+          {t("Are you sure you want to revoke access?")}
+        </ConfirmationDialog>
+      ),
+    });
+  }, [t, dialogs, oauthAuthentication]);
+
+  return (
+    <>
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
+      <ContextMenu {...menu}>
+        <MenuItem {...menu} onClick={handleRevoke} dangerous>
+          {t("Revoke")}
+        </MenuItem>
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(OAuthAuthenticationMenu);
@@ -0,0 +1,68 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useMenuState } from "reakit/Menu";
+import OAuthClient from "~/models/oauth/OAuthClient";
+import OAuthClientDeleteDialog from "~/scenes/Settings/components/OAuthClientDeleteDialog";
+import ContextMenu from "~/components/ContextMenu";
+import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
+import Template from "~/components/ContextMenu/Template";
+import useStores from "~/hooks/useStores";
+import { settingsPath } from "~/utils/routeHelpers";
+
+type Props = {
+  /** The oauthClient to associate with the menu */
+  oauthClient: OAuthClient;
+  /** Whether to show the edit button */
+  showEdit?: boolean;
+};
+
+function OAuthClientMenu({ oauthClient, showEdit }: Props) {
+  const menu = useMenuState({
+    modal: true,
+  });
+  const { dialogs } = useStores();
+  const { t } = useTranslation();
+
+  const handleDelete = React.useCallback(() => {
+    dialogs.openModal({
+      title: t("Delete app"),
+      content: (
+        <OAuthClientDeleteDialog
+          onSubmit={dialogs.closeAllModals}
+          oauthClient={oauthClient}
+        />
+      ),
+    });
+  }, [t, dialogs, oauthClient]);
+
+  return (
+    <>
+      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
+      <ContextMenu {...menu}>
+        <Template
+          {...menu}
+          items={[
+            {
+              type: "route",
+              title: `${t("Edit")}…`,
+              visible: showEdit,
+              to: settingsPath("applications", oauthClient.id),
+            },
+            {
+              type: "separator",
+            },
+            {
+              type: "button",
+              dangerous: true,
+              title: `${t("Delete")}…`,
+              onClick: handleDelete,
+            },
+          ]}
+        />
+      </ContextMenu>
+    </>
+  );
+}
+
+export default observer(OAuthClientMenu);
@@ -10,7 +10,7 @@ import {
 } from "~/actions/definitions/navigation";
 import {
  createTeam,
-  createTeamsList,
+  switchTeamsList,
  desktopLoginTeam,
 } from "~/actions/definitions/teams";
 import useActionContext from "~/hooks/useActionContext";
@@ -22,7 +22,7 @@ type Props = {
  children?: React.ReactNode;
 };

-const OrganizationMenu: React.FC = ({ children }: Props) => {
+const TeamMenu: React.FC = ({ children }: Props) => {
  const menu = useMenuState({
    unstable_offset: [4, -4],
    placement: "bottom-start",
@@ -44,7 +44,7 @@ const OrganizationMenu: React.FC = ({ children }: Props) => {
  // menu is not cached at all.
  const actions = React.useMemo(
    () => [
-      ...createTeamsList(context),
+      ...switchTeamsList(context),
      createTeam,
      desktopLoginTeam,
      separator(),
@@ -64,4 +64,4 @@ const OrganizationMenu: React.FC = ({ children }: Props) => {
  );
 };

-export default observer(OrganizationMenu);
+export default observer(TeamMenu);
@@ -1,17 +1,13 @@
 import { observer } from "mobx-react";
-import { DocumentIcon, ShapesIcon } from "outline-icons";
+import { ShapesIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
-import Icon from "@shared/components/Icon";
-import { TextHelper } from "@shared/utils/TextHelper";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import { MenuItem } from "~/types";
+import { useTemplateMenuItems } from "~/hooks/useTemplateMenuItems";

 type Props = {
  /** The document to which the templates will be applied */
@@ -23,57 +19,12 @@ type Props = {
 };

 function TemplatesMenu({ isCompact, onSelectTemplate, document }: Props) {
+  const { t } = useTranslation();
  const menu = useMenuState({
    modal: true,
  });
-  const user = useCurrentUser();
-  const { documents } = useStores();
-  const { t } = useTranslation();

-  const templateToMenuItem = React.useCallback(
-    (tmpl: Document): MenuItem => ({
-      type: "button",
-      title: TextHelper.replaceTemplateVariables(tmpl.titleWithDefault, user),
-      icon: tmpl.icon ? (
-        <Icon value={tmpl.icon} color={tmpl.color ?? undefined} />
-      ) : (
-        <DocumentIcon />
-      ),
-      onClick: () => onSelectTemplate(tmpl),
-    }),
-    [user, onSelectTemplate]
-  );
-
-  const templates = documents.templates.filter((tmpl) => tmpl.publishedAt);
-
-  const collectionItems = templates
-    .filter(
-      (tmpl) =>
-        !tmpl.isWorkspaceTemplate && tmpl.collectionId === document.collectionId
-    )
-    .map(templateToMenuItem);
-
-  const workspaceTemplates = templates
-    .filter((tmpl) => tmpl.isWorkspaceTemplate)
-    .map(templateToMenuItem);
-
-  const workspaceItems: MenuItem[] = React.useMemo(
-    () =>
-      workspaceTemplates.length
-        ? [{ type: "heading", title: t("Workspace") }, ...workspaceTemplates]
-        : [],
-    [t, workspaceTemplates]
-  );
-
-  const items = collectionItems
-    ? workspaceItems.length
-      ? [
-          ...collectionItems,
-          { type: "separator" } as MenuItem,
-          ...workspaceItems,
-        ]
-      : collectionItems
-    : workspaceItems;
+  const items = useTemplateMenuItems({ onSelectTemplate, document });

  if (!items.length) {
    return null;
@@ -331,6 +331,16 @@ export default class Document extends ArchivableModel implements Searchable {
    );
  }

+  /**
+   * Returns the documents that link to this document.
+   *
+   * @returns documents that link to this document
+   */
+  @computed
+  get backlinks(): Document[] {
+    return this.store.getBacklinkedDocuments(this.id);
+  }
+
  /**
   * Returns users that have been individually given access to the document.
   *
@@ -22,7 +22,7 @@ class Star extends Model {
  document?: Document;

  /** The collection ID that is starred. */
-  collectionId: string;
+  collectionId?: string;

  /** The collection that is starred. */
  @Relation(() => Collection, { onDelete: "cascade" })
@@ -0,0 +1,39 @@
+import { action, observable } from "mobx";
+import { client } from "~/utils/ApiClient";
+import User from "../User";
+import ParanoidModel from "../base/ParanoidModel";
+import Field from "../decorators/Field";
+import Relation from "../decorators/Relation";
+import OAuthClient from "./OAuthClient";
+
+class OAuthAuthentication extends ParanoidModel {
+  static modelName = "OAuthAuthentication";
+
+  /** A list of scopes that this authentication has access to */
+  @Field
+  @observable
+  scope: string[];
+
+  @Relation(() => User)
+  user: User;
+
+  userId: string;
+
+  oauthClient: Pick<OAuthClient, "id" | "name" | "clientId" | "avatarUrl">;
+
+  oauthClientId: string;
+
+  lastActiveAt: string;
+
+  @action
+  public async deleteAll() {
+    await client.post(`/${this.store.apiEndpoint}.delete`, {
+      oauthClientId: this.oauthClientId,
+      scope: this.scope,
+    });
+
+    return this.store.remove(this.id);
+  }
+}
+
+export default OAuthAuthentication;
@@ -0,0 +1,92 @@
+import invariant from "invariant";
+import { observable, runInAction } from "mobx";
+import queryString from "query-string";
+import env from "~/env";
+import { client } from "~/utils/ApiClient";
+import User from "../User";
+import ParanoidModel from "../base/ParanoidModel";
+import Field from "../decorators/Field";
+import Relation from "../decorators/Relation";
+
+class OAuthClient extends ParanoidModel {
+  static modelName = "OAuthClient";
+
+  /** The human-readable name of this app */
+  @Field
+  @observable
+  name: string;
+
+  /** A short description of this app */
+  @Field
+  @observable
+  description: string | null;
+
+  /** The name of the developer of this app */
+  @Field
+  @observable
+  developerName: string | null;
+
+  /** The URL of the developer of this app */
+  @Field
+  @observable
+  developerUrl: string | null;
+
+  /** The URL of the avatar of the developer of this app */
+  @Field
+  @observable
+  avatarUrl: string | null;
+
+  /** The public identifier of this app */
+  @Field
+  clientId: string;
+
+  /** The secret key used to authenticate this app */
+  @Field
+  @observable
+  clientSecret: string;
+
+  /** Whether this app is published (available to other workspaces) */
+  @Field
+  @observable
+  published: boolean;
+
+  /** A list of valid redirect URIs for this app */
+  @Field
+  @observable
+  redirectUris: string[];
+
+  @Relation(() => User)
+  createdBy: User;
+
+  createdById: string;
+
+  // instance methods
+
+  public async rotateClientSecret() {
+    const res = await client.post("/oauthClients.rotate_secret", {
+      id: this.id,
+    });
+    invariant(res.data, "Failed to rotate client secret");
+
+    runInAction("OAuthClient#rotateSecret", () => {
+      this.clientSecret = res.data.clientSecret;
+    });
+  }
+
+  public get initial() {
+    return this.name[0];
+  }
+
+  public get authorizationUrl(): string {
+    const params = {
+      client_id: this.clientId,
+      redirect_uri: this.redirectUris[0],
+      response_type: "code",
+      scope: "read",
+    };
+
+    return `${env.URL}/oauth/authorize?${queryString.stringify(params)}`;
+  }
+}
+
+export default OAuthClient;
@@ -42,55 +42,77 @@ const RedirectDocument = ({
  />
 );

+/**
+ * The authenticated routes are all the routes of the application that require
+ * the user to be logged in.
+ */
 function AuthenticatedRoutes() {
  const team = useCurrentTeam();
  const can = usePolicy(team);

  return (
-    <WebsocketProvider>
-      <AuthenticatedLayout>
-        <React.Suspense
-          fallback={
-            <CenteredContent>
-              <PlaceholderDocument />
-            </CenteredContent>
-          }
-        >
-          <Switch>
-            {can.createDocument && (
-              <Route exact path={draftsPath()} component={Drafts} />
-            )}
-            {can.createDocument && (
-              <Route exact path={archivePath()} component={Archive} />
-            )}
-            {can.createDocument && (
-              <Route exact path={trashPath()} component={Trash} />
-            )}
-            <Route path={`${homePath()}/:tab?`} component={Home} />
-            <Redirect from="/dashboard" to={homePath()} />
-            <Redirect exact from="/starred" to={homePath()} />
-            <Redirect exact from="/templates" to={settingsPath("templates")} />
-            <Redirect exact from="/collections/*" to="/collection/*" />
-            <Route exact path="/collection/:id/new" component={DocumentNew} />
-            <Route exact path="/collection/:id/:tab?" component={Collection} />
-            <Route exact path="/doc/new" component={DocumentNew} />
-            <Route exact path={`/d/${slug}`} component={RedirectDocument} />
-            <Route
-              exact
-              path={`/doc/${slug}/history/:revisionId?`}
-              component={Document}
-            />
-            <Route exact path={`/doc/${slug}/insights`} component={Document} />
-            <Route exact path={`/doc/${slug}/edit`} component={Document} />
-            <Route path={`/doc/${slug}`} component={Document} />
-            <Route exact path={`${searchPath()}/:query?`} component={Search} />
-            <Route path="/404" component={Error404} />
-            <SettingsRoutes />
-            <Route component={Error404} />
-          </Switch>
-        </React.Suspense>
-      </AuthenticatedLayout>
-    </WebsocketProvider>
+    <Switch>
+      <WebsocketProvider>
+        <AuthenticatedLayout>
+          <React.Suspense
+            fallback={
+              <CenteredContent>
+                <PlaceholderDocument />
+              </CenteredContent>
+            }
+          >
+            <Switch>
+              {can.createDocument && (
+                <Route exact path={draftsPath()} component={Drafts} />
+              )}
+              {can.createDocument && (
+                <Route exact path={archivePath()} component={Archive} />
+              )}
+              {can.createDocument && (
+                <Route exact path={trashPath()} component={Trash} />
+              )}
+              <Route path={`${homePath()}/:tab?`} component={Home} />
+              <Redirect from="/dashboard" to={homePath()} />
+              <Redirect exact from="/starred" to={homePath()} />
+              <Redirect
+                exact
+                from="/templates"
+                to={settingsPath("templates")}
+              />
+              <Redirect exact from="/collections/*" to="/collection/*" />
+              <Route exact path="/collection/:id/new" component={DocumentNew} />
+              <Route
+                exact
+                path="/collection/:id/:tab?"
+                component={Collection}
+              />
+              <Route exact path="/doc/new" component={DocumentNew} />
+              <Route exact path={`/d/${slug}`} component={RedirectDocument} />
+              <Route
+                exact
+                path={`/doc/${slug}/history/:revisionId?`}
+                component={Document}
+              />
+              <Route
+                exact
+                path={`/doc/${slug}/insights`}
+                component={Document}
+              />
+              <Route exact path={`/doc/${slug}/edit`} component={Document} />
+              <Route path={`/doc/${slug}`} component={Document} />
+              <Route
+                exact
+                path={`${searchPath()}/:query?`}
+                component={Search}
+              />
+              <Route path="/404" component={Error404} />
+              <SettingsRoutes />
+              <Route component={Error404} />
+            </Switch>
+          </React.Suspense>
+        </AuthenticatedLayout>
+      </WebsocketProvider>
+    </Switch>
  );
 }

@@ -6,14 +6,15 @@ import FullscreenLoading from "~/components/FullscreenLoading";
 import Route from "~/components/ProfiledRoute";
 import env from "~/env";
 import useQueryNotices from "~/hooks/useQueryNotices";
-import lazyWithRetry from "~/utils/lazyWithRetry";
+import lazy from "~/utils/lazyWithRetry";
 import { matchDocumentSlug as slug } from "~/utils/routeHelpers";

-const Authenticated = lazyWithRetry(() => import("~/components/Authenticated"));
-const AuthenticatedRoutes = lazyWithRetry(() => import("./authenticated"));
-const SharedDocument = lazyWithRetry(() => import("~/scenes/Document/Shared"));
-const Login = lazyWithRetry(() => import("~/scenes/Login"));
-const Logout = lazyWithRetry(() => import("~/scenes/Logout"));
+const Authenticated = lazy(() => import("~/components/Authenticated"));
+const AuthenticatedRoutes = lazy(() => import("./authenticated"));
+const SharedDocument = lazy(() => import("~/scenes/Document/Shared"));
+const Login = lazy(() => import("~/scenes/Login"));
+const Logout = lazy(() => import("~/scenes/Logout"));
+const OAuthAuthorize = lazy(() => import("~/scenes/Login/OAuthAuthorize"));

 export default function Routes() {
  useQueryNotices();
@@ -43,6 +44,7 @@ export default function Routes() {
          <Route exact path="/create" component={Login} />
          <Route exact path="/logout" component={Logout} />
          <Route exact path="/desktop-redirect" component={DesktopRedirect} />
+          <Route exact path="/oauth/authorize" component={OAuthAuthorize} />

          <Redirect exact from="/share/:shareId" to="/s/:shareId" />
          <Route exact path="/s/:shareId" component={SharedDocument} />
@@ -7,6 +7,7 @@ import useSettingsConfig from "~/hooks/useSettingsConfig";
 import lazy from "~/utils/lazyWithRetry";
 import { matchDocumentSlug, settingsPath } from "~/utils/routeHelpers";

+const Application = lazy(() => import("~/scenes/Settings/Application"));
 const Document = lazy(() => import("~/scenes/Document"));

 export default function SettingsRoutes() {
@@ -22,6 +23,12 @@ export default function SettingsRoutes() {
          component={config.component}
        />
      ))}
+      {/* TODO: Refactor these exceptions into config? */}
+      <Route
+        exact
+        path={`${settingsPath("applications")}/:id`}
+        component={Application}
+      />
      <Route
        exact
        path={`${settingsPath("templates")}/${matchDocumentSlug}`}
@@ -6,15 +6,18 @@ import { toast } from "sonner";
 import styled from "styled-components";
 import { richExtensions } from "@shared/editor/nodes";
 import { s } from "@shared/styles";
+import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
+import Document from "~/models/Document";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
+import Text from "~/components/Text";
 import { withUIExtensions } from "~/editor/extensions";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import Text from "./Text";
+import { Properties } from "~/types";

 const extensions = withUIExtensions(richExtensions);

@@ -22,8 +25,8 @@ type Props = {
  collection: Collection;
 };

-function CollectionDescription({ collection }: Props) {
-  const { collections } = useStores();
+function Overview({ collection }: Props) {
+  const { documents, collections } = useStores();
  const { t } = useTranslation();
  const user = useCurrentUser({ rejectOnEmpty: true });
  const can = usePolicy(collection);
@@ -54,6 +57,24 @@ function CollectionDescription({ collection }: Props) {
    [childOffsetHeight]
  );

+  const onCreateLink = React.useCallback(
+    async (params: Properties<Document>) => {
+      const newDocument = await documents.create(
+        {
+          collectionId: collection.id,
+          data: ProsemirrorHelper.getEmptyDocument(),
+          ...params,
+        },
+        {
+          publish: true,
+        }
+      );
+
+      return newDocument.url;
+    },
+    [collection, documents]
+  );
+
  return (
    <>
      {collections.isSaving && <LoadingIndicator />}
@@ -65,6 +86,7 @@ function CollectionDescription({ collection }: Props) {
            placeholder={`${t("Add a description")}…`}
            extensions={extensions}
            maxLength={CollectionValidation.maxDescriptionLength}
+            onCreateLink={onCreateLink}
            canUpdate={can.update}
            readOnly={!can.update}
            userId={user.id}
@@ -83,4 +105,4 @@ const Placeholder = styled(Text)`
  min-height: 27px;
 `;

-export default observer(CollectionDescription);
+export default observer(Overview);
@@ -12,7 +12,7 @@ import {
 } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import Icon, { IconTitleWrapper } from "@shared/components/Icon";
+import { IconTitleWrapper } from "@shared/components/Icon";
 import { s } from "@shared/styles";
 import { StatusFilter } from "@shared/types";
 import { colorPalette } from "@shared/utils/collections";
@@ -20,7 +20,6 @@ import Collection from "~/models/Collection";
 import { Action } from "~/components/Actions";
 import CenteredContent from "~/components/CenteredContent";
 import { CollectionBreadcrumb } from "~/components/CollectionBreadcrumb";
-import CollectionDescription from "~/components/CollectionDescription";
 import Heading from "~/components/Heading";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import InputSearchPage from "~/components/InputSearchPage";
@@ -46,6 +45,7 @@ import DropToImport from "./components/DropToImport";
 import Empty from "./components/Empty";
 import MembershipPreview from "./components/MembershipPreview";
 import Notices from "./components/Notices";
+import Overview from "./components/Overview";
 import ShareButton from "./components/ShareButton";

 const IconPicker = React.lazy(() => import("~/components/IconPicker"));
@@ -66,7 +66,6 @@ const CollectionScene = observer(function _CollectionScene() {
  const location = useLocation();
  const { t } = useTranslation();
  const { documents, collections, ui } = useStores();
-  const [isFetching, setFetching] = React.useState(false);
  const [error, setError] = React.useState<Error | undefined>();
  const currentPath = location.pathname;
  const [, setLastVisitedPath] = useLastVisitedPath();
@@ -120,21 +119,16 @@ const CollectionScene = observer(function _CollectionScene() {

  React.useEffect(() => {
    async function fetchData() {
-      if ((!can || !collection) && !error && !isFetching) {
-        try {
-          setError(undefined);
-          setFetching(true);
-          await collections.fetch(id);
-        } catch (err) {
-          setError(err);
-        } finally {
-          setFetching(false);
-        }
+      try {
+        setError(undefined);
+        await collections.fetch(id);
+      } catch (err) {
+        setError(err);
      }
    }

    void fetchData();
-  }, [collections, isFetching, collection, error, id, can]);
+  }, []);

  useCommandBarActions([editCollection], [ui.activeCollectionId ?? "none"]);

@@ -145,11 +139,7 @@ const CollectionScene = observer(function _CollectionScene() {
  const hasOverview = can.update || collection?.hasDescription;

  const fallbackIcon = collection ? (
-    <Icon
-      value={collection.icon ?? "collection"}
-      color={collection.color || undefined}
-      size={40}
-    />
+    <CollectionIcon collection={collection} size={40} expanded />
  ) : null;

  const tabProps = (path: CollectionPath) => ({
@@ -168,7 +158,7 @@ const CollectionScene = observer(function _CollectionScene() {
      left={
        collection.isArchived ? (
          <CollectionBreadcrumb collection={collection} />
-        ) : collection.isEmpty ? undefined : (
+        ) : (
          <InputSearchPage
            source="collection"
            placeholder={`${t("Search in collection")}…`}
@@ -212,7 +202,9 @@ const CollectionScene = observer(function _CollectionScene() {
                    popoverPosition="bottom-start"
                    onChange={handleIconChange}
                    borderOnHover
-                  />
+                  >
+                    {fallbackIcon}
+                  </IconPicker>
                </React.Suspense>
              ) : (
                fallbackIcon
@@ -265,7 +257,7 @@ const CollectionScene = observer(function _CollectionScene() {
                path={collectionPath(collection.path, CollectionPath.Overview)}
              >
                {hasOverview ? (
-                  <CollectionDescription collection={collection} />
+                  <Overview collection={collection} />
                ) : (
                  <Redirect
                    to={{
@@ -4,7 +4,7 @@ import isEqual from "lodash/isEqual";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import { Node } from "prosemirror-model";
-import { AllSelection } from "prosemirror-state";
+import { AllSelection, TextSelection } from "prosemirror-state";
 import * as React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import {
@@ -146,7 +146,17 @@ class DocumentScene extends React.Component<Props> {
    }
  }

-  replaceDocument = (template: Document | Revision) => {
+  /**
+   * Replaces the given selection with a template, if no selection is provided
+   * then the template is inserted at the beginning of the document.
+   *
+   * @param template The template to use
+   * @param selection The selection to replace, if any
+   */
+  replaceSelection = (
+    template: Document | Revision,
+    selection?: TextSelection | AllSelection
+  ) => {
    const editorRef = this.editor.current;

    if (!editorRef) {
@@ -154,6 +164,7 @@ class DocumentScene extends React.Component<Props> {
    }

    const { view, schema } = editorRef;
+    const sel = selection ?? TextSelection.near(view.state.doc.resolve(0));
    const doc = Node.fromJSON(
      schema,
      ProsemirrorHelper.replaceTemplateVariables(
@@ -163,11 +174,7 @@ class DocumentScene extends React.Component<Props> {
    );

    if (doc) {
-      view.dispatch(
-        view.state.tr
-          .setSelection(new AllSelection(view.state.doc))
-          .replaceSelectionWith(doc)
-      );
+      view.dispatch(view.state.tr.setSelection(sel).replaceSelectionWith(doc));
    }

    this.isEditorDirty = true;
@@ -217,7 +224,10 @@ class DocumentScene extends React.Component<Props> {
    });

    if (response) {
-      await this.replaceDocument(response.data);
+      await this.replaceSelection(
+        response.data,
+        new AllSelection(editorRef.view.state.doc)
+      );
      toast.success(t("Document restored"));
      history.replace(this.props.document.url, history.location.state);
    }
@@ -518,7 +528,7 @@ class DocumentScene extends React.Component<Props> {
              }
              savingIsDisabled={document.isSaving || this.isEmpty}
              sharedTree={this.props.sharedTree}
-              onSelectTemplate={this.replaceDocument}
+              onSelectTemplate={this.replaceSelection}
              onSave={this.onSave}
            />
            <Main fullWidth={document.fullWidth} tocPosition={tocPos}>
@@ -387,6 +387,7 @@ function DocumentHeader({
                    neutral
                  />
                )}
+                onSelectTemplate={onSelectTemplate}
                onFindAndReplace={editor?.commands.openFindAndReplace}
                showToggleEmbeds={canToggleEmbeds}
                showDisplayOptions
@@ -18,7 +18,7 @@ type Props = {
 };

 function References({ document }: Props) {
-  const { collections, documents } = useStores();
+  const { documents } = useStores();
  const user = useCurrentUser();
  const location = useLocation();
  const locationSidebarContext = useLocationSidebarContext();
@@ -27,10 +27,8 @@ function References({ document }: Props) {
    void documents.fetchBacklinks(document.id);
  }, [documents, document.id]);

-  const backlinks = documents.getBacklinkedDocuments(document.id);
-  const collection = document.collectionId
-    ? collections.get(document.collectionId)
-    : undefined;
+  const backlinks = document.backlinks;
+  const collection = document.collection;
  const children = collection
    ? collection.getChildrenForDocument(document.id)
    : [];
@@ -415,6 +415,10 @@ function KeyboardShortcuts() {
            shortcut: <Key>---</Key>,
            label: t("Horizontal divider"),
          },
+          {
+            shortcut: <Key>{"|--"}</Key>,
+            label: t("Table"),
+          },
          {
            shortcut: <Key>{"```"}</Key>,
            label: t("Code block"),
@@ -13,7 +13,6 @@ import { Config } from "~/stores/AuthStore";
 import { AvatarSize } from "~/components/Avatar";
 import ButtonLarge from "~/components/ButtonLarge";
 import ChangeLanguage from "~/components/ChangeLanguage";
-import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import OutlineIcon from "~/components/Icons/OutlineIcon";
@@ -30,21 +29,23 @@ import {
 } from "~/hooks/useLastVisitedPath";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
-import { draggableOnDesktop } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
 import { detectLanguage } from "~/utils/language";
 import { homePath } from "~/utils/routeHelpers";
 import AuthenticationProvider from "./components/AuthenticationProvider";
-import BackButton from "./components/BackButton";
-import Notices from "./components/Notices";
+import { BackButton } from "./components/BackButton";
+import { Background } from "./components/Background";
+import { Centered } from "./components/Centered";
+import { Notices } from "./components/Notices";
 import { getRedirectUrl, navigateToSubdomain } from "./urls";

 type Props = {
  children?: (config?: Config) => React.ReactNode;
+  onBack?: () => void;
 };

-function Login({ children }: Props) {
+function Login({ children, onBack }: Props) {
  const location = useLocation();
  const query = useQuery();
  const notice = query.get("notice");
@@ -110,9 +111,9 @@ function Login({ children }: Props) {
  if (error) {
    return (
      <Background>
-        <BackButton />
+        <BackButton onBack={onBack} />
        <ChangeLanguage locale={detectLanguage()} />
-        <Centered align="center" justify="center" column auto>
+        <Centered>
          <PageTitle title={t("Login")} />
          <Heading centered>{t("Error")}</Heading>
          <Note>
@@ -142,9 +143,9 @@ function Login({ children }: Props) {
  if (isCloudHosted && isCustomDomain && !config.name) {
    return (
      <Background>
-        <BackButton config={config} />
+        <BackButton onBack={onBack} config={config} />
        <ChangeLanguage locale={detectLanguage()} />
-        <Centered align="center" justify="center" column auto>
+        <Centered>
          <PageTitle title={t("Custom domain setup")} />
          <Heading centered>{t("Almost there")}…</Heading>
          <Note>
@@ -160,17 +161,10 @@ function Login({ children }: Props) {
  if (Desktop.isElectron() && notice === "domain-required") {
    return (
      <Background>
-        <BackButton config={config} />
+        <BackButton onBack={onBack} config={config} />
        <ChangeLanguage locale={detectLanguage()} />

-        <Centered
-          as="form"
-          onSubmit={handleGoSubdomain}
-          align="center"
-          justify="center"
-          column
-          auto
-        >
+        <Centered as="form" onSubmit={handleGoSubdomain}>
          <Heading centered>{t("Choose workspace")}</Heading>
          <Note>
            {t(
@@ -206,8 +200,8 @@ function Login({ children }: Props) {
  if (emailLinkSentTo) {
    return (
      <Background>
-        <BackButton config={config} />
-        <Centered align="center" justify="center" column auto>
+        <BackButton onBack={onBack} config={config} />
+        <Centered>
          <PageTitle title={t("Check your email")} />
          <CheckEmailIcon size={38} />
          <Heading centered>{t("Check your email")}</Heading>
@@ -241,10 +235,10 @@ function Login({ children }: Props) {

  return (
    <Background>
-      <BackButton config={config} />
+      <BackButton onBack={onBack} config={config} />
      <ChangeLanguage locale={detectLanguage()} />

-      <Centered align="center" justify="center" gap={12} column auto>
+      <Centered gap={12}>
        <PageTitle
          title={config.name ? `${config.name} – ${t("Login")}` : t("Login")}
        />
@@ -336,14 +330,6 @@ const CheckEmailIcon = styled(EmailIcon)`
  margin-bottom: -1.5em;
 `;

-const Background = styled(Fade)`
-  width: 100vw;
-  height: 100%;
-  background: ${s("background")};
-  display: flex;
-  ${draggableOnDesktop()}
-`;
-
 const Logo = styled.div`
  margin-bottom: -4px;
 `;
@@ -389,12 +375,4 @@ const Or = styled.hr`
  }
 `;

-const Centered = styled(Flex)`
-  user-select: none;
-  width: 90vw;
-  height: 100%;
-  max-width: 320px;
-  margin: 0 auto;
-`;
-
 export default observer(Login);
@@ -0,0 +1,260 @@
+import React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Flex from "@shared/components/Flex";
+import { s } from "@shared/styles";
+import { parseDomain } from "@shared/utils/domains";
+import type OAuthClient from "~/models/oauth/OAuthClient";
+import ButtonLarge from "~/components/ButtonLarge";
+import ChangeLanguage from "~/components/ChangeLanguage";
+import Heading from "~/components/Heading";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import PageTitle from "~/components/PageTitle";
+import Text from "~/components/Text";
+import env from "~/env";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import { useLoggedInSessions } from "~/hooks/useLoggedInSessions";
+import useQuery from "~/hooks/useQuery";
+import useRequest from "~/hooks/useRequest";
+import { client } from "~/utils/ApiClient";
+import { BadRequestError, NotFoundError } from "~/utils/errors";
+import isCloudHosted from "~/utils/isCloudHosted";
+import { detectLanguage } from "~/utils/language";
+import Login from "./Login";
+import { OAuthScopeHelper } from "./OAuthScopeHelper";
+import { Background } from "./components/Background";
+import { Centered } from "./components/Centered";
+import { ConnectHeader } from "./components/ConnectHeader";
+import { TeamSwitcher } from "./components/TeamSwitcher";
+
+export default function OAuthAuthorize() {
+  const team = useCurrentTeam({ rejectOnEmpty: false });
+  const sessions = useLoggedInSessions();
+
+  // We're self-hosted or on a team subdomain already, just show the authorize screen.
+  if (team) {
+    return <Authorize />;
+  }
+
+  // Cloud hosted and on root domain – show the workspace switcher.
+  const isAppRoot =
+    parseDomain(window.location.hostname).host === parseDomain(env.URL).host;
+  const hasLoggedInSessions = Object.keys(sessions).length > 0;
+  if (isCloudHosted && hasLoggedInSessions && isAppRoot) {
+    return <TeamSwitcher sessions={sessions} />;
+  }
+
+  return <Login />;
+}
+
+/**
+ * Authorize component is responsible for handling the OAuth authorization process.
+ * It retrieves the OAuth client information, displays the authorization request,
+ * and allows the user to either authorize or cancel the request.
+ */
+function Authorize() {
+  const team = useCurrentTeam();
+  const params = useQuery();
+  const { t } = useTranslation();
+  const [isSubmitting, setIsSubmitting] = React.useState(false);
+  const timeoutRef = React.useRef<number>();
+  const {
+    client_id: clientId,
+    redirect_uri: redirectUri,
+    response_type: responseType,
+    code_challenge: codeChallenge,
+    code_challenge_method: codeChallengeMethod,
+    state,
+    scope,
+  } = Object.fromEntries(params);
+  const [scopes] = React.useState(() => scope?.split(" ") ?? []);
+  const { error: clientError, data: response } = useRequest<{
+    data: OAuthClient;
+  }>(() => client.post("/oauthClients.info", { clientId, redirectUri }), true);
+
+  const handleCancel = () => {
+    if (redirectUri && !clientError) {
+      const url = new URL(redirectUri);
+      url.searchParams.set("error", "access_denied");
+      window.location.href = url.toString();
+      return;
+    }
+    if (window.history.length) {
+      window.history.back();
+    } else {
+      window.location.href = "/";
+    }
+  };
+
+  const handleSubmit = () => {
+    setIsSubmitting(true);
+    timeoutRef.current = window.setTimeout(() => setIsSubmitting(false), 5000);
+  };
+
+  React.useEffect(
+    () => () => {
+      timeoutRef.current && window.clearTimeout(timeoutRef.current);
+    },
+    []
+  );
+
+  const missingParams = [
+    !clientId && "client_id",
+    !redirectUri && "redirect_uri",
+    !responseType && "response_type",
+    !scope && "scope",
+    !state && "state",
+  ].filter(Boolean);
+
+  if (missingParams.length || clientError) {
+    return (
+      <Background>
+        <Centered>
+          <StyledHeading>{t("An error occurred")}</StyledHeading>
+          {clientError instanceof NotFoundError ? (
+            <Text as="p" type="secondary">
+              {t(
+                "The OAuth client could not be found, please check the provided client ID"
+              )}
+              <Pre>{clientId}</Pre>
+            </Text>
+          ) : clientError instanceof BadRequestError ? (
+            <Text as="p" type="secondary">
+              {t(
+                "The OAuth client could not be loaded, please check the redirect URI is valid"
+              )}
+              <Pre>{redirectUri}</Pre>
+            </Text>
+          ) : (
+            <Text as="p" type="secondary">
+              {t("Required OAuth parameters are missing")}
+              <Pre>
+                {missingParams.map((param) => (
+                  <>
+                    {param}
+                    <br />
+                  </>
+                ))}
+              </Pre>
+            </Text>
+          )}
+        </Centered>
+      </Background>
+    );
+  }
+
+  if (!response) {
+    return <LoadingIndicator />;
+  }
+
+  const { name, developerName, developerUrl } = response.data;
+
+  return (
+    <Background>
+      <ChangeLanguage locale={detectLanguage()} />
+      <PageTitle title={t("Authorize")} />
+      <Centered gap={12}>
+        <ConnectHeader team={team} oauthClient={response.data} />
+        <StyledHeading>
+          {t(`{{ appName }} wants to access {{ teamName }}`, {
+            appName: name,
+            teamName: team.name,
+          })}
+        </StyledHeading>
+        {developerName && (
+          <Text type="secondary" as="p" style={{ marginTop: -12 }}>
+            <Trans
+              defaults="By <em>{{ developerName }}</em>"
+              values={{
+                developerName,
+              }}
+              components={{
+                em: developerUrl ? (
+                  <Text
+                    as="a"
+                    type="secondary"
+                    weight="bold"
+                    href={developerUrl}
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  />
+                ) : (
+                  <strong />
+                ),
+              }}
+            />
+          </Text>
+        )}
+        <Text type="tertiary" as="p">
+          {t(
+            "{{ appName }} will be able to access your account and perform the following actions",
+            {
+              appName: name,
+            }
+          )}
+          :
+        </Text>
+        <ul style={{ width: "100%", paddingLeft: "1em", marginTop: 0 }}>
+          {OAuthScopeHelper.normalizeScopes(scopes, t).map((item) => (
+            <li key={item}>
+              <Text type="secondary">{item}</Text>
+            </li>
+          ))}
+        </ul>
+        <form
+          method="POST"
+          action="/oauth/authorize"
+          style={{ width: "100%" }}
+          onSubmit={handleSubmit}
+        >
+          <input type="hidden" name="client_id" value={clientId ?? ""} />
+          <input type="hidden" name="redirect_uri" value={redirectUri ?? ""} />
+          <input
+            type="hidden"
+            name="response_type"
+            value={responseType ?? ""}
+          />
+          <input type="hidden" name="state" value={state ?? ""} />
+          <input type="hidden" name="scope" value={scope ?? ""} />
+          {codeChallenge && (
+            <input type="hidden" name="code_challenge" value={codeChallenge} />
+          )}
+          {codeChallengeMethod && (
+            <input
+              type="hidden"
+              name="code_challenge_method"
+              value={codeChallengeMethod}
+            />
+          )}
+          <Flex gap={8} justify="space-between">
+            <Button type="button" onClick={handleCancel} neutral>
+              {t("Cancel")}
+            </Button>
+            <Button type="submit" disabled={isSubmitting}>
+              {t("Authorize")}
+            </Button>
+          </Flex>
+        </form>
+      </Centered>
+    </Background>
+  );
+}
+
+const Button = styled(ButtonLarge)`
+  width: calc(50% - 4px);
+`;
+
+const StyledHeading = styled(Heading).attrs({
+  as: "h2",
+  centered: true,
+})`
+  margin-top: 0;
+`;
+
+const Pre = styled.pre`
+  background: ${s("backgroundSecondary")};
+  padding: 16px;
+  border-radius: 4px;
+  font-size: 12px;
+  white-space: pre-wrap;
+`;
@@ -0,0 +1,56 @@
+import type { TFunction } from "i18next";
+import capitalize from "lodash/capitalize";
+import uniq from "lodash/uniq";
+import { Scope } from "@shared/types";
+
+export class OAuthScopeHelper {
+  public static normalizeScopes(scopes: string[], t: TFunction): string[] {
+    const methodToReadable = {
+      list: t("read"),
+      info: t("read"),
+      read: t("read"),
+      write: t("write"),
+      create: t("write"),
+      update: t("write"),
+      delete: t("write"),
+      "*": t("read and write"),
+    };
+
+    const translatedNamespaces = {
+      apiKeys: t("API keys"),
+      attachments: t("attachments"),
+      collections: t("collections"),
+      comments: t("comments"),
+      documents: t("documents"),
+      events: t("events"),
+      groups: t("groups"),
+      integrations: t("integrations"),
+      notifications: t("notifications"),
+      reactions: t("reactions"),
+      pins: t("pins"),
+      shares: t("shares"),
+      users: t("users"),
+      teams: t("teams"),
+      "*": t("workspace"),
+    };
+
+    const normalizedScopes = scopes.map((scope) => {
+      if (scope === Scope.Read) {
+        return t("Read all data");
+      }
+      if (scope === Scope.Write) {
+        return t("Write all data");
+      }
+
+      const [namespace, method] = scope.replace("/api/", "").split(/[:\.]/g);
+      const readableMethod =
+        methodToReadable[method as keyof typeof methodToReadable] ?? method;
+      const translatedNamespace =
+        translatedNamespaces[namespace as keyof typeof translatedNamespaces] ??
+        namespace;
+      return capitalize(`${readableMethod} ${translatedNamespace}`);
+    });
+
+    return uniq(normalizedScopes);
+  }
+}
@@ -10,12 +10,21 @@ import isCloudHosted from "~/utils/isCloudHosted";

 type Props = {
  config?: Config;
+  onBack?: () => void;
 };

-export default function BackButton({ config }: Props) {
+export function BackButton({ onBack, config }: Props) {
  const { t } = useTranslation();
  const isSubdomain = !!config?.hostname;

+  if (onBack) {
+    return (
+      <Link onClick={onBack}>
+        <BackIcon /> {t("Back")}
+      </Link>
+    );
+  }
+
  if (!isCloudHosted || parseDomain(window.location.origin).custom) {
    return null;
  }
@@ -0,0 +1,12 @@
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Fade from "~/components/Fade";
+import { draggableOnDesktop } from "~/styles";
+
+export const Background = styled(Fade)`
+  width: 100vw;
+  height: 100%;
+  background: ${s("background")};
+  display: flex;
+  ${draggableOnDesktop()}
+`;
@@ -0,0 +1,15 @@
+import styled from "styled-components";
+import Flex from "@shared/components/Flex";
+
+export const Centered = styled(Flex).attrs({
+  align: "center",
+  justify: "center",
+  column: true,
+  auto: true,
+})`
+  user-select: none;
+  width: 90vw;
+  height: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+`;
@@ -0,0 +1,40 @@
+import { MoreIcon } from "outline-icons";
+import * as React from "react";
+import Flex from "@shared/components/Flex";
+import Text from "@shared/components/Text";
+import type Team from "~/models/Team";
+import type OAuthClient from "~/models/oauth/OAuthClient";
+import { Avatar } from "~/components/Avatar";
+import { AvatarSize, AvatarVariant } from "~/components/Avatar/Avatar";
+
+type Props = {
+  team: Team;
+  oauthClient: OAuthClient;
+};
+
+export function ConnectHeader({ team, oauthClient }: Props) {
+  return (
+    <Text type="tertiary">
+      <Flex gap={12} align="center">
+        <Avatar
+          variant={AvatarVariant.Square}
+          model={{
+            avatarUrl: oauthClient.avatarUrl,
+            initial: oauthClient.name[0],
+          }}
+          size={AvatarSize.XXLarge}
+          alt={oauthClient.name}
+        />
+
+        <MoreIcon />
+
+        <Avatar
+          variant={AvatarVariant.Square}
+          model={team}
+          size={AvatarSize.XXLarge}
+          alt={team.name}
+        />
+      </Flex>
+    </Text>
+  );
+}
@@ -123,7 +123,7 @@ function Message({ notice }: { notice: string }) {
  }
 }

-export default function Notices() {
+export function Notices() {
  const query = useQuery();
  const notice = query.get("notice");

@@ -0,0 +1,109 @@
+import { ArrowIcon } from "outline-icons";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Text from "@shared/components/Text";
+import { s } from "@shared/styles";
+import { AvatarSize } from "~/components/Avatar";
+import Avatar, { AvatarVariant } from "~/components/Avatar/Avatar";
+import ChangeLanguage from "~/components/ChangeLanguage";
+import Heading from "~/components/Heading";
+import OutlineIcon from "~/components/Icons/OutlineIcon";
+import env from "~/env";
+import type { Sessions } from "~/hooks/useLoggedInSessions";
+import { detectLanguage } from "~/utils/language";
+import Login from "../Login";
+import { Background } from "./Background";
+import { Centered } from "./Centered";
+
+type Props = { sessions: Sessions };
+
+export function TeamSwitcher({ sessions }: Props) {
+  const { t } = useTranslation();
+  const [showLogin, setShowLogin] = React.useState(false);
+  const url = new URL(window.location.href);
+  const appName = env.APP_NAME;
+
+  if (showLogin) {
+    return <Login onBack={() => setShowLogin(false)} />;
+  }
+
+  return (
+    <Background>
+      <ChangeLanguage locale={detectLanguage()} />
+      <Centered>
+        <OutlineIcon size={AvatarSize.XXLarge} />
+
+        <StyledHeading>{t("Choose a workspace")}</StyledHeading>
+        <Text type="tertiary" as="p">
+          {t(
+            "Choose an {{ appName }} workspace or login to continue connecting this app",
+            { appName }
+          )}
+          .
+        </Text>
+        {Object.keys(sessions)?.map((teamId) => {
+          const session = sessions[teamId];
+          const location = session.url + url.pathname + url.search;
+          return (
+            <TeamLink href={location} key={session.url}>
+              <Avatar
+                variant={AvatarVariant.Square}
+                model={{
+                  avatarUrl: session.logoUrl,
+                  initial: session.name[0],
+                }}
+                size={AvatarSize.Large}
+                alt={session.name}
+              />
+              {session.name}
+              <StyledArrowIcon />
+            </TeamLink>
+          );
+        })}
+        <TeamLink onClick={() => setShowLogin(true)}>
+          <ArrowIcon size={AvatarSize.Large} />
+          {t("Login to workspace")}
+        </TeamLink>
+      </Centered>
+    </Background>
+  );
+}
+
+const StyledArrowIcon = styled(ArrowIcon)`
+  position: absolute;
+  transition: all 0.2s ease-in-out;
+  opacity: 0;
+  right: 12px;
+`;
+
+const TeamLink = styled.a`
+  position: relative;
+  left: -8px;
+  right: -8px;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px;
+  margin: 4px;
+  border-radius: 8px;
+  width: 100%;
+  color: ${s("text")};
+  font-weight: ${s("fontWeightMedium")};
+
+  &:hover {
+    background: ${s("listItemHoverBackground")};
+
+    ${StyledArrowIcon} {
+      opacity: 1;
+      right: 8px;
+    }
+  }
+`;
+
+const StyledHeading = styled(Heading).attrs({
+  as: "h2",
+  centered: true,
+})`
+  margin-top: 0;
+`;
@@ -0,0 +1,3 @@
+import Login from "./Login";
+
+export default Login;
@@ -0,0 +1,105 @@
+import { observer } from "mobx-react";
+import { PadlockIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import ApiKey from "~/models/ApiKey";
+import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
+import { Action } from "~/components/Actions";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import PaginatedList from "~/components/PaginatedList";
+import Scene from "~/components/Scene";
+import Text from "~/components/Text";
+import { createApiKey } from "~/actions/definitions/apiKeys";
+import env from "~/env";
+import useActionContext from "~/hooks/useActionContext";
+import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import usePolicy from "~/hooks/usePolicy";
+import useStores from "~/hooks/useStores";
+import ApiKeyListItem from "./components/ApiKeyListItem";
+import OAuthAuthenticationListItem from "./components/OAuthAuthenticationListItem";
+
+function APIAndApps() {
+  const team = useCurrentTeam();
+  const user = useCurrentUser();
+  const { t } = useTranslation();
+  const { apiKeys, oauthAuthentications } = useStores();
+  const can = usePolicy(team);
+  const context = useActionContext();
+  const appName = env.APP_NAME;
+
+  return (
+    <Scene
+      title={t("API & Apps")}
+      icon={<PadlockIcon />}
+      actions={
+        <>
+          {can.createApiKey && (
+            <Action>
+              <Button
+                type="submit"
+                value={`${t("New API key")}…`}
+                action={createApiKey}
+                context={context}
+              />
+            </Action>
+          )}
+        </>
+      }
+    >
+      <Heading>{t("API & Apps")}</Heading>
+      <h2>{t("API keys")}</h2>
+      {can.createApiKey ? (
+        <Text as="p" type="secondary">
+          <Trans
+            defaults="Create personal API keys to authenticate with the API and programatically control
+      your workspace's data. For more details see the <em>developer documentation</em>."
+            components={{
+              em: (
+                <a
+                  href="https://www.getoutline.com/developers"
+                  target="_blank"
+                  rel="noreferrer"
+                />
+              ),
+            }}
+          />
+        </Text>
+      ) : (
+        <Trans>API keys have been disabled by an admin for your account</Trans>
+      )}
+      <PaginatedList<ApiKey>
+        fetch={apiKeys.fetchPage}
+        items={apiKeys.personalApiKeys}
+        options={{ userId: user.id }}
+        renderItem={(apiKey) => (
+          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
+        )}
+      />
+      <PaginatedList
+        fetch={oauthAuthentications.fetchPage}
+        items={oauthAuthentications.orderedData}
+        heading={
+          <>
+            <h2>{t("Application access")}</h2>
+            <Text as="p" type="secondary">
+              {t(
+                "Manage which third-party and internal applications have been granted access to your {{ appName }} account.",
+                { appName }
+              )}
+            </Text>
+          </>
+        }
+        renderItem={(oauthAuthentication: OAuthAuthentication) => (
+          <OAuthAuthenticationListItem
+            key={oauthAuthentication.id}
+            oauthAuthentication={oauthAuthentication}
+          />
+        )}
+      />
+    </Scene>
+  );
+}
+
+export default observer(APIAndApps);
@@ -61,7 +61,6 @@ function ApiKeys() {
      <PaginatedList<ApiKey>
        fetch={apiKeys.fetchPage}
        items={apiKeys.orderedData}
-        heading={<h2>{t("All")}</h2>}
        renderItem={(apiKey) => (
          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
        )}
@@ -0,0 +1,325 @@
+import { observer } from "mobx-react";
+import { CopyIcon, InternetIcon, ReplaceIcon } from "outline-icons";
+import * as React from "react";
+import { Controller, useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { useParams } from "react-router-dom";
+import { toast } from "sonner";
+import { OAuthClientValidation } from "@shared/validations";
+import OAuthClient from "~/models/oauth/OAuthClient";
+import Breadcrumb from "~/components/Breadcrumb";
+import Button from "~/components/Button";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import ContentEditable from "~/components/ContentEditable";
+import Heading from "~/components/Heading";
+import Input from "~/components/Input";
+import LoadingIndicator from "~/components/LoadingIndicator";
+import NudeButton from "~/components/NudeButton";
+import { FormData } from "~/components/OAuthClient/OAuthClientForm";
+import Scene from "~/components/Scene";
+import Switch from "~/components/Switch";
+import Tooltip from "~/components/Tooltip";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import OAuthClientMenu from "~/menus/OAuthClientMenu";
+import isCloudHosted from "~/utils/isCloudHosted";
+import { settingsPath } from "~/utils/routeHelpers";
+import { ActionRow } from "./components/ActionRow";
+import { CopyButton } from "./components/CopyButton";
+import ImageInput from "./components/ImageInput";
+import SettingRow from "./components/SettingRow";
+
+type Props = {
+  oauthClient: OAuthClient;
+};
+
+const LoadingState = observer(function LoadingState() {
+  const { id } = useParams<{ id: string }>();
+  const { oauthClients } = useStores();
+  const oauthClient = oauthClients.get(id);
+  const { request } = useRequest(() => oauthClients.fetch(id));
+
+  React.useEffect(() => {
+    if (!oauthClient) {
+      void request();
+    }
+  }, [oauthClient]);
+
+  if (!oauthClient) {
+    return <LoadingIndicator />;
+  }
+
+  return <Application oauthClient={oauthClient} />;
+});
+
+const Application = observer(function Application({ oauthClient }: Props) {
+  const { t } = useTranslation();
+  const { dialogs } = useStores();
+
+  const {
+    register,
+    handleSubmit: formHandleSubmit,
+    formState,
+    getValues,
+    setError,
+    control,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      name: oauthClient.name ?? "",
+      developerName: oauthClient.developerName ?? "",
+      developerUrl: oauthClient.developerUrl ?? "",
+      description: oauthClient.description ?? "",
+      avatarUrl: oauthClient.avatarUrl ?? "",
+      redirectUris: oauthClient.redirectUris ?? [],
+      published: oauthClient.published ?? false,
+    },
+  });
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        await oauthClient.save(data);
+        toast.success(
+          oauthClient.published
+            ? t("Application published")
+            : t("Application updated")
+        );
+      } catch (error) {
+        toast.error(error.message);
+      }
+    },
+    [oauthClient, t]
+  );
+
+  const handleRotateSecret = React.useCallback(async () => {
+    const onDelete = async () => {
+      try {
+        await oauthClient.rotateClientSecret();
+        toast.success(t("Client secret rotated"));
+      } catch (err) {
+        toast.error(err.message);
+      }
+    };
+
+    dialogs.openModal({
+      title: t("Rotate secret"),
+      content: (
+        <ConfirmationDialog onSubmit={onDelete} danger>
+          {t(
+            "Rotating the client secret will invalidate the current secret. Make sure to update any applications using these credentials."
+          )}
+        </ConfirmationDialog>
+      ),
+    });
+  }, [t, dialogs, oauthClient]);
+
+  return (
+    <Scene
+      title={oauthClient.name}
+      left={
+        <Breadcrumb
+          items={[
+            {
+              type: "route",
+              title: t("Applications"),
+              to: settingsPath("applications"),
+              icon: <InternetIcon />,
+            },
+          ]}
+        />
+      }
+      actions={<OAuthClientMenu oauthClient={oauthClient} showEdit={false} />}
+    >
+      <form onSubmit={formHandleSubmit(handleSubmit)}>
+        <Heading>
+          <Controller
+            control={control}
+            name="name"
+            render={({ field }) => (
+              <ContentEditable
+                value={field.value}
+                placeholder={t("Name")}
+                onChange={field.onChange}
+                maxLength={OAuthClientValidation.maxNameLength}
+              />
+            )}
+          />
+        </Heading>
+
+        <SettingRow
+          label={t("Icon")}
+          name="avatarUrl"
+          description={t("Displayed to users when authorizing")}
+        >
+          <Controller
+            control={control}
+            name="avatarUrl"
+            render={({ field }) => (
+              <ImageInput
+                onSuccess={(url) => field.onChange(url)}
+                onError={(err) => setError("avatarUrl", { message: err })}
+                model={{
+                  id: oauthClient.id,
+                  avatarUrl: field.value,
+                  initial: getValues().name[0],
+                }}
+                borderRadius={0}
+              />
+            )}
+          />
+        </SettingRow>
+
+        <SettingRow
+          name="description"
+          label={t("Tagline")}
+          description={t("A short description")}
+        >
+          <Input
+            type="text"
+            {...register("description", {
+              maxLength: OAuthClientValidation.maxDescriptionLength,
+            })}
+            flex
+          />
+        </SettingRow>
+
+        <SettingRow
+          name="details"
+          label={t("Details")}
+          description={t(
+            "Developer information shown to users when authorizing"
+          )}
+          border={isCloudHosted}
+        >
+          <Input
+            type="text"
+            label={t("Developer name")}
+            {...register("developerName", {
+              maxLength: OAuthClientValidation.maxDeveloperNameLength,
+            })}
+            flex
+          />
+          <Input
+            type="text"
+            label={t("Developer URL")}
+            {...register("developerUrl", {
+              maxLength: OAuthClientValidation.maxDeveloperUrlLength,
+            })}
+            flex
+          />
+        </SettingRow>
+        {isCloudHosted && (
+          <SettingRow
+            name="published"
+            label={t("Published")}
+            description={t(
+              "Allow users from other workspaces to authorize this app"
+            )}
+            border={false}
+          >
+            <Switch id="published" {...register("published")} />
+          </SettingRow>
+        )}
+
+        <h2>{t("Credentials")}</h2>
+        <SettingRow
+          name="clientId"
+          label={t("OAuth client ID")}
+          description={t("The public identifier for this app")}
+        >
+          <Input id="clientId" value={oauthClient.clientId} readOnly>
+            <CopyButton
+              value={oauthClient.clientId}
+              success={t("Copied to clipboard")}
+              tooltip={t("Copy")}
+              icon={<CopyIcon size={20} />}
+            />
+          </Input>
+        </SettingRow>
+        <SettingRow
+          name="clientSecret"
+          label={t("OAuth client secret")}
+          description={t(
+            "Store this value securely, do not expose it publicly"
+          )}
+        >
+          <Input
+            id="clientSecret"
+            type="password"
+            value={oauthClient.clientSecret}
+            readOnly
+          >
+            <Tooltip content={t("Rotate secret")} placement="top">
+              <NudeButton type="button" onClick={handleRotateSecret}>
+                <ReplaceIcon size={20} />
+              </NudeButton>
+            </Tooltip>
+
+            <CopyButton
+              value={oauthClient.clientSecret}
+              success={t("Copied to clipboard")}
+              tooltip={t("Copy")}
+              icon={<CopyIcon size={20} />}
+            />
+          </Input>
+        </SettingRow>
+        <SettingRow
+          name="redirectUris"
+          label={t("Callback URLs")}
+          description={t(
+            "Where users are redirected after authorizing this app"
+          )}
+        >
+          <Controller
+            control={control}
+            name="redirectUris"
+            render={({ field }) => (
+              <Input
+                id="redirectUris"
+                type="textarea"
+                placeholder="https://example.com/callback"
+                ref={field.ref}
+                value={field.value.join("\n")}
+                rows={Math.max(2, field.value.length + 1)}
+                onChange={(event) => {
+                  field.onChange(event.target.value.split("\n"));
+                }}
+                required
+              />
+            )}
+          />
+        </SettingRow>
+        <SettingRow
+          name="authorizationUrl"
+          label={t("Authorization URL")}
+          description={t("Where users are redirected to authorize this app")}
+          border={false}
+        >
+          <Input
+            id="authorizationUrl"
+            value={oauthClient.authorizationUrl}
+            readOnly
+          >
+            <CopyButton
+              value={oauthClient.authorizationUrl}
+              success={t("Copied to clipboard")}
+              tooltip={t("Copy link")}
+            />
+          </Input>
+        </SettingRow>
+
+        <ActionRow>
+          <Button
+            type="submit"
+            disabled={formState.isSubmitting || !formState.isValid}
+          >
+            {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
+          </Button>
+        </ActionRow>
+      </form>
+    </Scene>
+  );
+});
+
+export default LoadingState;
@@ -1,42 +1,40 @@
 import { observer } from "mobx-react";
-import { CodeIcon } from "outline-icons";
+import { InternetIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import ApiKey from "~/models/ApiKey";
+import OAuthClient from "~/models/oauth/OAuthClient";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import PaginatedList from "~/components/PaginatedList";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
-import { createApiKey } from "~/actions/definitions/apiKeys";
+import { createOAuthClient } from "~/actions/definitions/oauthClients";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import ApiKeyListItem from "./components/ApiKeyListItem";
+import OAuthClientListItem from "./components/OAuthClientListItem";

-function PersonalApiKeys() {
+function Applications() {
  const team = useCurrentTeam();
-  const user = useCurrentUser();
  const { t } = useTranslation();
-  const { apiKeys } = useStores();
+  const { oauthClients } = useStores();
  const can = usePolicy(team);
  const context = useActionContext();

  return (
    <Scene
-      title={t("API")}
-      icon={<CodeIcon />}
+      title={t("Applications")}
+      icon={<InternetIcon />}
      actions={
        <>
-          {can.createApiKey && (
+          {can.createOAuthClient && (
            <Action>
              <Button
                type="submit"
-                value={`${t("New API key")}…`}
-                action={createApiKey}
+                value={`${t("New App")}…`}
+                action={createOAuthClient}
                context={context}
              />
            </Action>
@@ -44,12 +42,10 @@ function PersonalApiKeys() {
        </>
      }
    >
-      <Heading>{t("API")}</Heading>
+      <Heading>{t("Applications")}</Heading>
      <Text as="p" type="secondary">
        <Trans
-          defaults="Create personal API keys to authenticate with the API and programatically control
-          your workspace's data. API keys have the same permissions as your user account.
-          For more details see the <em>developer documentation</em>."
+          defaults="Applications allow you to build internal or public integrations with Outline and provide secure access via OAuth. For more details see the <em>developer documentation</em>."
          components={{
            em: (
              <a
@@ -61,17 +57,15 @@ function PersonalApiKeys() {
          }}
        />
      </Text>
-      <PaginatedList<ApiKey>
-        fetch={apiKeys.fetchPage}
-        items={apiKeys.personalApiKeys}
-        options={{ userId: user.id }}
-        heading={<h2>{t("Personal keys")}</h2>}
-        renderItem={(apiKey) => (
-          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
+      <PaginatedList<OAuthClient>
+        fetch={oauthClients.fetchPage}
+        items={oauthClients.orderedData}
+        renderItem={(oauthClient) => (
+          <OAuthClientListItem key={oauthClient.id} oauthClient={oauthClient} />
        )}
      />
    </Scene>
  );
 }

-export default observer(PersonalApiKeys);
+export default observer(Applications);
@@ -108,7 +108,16 @@ function Details() {
        toast.error(err.message);
      }
    },
-    [team, name, subdomain, defaultCollectionId, publicBranding, customTheme, t]
+    [
+      tocPosition,
+      team,
+      name,
+      subdomain,
+      defaultCollectionId,
+      publicBranding,
+      customTheme,
+      t,
+    ]
  );

  const handleNameChange = React.useCallback(
@@ -0,0 +1,72 @@
+import groupBy from "lodash/groupBy";
+import * as React from "react";
+import { Trans, useTranslation } from "react-i18next";
+import styled from "styled-components";
+import Flex from "@shared/components/Flex";
+import Heading from "~/components/Heading";
+import InputSearch from "~/components/InputSearch";
+import Scene from "~/components/Scene";
+import Text from "~/components/Text";
+import useSettingsConfig from "~/hooks/useSettingsConfig";
+import useStores from "~/hooks/useStores";
+import { settingsPath } from "~/utils/routeHelpers";
+import IntegrationCard from "./components/IntegrationCard";
+import { StickyFilters } from "./components/StickyFilters";
+
+export function Integrations() {
+  const { t } = useTranslation();
+  const { integrations } = useStores();
+  const items = useSettingsConfig();
+  const [query, setQuery] = React.useState("");
+
+  const handleQuery = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setQuery(event.target.value);
+  };
+
+  const groupedItems = groupBy(
+    items.filter(
+      (item) =>
+        item.group === "Integrations" &&
+        item.enabled &&
+        item.path !== settingsPath("integrations") &&
+        item.name.toLowerCase().includes(query.toLowerCase())
+    ),
+    (item) =>
+      item.pluginId && integrations.findByService(item.pluginId)
+        ? "connected"
+        : "available"
+  );
+
+  return (
+    <Scene title={t("Integrations")}>
+      <Heading>{t("Integrations")}</Heading>
+      <Text as="p" type="secondary">
+        <Trans>
+          Configure a variety of integrations with third-party services.
+        </Trans>
+      </Text>
+      <StickyFilters gap={8}>
+        <InputSearch
+          short
+          value={query}
+          placeholder={`${t("Filter")}…`}
+          onChange={handleQuery}
+        />
+      </StickyFilters>
+
+      <Cards gap={30} wrap>
+        {groupedItems.connected?.map((item) => (
+          <IntegrationCard key={item.path} integration={item} isConnected />
+        ))}
+        {groupedItems.available?.map((item) => (
+          <IntegrationCard key={item.path} integration={item} />
+        ))}
+      </Cards>
+    </Scene>
+  );
+}
+
+const Cards = styled(Flex)`
+  margin-top: 20px;
+  width: "100%";
+`;
@@ -0,0 +1,50 @@
+import { LinkIcon } from "outline-icons";
+import * as React from "react";
+import { toast } from "sonner";
+import CopyToClipboard from "~/components/CopyToClipboard";
+import NudeButton from "~/components/NudeButton";
+import Tooltip from "~/components/Tooltip";
+
+type Props = {
+  /** The value to be copied */
+  value: string;
+  /** The message to show when the value is copied */
+  success: string;
+  /** The tooltip message */
+  tooltip: string;
+  /** An optional icon */
+  icon?: React.ReactNode;
+};
+
+/**
+ * A button that copies a value to the clipboard when clicked and shows a
+ * single icon.
+ */
+export function CopyButton({
+  value,
+  success,
+  tooltip,
+  icon = <LinkIcon size={20} />,
+}: Props) {
+  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const handleCopied = React.useCallback(() => {
+    timeout.current = setTimeout(() => {
+      toast.message(success);
+    }, 100);
+
+    return () => {
+      if (timeout.current) {
+        clearTimeout(timeout.current);
+      }
+    };
+  }, [success]);
+
+  return (
+    <Tooltip content={tooltip} placement="top">
+      <CopyToClipboard text={value} onCopy={handleCopied}>
+        <NudeButton type="button">{icon}</NudeButton>
+      </CopyToClipboard>
+    </Tooltip>
+  );
+}
@@ -1,8 +1,10 @@
+import { EditIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { Avatar, AvatarSize, IAvatar } from "~/components/Avatar";
+import { AvatarVariant } from "~/components/Avatar/Avatar";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
@@ -17,10 +19,18 @@ export default function ImageInput({ model, onSuccess, ...rest }: Props) {
  return (
    <Flex gap={8} justify="space-between">
      <ImageBox>
-        <ImageUpload onSuccess={onSuccess} {...rest}>
-          <StyledAvatar model={model} size={AvatarSize.Upload} />
+        <ImageUpload
+          onSuccess={onSuccess}
+          submitText={t("Crop Image")}
+          {...rest}
+        >
+          <Avatar
+            model={model}
+            size={AvatarSize.Upload}
+            variant={AvatarVariant.Square}
+          />
          <Flex auto align="center" justify="center" className="upload">
-            {t("Upload")}
+            <EditIcon />
          </Flex>
        </ImageUpload>
      </ImageBox>
@@ -38,10 +48,6 @@ const avatarStyles = `
  height: ${AvatarSize.Upload}px;
 `;

-const StyledAvatar = styled(Avatar)`
-  border-radius: 8px;
-`;
-
 const ImageBox = styled(Flex)`
  ${avatarStyles};
  position: relative;
@@ -0,0 +1,93 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import styled from "styled-components";
+import { s, ellipsis } from "@shared/styles";
+import { ConfigItem } from "~/hooks/useSettingsConfig";
+import Button from "../../../components/Button";
+import Flex from "../../../components/Flex";
+import Text from "../../../components/Text";
+
+type Props = {
+  integration: ConfigItem;
+  isConnected?: boolean;
+};
+
+function IntegrationCard({ integration, isConnected }: Props) {
+  const { t } = useTranslation();
+
+  return (
+    <Card as={Link} to={integration.path}>
+      <Flex align="center" gap={8}>
+        <integration.icon size={48} />
+        <Flex auto column>
+          <Name>{integration.name}</Name>
+          {isConnected && <Status>{t("Connected")}</Status>}
+        </Flex>
+        <Button as="span" neutral>
+          {isConnected ? t("Configure") : t("Connect")}
+        </Button>
+      </Flex>
+
+      <Description>{integration.description}</Description>
+    </Card>
+  );
+}
+
+export default IntegrationCard;
+
+const Card = styled.div`
+  display: flex;
+  flex-direction: column;
+  flex-grow: 1;
+  padding: 20px;
+  width: 300px;
+  background: ${s("background")};
+  border: 1px solid ${s("inputBorder")};
+  color: ${s("text")};
+  border-radius: 8px;
+  transition: box-shadow 200ms ease;
+  cursor: var(--pointer);
+
+  &:hover {
+    box-shadow: rgba(0, 0, 0, 0.08) 0px 2px 4px, rgba(0, 0, 0, 0.06) 0px 4px 8px;
+  }
+`;
+
+const Name = styled(Text)`
+  margin: 0;
+  font-size: 16px;
+  font-weight: 600;
+  color: ${s("text")};
+  ${ellipsis()}
+`;
+
+const Description = styled(Text)`
+  margin: 8px 0 0;
+  font-size: 15px;
+  max-width: 100%;
+  color: ${s("textTertiary")};
+`;
+
+const Status = styled(Text).attrs({
+  type: "secondary",
+  size: "small",
+  as: "span",
+})`
+  display: inline-flex;
+  align-items: center;
+
+  &::after {
+    content: "";
+    display: inline-block;
+    width: 17px;
+    height: 17px;
+
+    background: radial-gradient(
+      circle at center,
+      ${s("accent")} 0 33%,
+      transparent 33%
+    );
+    border-radius: 50%;
+  }
+`;
@@ -0,0 +1,33 @@
+import { SettingsIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import Breadcrumb from "~/components/Breadcrumb";
+import Scene from "~/components/Scene";
+import { settingsPath } from "~/utils/routeHelpers";
+
+export function IntegrationScene({
+  children,
+  ...rest
+}: React.ComponentProps<typeof Scene>) {
+  const { t } = useTranslation();
+
+  return (
+    <Scene
+      left={
+        <Breadcrumb
+          items={[
+            {
+              type: "route",
+              title: t("Integrations"),
+              icon: <SettingsIcon />,
+              to: settingsPath("integrations"),
+            },
+          ]}
+        />
+      }
+      {...rest}
+    >
+      {children}
+    </Scene>
+  );
+}
@@ -0,0 +1,61 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
+import { OAuthScopeHelper } from "~/scenes/Login/OAuthScopeHelper";
+import { Avatar, AvatarSize } from "~/components/Avatar";
+import { AvatarVariant } from "~/components/Avatar/Avatar";
+import ListItem from "~/components/List/Item";
+import Text from "~/components/Text";
+import Time from "~/components/Time";
+import OAuthAuthenticationMenu from "~/menus/OAuthAuthenticationMenu";
+
+type Props = {
+  /** The OAuthAuthentication to display */
+  oauthAuthentication: OAuthAuthentication;
+};
+
+const OAuthAuthenticationListItem = ({ oauthAuthentication }: Props) => {
+  const { t } = useTranslation();
+
+  const subtitle = (
+    <>
+      <Text type="tertiary">
+        {oauthAuthentication.lastActiveAt ? (
+          <>
+            {t("Last active")}{" "}
+            <Time dateTime={oauthAuthentication.lastActiveAt} addSuffix />
+          </>
+        ) : (
+          t("Never used")
+        )}{" "}
+        &middot;{" "}
+      </Text>
+      <Text type="tertiary" ellipsis>
+        {OAuthScopeHelper.normalizeScopes(oauthAuthentication.scope, t).join(
+          ", "
+        )}
+      </Text>
+    </>
+  );
+
+  return (
+    <ListItem
+      key={oauthAuthentication.id}
+      image={
+        <Avatar
+          model={oauthAuthentication.oauthClient}
+          size={AvatarSize.Large}
+          variant={AvatarVariant.Square}
+        />
+      }
+      title={oauthAuthentication.oauthClient.name}
+      subtitle={subtitle}
+      actions={
+        <OAuthAuthenticationMenu oauthAuthentication={oauthAuthentication} />
+      }
+    />
+  );
+};
+
+export default observer(OAuthAuthenticationListItem);
@@ -0,0 +1,37 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import OAuthClient from "~/models/oauth/OAuthClient";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+
+type Props = {
+  oauthClient: OAuthClient;
+  onSubmit: () => void;
+};
+
+export default function OAuthClientDeleteDialog({
+  oauthClient,
+  onSubmit,
+}: Props) {
+  const { t } = useTranslation();
+
+  const handleSubmit = async () => {
+    await oauthClient.delete();
+    onSubmit();
+  };
+
+  return (
+    <ConfirmationDialog
+      onSubmit={handleSubmit}
+      submitText={t("Delete")}
+      savingText={`${t("Deleting")}…`}
+      danger
+    >
+      {t(
+        "Are you sure you want to delete the {{ appName }} application? This cannot be undone.",
+        {
+          appName: oauthClient.name,
+        }
+      )}
+    </ConfirmationDialog>
+  );
+}
@@ -0,0 +1,55 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { Link } from "react-router-dom";
+import OAuthClient from "~/models/oauth/OAuthClient";
+import { Avatar, AvatarSize } from "~/components/Avatar";
+import { AvatarVariant } from "~/components/Avatar/Avatar";
+import ListItem from "~/components/List/Item";
+import Text from "~/components/Text";
+import Time from "~/components/Time";
+import useCurrentUser from "~/hooks/useCurrentUser";
+import OAuthClientMenu from "~/menus/OAuthClientMenu";
+import { settingsPath } from "~/utils/routeHelpers";
+
+type Props = {
+  oauthClient: OAuthClient;
+};
+
+const OAuthClientListItem = ({ oauthClient }: Props) => {
+  const { t } = useTranslation();
+  const user = useCurrentUser();
+
+  const subtitle = (
+    <>
+      <Text type="tertiary">
+        {t(`Created`)} <Time dateTime={oauthClient.createdAt} addSuffix />{" "}
+        {oauthClient.createdById === user.id
+          ? ""
+          : t(`by {{ name }}`, { name: user.name })}
+      </Text>
+    </>
+  );
+
+  return (
+    <ListItem
+      key={oauthClient.id}
+      image={
+        <Avatar
+          model={oauthClient}
+          size={AvatarSize.Large}
+          variant={AvatarVariant.Square}
+        />
+      }
+      title={
+        <Link to={settingsPath("applications", oauthClient.id)}>
+          <Text>{oauthClient.name}</Text>
+        </Link>
+      }
+      subtitle={subtitle}
+      actions={<OAuthClientMenu oauthClient={oauthClient} />}
+    />
+  );
+};
+
+export default observer(OAuthClientListItem);
@@ -39,7 +39,7 @@ const Column = styled.div`
  flex: 1;

  &:first-child {
-    min-width: 70%;
+    min-width: 65%;
  }

  &:last-child {
@@ -186,6 +186,13 @@ export default class CollectionsStore extends Store<Collection> {
      statusFilter: [CollectionStatusFilter.Archived],
    });

+  get(id: string): Collection | undefined {
+    return (
+      this.data.get(id) ??
+      this.orderedData.find((collection) => id.endsWith(collection.urlId))
+    );
+  }
+
  @computed
  get archived(): Collection[] {
    return orderBy(this.orderedData, "archivedAt", "desc").filter(
@@ -279,19 +279,14 @@ export default class DocumentsStore extends Store<Document> {

  @action
  fetchBacklinks = async (documentId: string): Promise<void> => {
-    const res = await client.post(`/documents.list`, {
+    const documents = await this.fetchAll({
      backlinkDocumentId: documentId,
    });
-    invariant(res?.data, "Document list not available");
-    const { data } = res;

    runInAction("DocumentsStore#fetchBacklinks", () => {
-      data.forEach(this.add);
-      this.addPolicies(res.policies);
-
      this.backlinks.set(
        documentId,
-        data.map((doc: Partial<Document>) => doc.id)
+        documents.map((doc) => doc.id)
      );
    });
  };
@@ -300,8 +295,8 @@ export default class DocumentsStore extends Store<Document> {
    const documentIds = this.backlinks.get(documentId) || [];
    return orderBy(
      compact(documentIds.map((id) => this.data.get(id))),
-      "updatedAt",
-      "desc"
+      "title",
+      "asc"
    );
  }

@@ -10,6 +10,12 @@ class IntegrationsStore extends Store<Integration> {
    super(rootStore, Integration);
  }

+  findByService(service: string) {
+    return this.orderedData.find(
+      (integration) => integration.service === service
+    );
+  }
+
  @computed
  get orderedData(): Integration[] {
    return naturalSort(Array.from(this.data.values()), "name");
@@ -0,0 +1,11 @@
+import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
+import RootStore from "./RootStore";
+import Store from "./base/Store";
+
+export default class OAuthAuthenticationsStore extends Store<OAuthAuthentication> {
+  apiEndpoint = "oauthAuthentications";
+
+  constructor(rootStore: RootStore) {
+    super(rootStore, OAuthAuthentication);
+  }
+}
@@ -0,0 +1,11 @@
+import OAuthClient from "~/models/oauth/OAuthClient";
+import RootStore from "./RootStore";
+import Store from "./base/Store";
+
+export default class OAuthClientsStore extends Store<OAuthClient> {
+  apiEndpoint = "oauthClients";
+
+  constructor(rootStore: RootStore) {
+    super(rootStore, OAuthClient);
+  }
+}
@@ -18,6 +18,8 @@ import ImportsStore from "./ImportsStore";
 import IntegrationsStore from "./IntegrationsStore";
 import MembershipsStore from "./MembershipsStore";
 import NotificationsStore from "./NotificationsStore";
+import OAuthAuthenticationsStore from "./OAuthAuthenticationsStore";
+import OAuthClientsStore from "./OAuthClientsStore";
 import PinsStore from "./PinsStore";
 import PoliciesStore from "./PoliciesStore";
 import RevisionsStore from "./RevisionsStore";
@@ -49,6 +51,8 @@ export default class RootStore {
  integrations: IntegrationsStore;
  memberships: MembershipsStore;
  notifications: NotificationsStore;
+  oauthAuthentications: OAuthAuthenticationsStore;
+  oauthClients: OAuthClientsStore;
  presence: DocumentPresenceStore;
  pins: PinsStore;
  policies: PoliciesStore;
@@ -80,6 +84,8 @@ export default class RootStore {
    this.registerStore(IntegrationsStore);
    this.registerStore(MembershipsStore);
    this.registerStore(NotificationsStore);
+    this.registerStore(OAuthAuthenticationsStore, "oauthAuthentications");
+    this.registerStore(OAuthClientsStore, "oauthClients");
    this.registerStore(PinsStore);
    this.registerStore(PoliciesStore);
    this.registerStore(RevisionsStore);
@@ -110,8 +116,9 @@ export default class RootStore {
   */
  public getStoreForModelName<K extends keyof RootStore>(modelName: string) {
    const storeName = this.getStoreNameForModelName(modelName);
+    invariant(storeName, `No store found for model name "${modelName}"`);
+
    const store = this[storeName];
-    invariant(store, `No store found for model name "${modelName}"`);
    return store as RootStore[K];
  }

@@ -139,10 +146,24 @@ export default class RootStore {
    // @ts-expect-error TS thinks we are instantiating an abstract class.
    const store = new StoreClass(this);
    const storeName = name ?? this.getStoreNameForModelName(store.modelName);
+    invariant(storeName, `No store found for model name "${store.modelName}"`);
+
    this[storeName] = store;
  }

  private getStoreNameForModelName(modelName: string) {
-    return pluralize(lowerFirst(modelName)) as keyof RootStore;
+    for (const key of Object.keys(this)) {
+      const store = this[key as keyof RootStore];
+      if (store && "modelName" in store && store.modelName === modelName) {
+        return key as keyof RootStore;
+      }
+    }
+
+    const storeName = pluralize(lowerFirst(modelName)) as keyof RootStore;
+    if (storeName) {
+      return storeName;
+    }
+
+    return undefined;
  }
 }
@@ -104,6 +104,9 @@ export default abstract class Store<T extends Model> {
          if ("deletedAt" in item && item.deletedAt) {
            return false;
          }
+          if ("archivedAt" in item && item.archivedAt) {
+            return false;
+          }
          return true;
        })
        .slice(0, options?.maxResults);
@@ -114,6 +117,9 @@ export default abstract class Store<T extends Model> {
        if ("deletedAt" in item && item.deletedAt) {
          return false;
        }
+        if ("archivedAt" in item && item.archivedAt) {
+          return false;
+        }
        if ("searchContent" in item) {
          const seachables =
            typeof item.searchContent === "string"
@@ -3,6 +3,7 @@ import sortBy from "lodash/sortBy";
 import { action, observable } from "mobx";
 import Team from "~/models/Team";
 import User from "~/models/User";
+import { LazyComponent } from "~/components/LazyLoad";
 import { useComputed } from "~/hooks/useComputed";
 import Logger from "./Logger";
 import isCloudHosted from "./isCloudHosted";
@@ -27,8 +28,10 @@ type PluginValueMap = {
    after?: string;
    /** The displayed icon of the plugin. */
    icon: React.ElementType;
-    /** The settings screen somponent, should be lazy loaded. */
-    component: React.LazyExoticComponent<React.ComponentType>;
+    /** The lazy loaded settings screen component. */
+    component: LazyComponent<React.ComponentType>;
+    /** The description that will show on the plugins card. */
+    description?: string;
    /** Whether the plugin is enabled in the current context. */
    enabled?: (team: Team, user: User) => boolean;
  };
@@ -27,8 +27,8 @@ export function trashPath(): string {
  return "/trash";
 }

-export function settingsPath(section?: string): string {
-  return "/settings" + (section ? `/${section}` : "");
+export function settingsPath(...args: string[]): string {
+  return "/settings" + (args.length > 0 ? `/${args.join("/")}` : "");
 }

 export function commentPath(document: Document, comment: Comment): string {
@@ -14,6 +14,7 @@
    "dev:backend": "NODE_ENV=development nodemon --exec \"yarn build:server && yarn dev\" -e js,ts,tsx --ignore *.test.ts --ignore data/ --ignore build/ --ignore app/ --ignore shared/editor --ignore server/migrations",
    "dev:watch": "NODE_ENV=development yarn concurrently -n backend,frontend \"yarn dev:backend\" \"yarn vite:dev\"",
    "lint": "eslint app server shared plugins",
+    "lint:changed": "git diff --name-only --diff-filter=ACMRTUXB | grep -E '\\.(js|jsx|ts|tsx)$' | xargs -r yarn eslint --fix",
    "prepare": "husky install",
    "postinstall": "yarn patch-package",
    "install-local-ssl": "node ./server/scripts/install-local-ssl.js",
@@ -48,18 +49,18 @@
    "> 0.25%, not dead"
  ],
  "dependencies": {
-    "@aws-sdk/client-s3": "3.787.0",
-    "@aws-sdk/lib-storage": "3.787.0",
-    "@aws-sdk/s3-presigned-post": "3.787.0",
-    "@aws-sdk/s3-request-presigner": "3.787.0",
-    "@aws-sdk/signature-v4-crt": "^3.787.0",
-    "@babel/core": "^7.26.10",
-    "@babel/plugin-proposal-decorators": "^7.25.9",
-    "@babel/plugin-transform-class-properties": "^7.25.9",
-    "@babel/plugin-transform-destructuring": "^7.25.9",
-    "@babel/plugin-transform-regenerator": "^7.27.0",
-    "@babel/preset-env": "^7.26.9",
-    "@babel/preset-react": "^7.26.3",
+    "@aws-sdk/client-s3": "3.812.0",
+    "@aws-sdk/lib-storage": "3.812.0",
+    "@aws-sdk/s3-presigned-post": "3.812.0",
+    "@aws-sdk/s3-request-presigner": "3.812.0",
+    "@aws-sdk/signature-v4-crt": "^3.812.0",
+    "@babel/core": "^7.27.1",
+    "@babel/plugin-proposal-decorators": "^7.27.1",
+    "@babel/plugin-transform-class-properties": "^7.27.1",
+    "@babel/plugin-transform-destructuring": "^7.27.1",
+    "@babel/plugin-transform-regenerator": "^7.27.1",
+    "@babel/preset-env": "^7.27.2",
+    "@babel/preset-react": "^7.27.1",
    "@benrbray/prosemirror-math": "^0.2.2",
    "@bull-board/api": "^6.7.10",
    "@bull-board/koa": "^6.7.10",
@@ -80,20 +81,21 @@
    "@joplin/turndown-plugin-gfm": "^1.0.49",
    "@juggle/resize-observer": "^3.4.0",
    "@linear/sdk": "^39.0.0",
+    "@node-oauth/oauth2-server": "^5.2.0",
    "@notionhq/client": "^2.3.0",
    "@octokit/auth-app": "^6.1.3",
    "@outlinewiki/koa-passport": "^4.2.1",
    "@outlinewiki/passport-azure-ad-oauth2": "^0.1.0",
    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-visually-hidden": "^1.2.0",
+    "@radix-ui/react-visually-hidden": "^1.2.2",
    "@renderlesskit/react": "^0.11.0",
    "@sentry/node": "^7.120.3",
    "@sentry/react": "^7.120.3",
-    "@tanstack/react-table": "^8.20.6",
+    "@tanstack/react-table": "^8.21.3",
    "@tanstack/react-virtual": "^3.13.6",
    "@tippyjs/react": "^4.2.6",
    "@types/form-data": "^2.5.2",
-    "@types/mailparser": "^3.4.5",
+    "@types/mailparser": "^3.4.6",
    "@types/sanitize-filename": "^1.6.3",
    "@vitejs/plugin-react": "^3.1.0",
    "addressparser": "^1.0.1",
@@ -140,7 +142,7 @@
    "jsdom": "^22.1.0",
    "jsonwebtoken": "^9.0.0",
    "jszip": "^3.10.1",
-    "katex": "^0.16.21",
+    "katex": "^0.16.22",
    "kbar": "0.1.0-beta.41",
    "koa": "^2.16.1",
    "koa-body": "^6.0.1",
@@ -174,7 +176,7 @@
    "passport-oauth2": "^1.8.0",
    "passport-slack-oauth2": "^1.2.0",
    "patch-package": "^7.0.2",
-    "pg": "^8.14.1",
+    "pg": "^8.15.6",
    "pg-tsquery": "^8.4.2",
    "pluralize": "^8.0.0",
    "png-chunks-extract": "^1.0.0",
@@ -196,20 +198,20 @@
    "query-string": "^7.1.3",
    "randomstring": "1.3.1",
    "rate-limiter-flexible": "^2.4.2",
-    "react": "^17.0.2",
+    "react": "^18.2.0",
    "react-avatar-editor": "^13.0.2",
    "react-color": "^2.17.3",
    "react-day-picker": "^8.10.1",
    "react-dnd": "^16.0.1",
    "react-dnd-html5-backend": "^16.0.1",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.2.0",
    "react-dropzone": "^11.7.1",
    "react-helmet-async": "^2.0.5",
    "react-hook-form": "^7.54.2",
    "react-i18next": "^12.3.1",
-    "react-medium-image-zoom": "5.2.13",
+    "react-medium-image-zoom": "5.2.14",
    "react-merge-refs": "^2.1.1",
-    "react-portal": "^4.2.2",
+    "react-portal": "^4.3.0",
    "react-router-dom": "^5.3.4",
    "react-virtualized-auto-sizer": "^1.0.26",
    "react-waypoint": "^10.3.0",
@@ -227,6 +229,7 @@
    "sequelize": "^6.37.3",
    "sequelize-cli": "^6.6.2",
    "sequelize-encrypted": "^1.0.0",
+    "sequelize-strict-attributes": "^1.0.2",
    "sequelize-typescript": "^2.1.6",
    "slug": "^5.3.0",
    "slugify": "^1.6.6",
@@ -247,9 +250,9 @@
    "umzug": "^3.8.2",
    "utility-types": "^3.11.0",
    "uuid": "^8.3.2",
-    "validator": "13.12.0",
+    "validator": "13.15.0",
    "vaul": "^1.1.2",
-    "vite": "^6.3.3",
+    "vite": "^6.3.4",
    "vite-plugin-pwa": "^0.21.2",
    "winston": "^3.17.0",
    "ws": "^7.5.10",
@@ -261,11 +264,12 @@
    "zod": "^3.24.2"
  },
  "devDependencies": {
-    "@babel/cli": "^7.27.0",
-    "@babel/preset-typescript": "^7.27.0",
+    "@babel/cli": "^7.27.2",
+    "@babel/preset-typescript": "^7.27.1",
    "@faker-js/faker": "^8.4.1",
    "@relative-ci/agent": "^4.3.0",
-    "@testing-library/react": "^12.0.0",
+    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/react": "^14.0.0",
    "@types/addressparser": "^1.0.3",
    "@types/body-scroll-lock": "^3.1.2",
    "@types/crypto-js": "^4.2.2",
@@ -305,10 +309,10 @@
    "@types/png-chunks-extract": "^1.0.2",
    "@types/quoted-printable": "^1.0.2",
    "@types/randomstring": "^1.3.0",
-    "@types/react": "^17.0.34",
+    "@types/react": "^18.2.0",
    "@types/react-avatar-editor": "^13.0.4",
    "@types/react-color": "^3.0.13",
-    "@types/react-dom": "^17.0.11",
+    "@types/react-dom": "^18.2.0",
    "@types/react-helmet": "^6.1.11",
    "@types/react-portal": "^4.0.7",
    "@types/react-router-dom": "^5.3.3",
@@ -327,7 +331,7 @@
    "@types/tmp": "^0.2.6",
    "@types/turndown": "^5.0.5",
    "@types/utf8": "^3.0.3",
-    "@types/validator": "^13.12.1",
+    "@types/validator": "^13.15.0",
    "@types/yauzl": "^2.10.3",
    "@typescript-eslint/eslint-plugin": "^6.21.0",
    "@typescript-eslint/parser": "^6.21.0",
@@ -341,7 +345,7 @@
    "discord-api-types": "^0.37.119",
    "eslint": "^8.57.0",
    "eslint-config-prettier": "^8.10.0",
-    "eslint-import-resolver-typescript": "^3.8.0",
+    "eslint-import-resolver-typescript": "^3.10.1",
    "eslint-plugin-es": "^4.1.0",
    "eslint-plugin-import": "^2.31.0",
    "eslint-plugin-jsx-a11y": "^6.10.2",
@@ -356,10 +360,10 @@
    "jest-environment-jsdom": "^29.7.0",
    "jest-fetch-mock": "^3.0.3",
    "lint-staged": "^13.3.0",
-    "nodemon": "^3.1.9",
+    "nodemon": "^3.1.10",
    "postinstall-postinstall": "^2.1.0",
    "prettier": "^2.8.8",
-    "react-refresh": "^0.14.2",
+    "react-refresh": "^0.17.0",
    "rimraf": "^2.5.4",
    "rollup-plugin-webpack-stats": "^2.0.5",
    "terser": "^5.39.0",
@@ -377,6 +381,6 @@
    "qs": "6.9.7",
    "prismjs": "1.30.0"
  },
-  "version": "0.83.0",
+  "version": "0.84.0",
  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
@@ -1,5 +1,5 @@
 import Router from "koa-router";
-import { NotificationEventType } from "@shared/types";
+import { Client, NotificationEventType } from "@shared/types";
 import { parseDomain } from "@shared/utils/domains";
 import InviteAcceptedEmail from "@server/emails/templates/InviteAcceptedEmail";
 import SigninEmail from "@server/emails/templates/SigninEmail";
@@ -86,66 +86,64 @@ router.post(
  }
 );

-router.get(
-  "email.callback",
-  validate(T.EmailCallbackSchema),
-  async (ctx: APIContext<T.EmailCallbackReq>) => {
-    const { token, client, follow } = ctx.input.query;
+const emailCallback = async (ctx: APIContext<T.EmailCallbackReq>) => {
+  const token = ctx.input.query?.token || ctx.input.body?.token;
+  const client = ctx.input.query?.client || ctx.input.body?.client;
+  const follow = ctx.input.query?.follow || ctx.input.body?.follow;

-    // The link in the email does not include the follow query param, this
-    // is to help prevent anti-virus, and email clients from pre-fetching the link
-    // and spending the token before the user clicks on it. Instead we redirect
-    // to the same URL with the follow query param added from the client side.
-    if (!follow) {
-      return ctx.redirectOnClient(ctx.request.href + "&follow=true");
-    }
+  // The link in the email does not include the follow query param, this
+  // is to help prevent anti-virus, and email clients from pre-fetching the link
+  // and spending the token before the user clicks on it. Instead we redirect
+  // to the same URL with the follow query param added from the client side.
+  if (!follow) {
+    return ctx.redirectOnClient(ctx.request.href + "&follow=true", "POST");
+  }

-    let user!: User;
+  let user!: User;

-    try {
-      user = await getUserForEmailSigninToken(token as string);
-    } catch (err) {
-      ctx.redirect(`/?notice=expired-token`);
-      return;
-    }
+  try {
+    user = await getUserForEmailSigninToken(token as string);
+  } catch (err) {
+    ctx.redirect(`/?notice=expired-token`);
+    return;
+  }

-    if (!user.team.emailSigninEnabled) {
-      return ctx.redirect("/?notice=auth-error");
-    }
+  if (!user.team.emailSigninEnabled) {
+    return ctx.redirect("/?notice=auth-error");
+  }

-    if (user.isSuspended) {
-      return ctx.redirect("/?notice=user-suspended");
-    }
+  if (user.isSuspended) {
+    return ctx.redirect("/?notice=user-suspended");
+  }

-    if (user.isInvited) {
-      await new WelcomeEmail({
-        to: user.email,
-        role: user.role,
+  if (user.isInvited) {
+    await new WelcomeEmail({
+      to: user.email,
+      role: user.role,
+      teamUrl: user.team.url,
+    }).schedule();
+
+    const inviter = await user.$get("invitedBy");
+    if (inviter?.subscribedToEventType(NotificationEventType.InviteAccepted)) {
+      await new InviteAcceptedEmail({
+        to: inviter.email,
+        inviterId: inviter.id,
+        invitedName: user.name,
        teamUrl: user.team.url,
      }).schedule();
-
-      const inviter = await user.$get("invitedBy");
-      if (
-        inviter?.subscribedToEventType(NotificationEventType.InviteAccepted)
-      ) {
-        await new InviteAcceptedEmail({
-          to: inviter.email,
-          inviterId: inviter.id,
-          invitedName: user.name,
-          teamUrl: user.team.url,
-        }).schedule();
-      }
    }
-
-    // set cookies on response and redirect to team subdomain
-    await signIn(ctx, "email", {
-      user,
-      team: user.team,
-      isNewTeam: false,
-      isNewUser: false,
-      client,
-    });
  }
-);
+
+  // set cookies on response and redirect to team subdomain
+  await signIn(ctx, "email", {
+    user,
+    team: user.team,
+    isNewTeam: false,
+    isNewUser: false,
+    client: client ?? Client.Web,
+  });
+};
+router.get("email.callback", validate(T.EmailCallbackSchema), emailCallback);
+router.post("email.callback", validate(T.EmailCallbackSchema), emailCallback);

 export default router;
@@ -13,7 +13,12 @@ export type EmailReq = z.infer<typeof EmailSchema>;

 export const EmailCallbackSchema = BaseSchema.extend({
  query: z.object({
-    token: z.string(),
+    token: z.string().optional(),
+    client: z.nativeEnum(Client).default(Client.Web),
+    follow: z.string().default(""),
+  }),
+  body: z.object({
+    token: z.string().optional(),
    client: z.nativeEnum(Client).default(Client.Web),
    follow: z.string().default(""),
  }),
@@ -4,6 +4,7 @@ import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { IntegrationService } from "@shared/types";
 import { ConnectedButton } from "~/scenes/Settings/components/ConnectedButton";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import { AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
@@ -11,7 +12,6 @@ import List from "~/components/List";
 import ListItem from "~/components/List/Item";
 import Notice from "~/components/Notice";
 import PlaceholderText from "~/components/PlaceholderText";
-import Scene from "~/components/Scene";
 import TeamLogo from "~/components/TeamLogo";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
@@ -38,7 +38,7 @@ function GitHub() {
  }, [integrations]);

  return (
-    <Scene title="GitHub" icon={<GitHubIcon />}>
+    <IntegrationScene title="GitHub" icon={<GitHubIcon />}>
      <Heading>GitHub</Heading>

      {error === "access_denied" && (
@@ -146,7 +146,7 @@ function GitHub() {
          </Trans>
        </Notice>
      )}
-    </Scene>
+    </IntegrationScene>
  );
 }

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
    value: {
      group: "Integrations",
      icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Connect your GitHub account to Outline to enable rich, realtime, issue and pull request previews inside documents.",
+      component: createLazyComponent(() => import("./Settings")),
    },
  },
 ]);
@@ -6,12 +6,12 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import GoogleIcon from "~/components/Icons/GoogleIcon";
 import Input from "~/components/Input";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";

@@ -40,12 +40,6 @@ function GoogleAnalytics() {
    },
  });

-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Analytics,
-    });
-  }, [integrations]);
-
  React.useEffect(() => {
    reset({ measurementId: integration?.settings.measurementId });
  }, [integration, reset]);
@@ -75,7 +69,7 @@ function GoogleAnalytics() {
  );

  return (
-    <Scene title={t("Google Analytics")} icon={<GoogleIcon />}>
+    <IntegrationScene title={t("Google Analytics")} icon={<GoogleIcon />}>
      <Heading>{t("Google Analytics")}</Heading>

      <Text as="p" type="secondary">
@@ -100,7 +94,7 @@ function GoogleAnalytics() {
          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
        </Button>
      </form>
-    </Scene>
+    </IntegrationScene>
  );
 }

@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
    value: {
      group: "Integrations",
      icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Measure adoption and engagement by sending view and event analytics directly to your GA4 dashboard.",
+      component: createLazyComponent(() => import("./Settings")),
    },
  },
 ]);
@@ -1,5 +1,5 @@
 {
-  "id": "googleanalytics",
+  "id": "google-analytics",
  "name": "Google Analytics",
  "priority": 30,
  "description": "Adds support for reporting analytics to a Google."
@@ -1,4 +1,4 @@
-import * as React from "react";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -10,7 +10,9 @@ PluginManager.add([
    value: {
      group: "Integrations",
      icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Connect your Linear account to Outline to enable rich, realtime, issue previews inside documents.",
+      component: createLazyComponent(() => import("./Settings")),
    },
  },
 ]);
@@ -77,14 +77,14 @@ router.get(
      { transaction }
    );

-    if (workspace.logoUrl) {
-      transaction.afterCommit(async () => {
-        await UploadLinearWorkspaceLogoTask.schedule({
+    transaction.afterCommit(async () => {
+      if (workspace.logoUrl) {
+        await new UploadLinearWorkspaceLogoTask().schedule({
          integrationId: integration.id,
          logoUrl: workspace.logoUrl,
        });
-      });
-    }
+      }
+    });

    ctx.redirect(LinearUtils.successUrl());
  }
@@ -6,11 +6,11 @@ import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import { IntegrationType, IntegrationService } from "@shared/types";
 import Integration from "~/models/Integration";
+import { IntegrationScene } from "~/scenes/Settings/components/IntegrationScene";
 import SettingRow from "~/scenes/Settings/components/SettingRow";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
-import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 import Icon from "./Icon";
@@ -42,12 +42,6 @@ function Matomo() {
    },
  });

-  React.useEffect(() => {
-    void integrations.fetchPage({
-      type: IntegrationType.Analytics,
-    });
-  }, [integrations]);
-
  React.useEffect(() => {
    reset({
      measurementId: integration?.settings.measurementId,
@@ -82,7 +76,7 @@ function Matomo() {
  );

  return (
-    <Scene title="Matomo" icon={<Icon />}>
+    <IntegrationScene title="Matomo" icon={<Icon />}>
      <Heading>Matomo</Heading>

      <Text as="p" type="secondary">
@@ -121,7 +115,7 @@ function Matomo() {
          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
        </Button>
      </form>
-    </Scene>
+    </IntegrationScene>
  );
 }

@@ -1,5 +1,5 @@
-import * as React from "react";
 import { UserRole } from "@shared/types";
+import { createLazyComponent } from "~/components/LazyLoad";
 import { Hook, PluginManager } from "~/utils/PluginManager";
 import config from "../plugin.json";
 import Icon from "./Icon";
@@ -11,7 +11,9 @@ PluginManager.add([
    value: {
      group: "Integrations",
      icon: Icon,
-      component: React.lazy(() => import("./Settings")),
+      description:
+        "Track your docs with a self-hosted, open-source analytics platform, link Outline to Matomo for 100% data ownership, GDPR compliance, and deep usage insights on your own servers.",
+      component: createLazyComponent(() => import("./Settings")),
      enabled: (_, user) => user.role === UserRole.Admin,
    },
  },
@@ -66,6 +66,6 @@ export class NotionImportsProcessor extends ImportsProcessor<IntegrationService.
  protected async scheduleTask(
    importTask: ImportTask<IntegrationService.Notion>
  ): Promise<void> {
-    await NotionAPIImportTask.schedule({ importTaskId: importTask.id });
+    await new NotionAPIImportTask().schedule({ importTaskId: importTask.id });
  }
 }
@@ -77,7 +77,7 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
  protected async scheduleNextTask(
    importTask: ImportTask<IntegrationService.Notion>
  ) {
-    await NotionAPIImportTask.schedule({ importTaskId: importTask.id });
+    await new NotionAPIImportTask().schedule({ importTaskId: importTask.id });
    return;
  }

--- a/Show More
+++ b/Show More