test

.env.sample

@@ -1,80 +1,48 @@
+# –––––––––––––––– REQUIRED ––––––––––––––––
+
 NODE_ENV=production
 
-# This URL should point to the fully qualified, publicly accessible, URL. If using a
-# proxy this will be the proxy's URL.
-URL=
+# 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
 
-# The port to expose the Outline server on, this should match what is configured
-# in your docker-compose.yml
+# 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.
+URL=
 PORT=3000
 
 # See [documentation](docs/SERVICES.md) on running a separate collaboration
 # server, for normal operation this does not need to be set.
 COLLABORATION_URL=
 
-# 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" 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
+# For "local", the avatar images and document attachments will be saved on local disk. 
 FILE_STORAGE=local
 
 # If "local" is configured for FILE_STORAGE above, then this sets the parent directory under
-# which all attachments/images are stored. Make sure that the process has permissions to
-# create this path and also to write files to it.
+# which all attachments/images go. Make sure that the process has permissions to create
+# this path and also to write files to it.
 FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
 
 # Maximum allowed size for the uploaded attachment.
@@ -88,8 +56,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
@@ -99,55 +67,38 @@ AWS_S3_UPLOAD_BUCKET_NAME=bucket_name_here
 AWS_S3_FORCE_PATH_STYLE=true
 AWS_S3_ACL=private
 
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––––––––  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  ––––––––––
-# ––––––––––––––––––––––––––––––––––––––
+# –––––––––––––– AUTHENTICATION ––––––––––––––
 
 # Third party signin credentials, at least ONE OF EITHER Google, Slack,
-# Discord, or Microsoft is required for a working installation or you'll
-# have no sign-in options.
+# or Microsoft is required for a working installation or you'll have no sign-in
+# options.
 
-# Slack sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-sgMujR8J9J
+# 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_CLIENT_ID=get_a_key_from_slack
 SLACK_CLIENT_SECRET=get_the_secret_of_above_key
 
-# Google sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/google-hOuvtCmTqQ
+# 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_CLIENT_ID=
 GOOGLE_CLIENT_SECRET=
 
-# Microsoft Entra / Azure AD sign-in provider
-# DOCS: https://docs.getoutline.com/s/hosting/doc/microsoft-entra-UVz6jsIOcv
+# 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
 AZURE_CLIENT_ID=
 AZURE_CLIENT_SECRET=
 AZURE_RESOURCE_APP_ID=
 
-# 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
+# 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
 OIDC_CLIENT_ID=
 OIDC_CLIENT_SECRET=
 OIDC_AUTH_URI=
@@ -165,54 +116,79 @@ OIDC_DISPLAY_NAME=OpenID Connect
 # Space separated auth scopes.
 OIDC_SCOPES=openid profile email
 
-
-# ––––––––––––––––––––––––––––––––––––––
-# ––––––––––––––  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
+# To configure the GitHub integration, you'll need to create a GitHub App at
+# => https://github.com/settings/apps
+#
+# When configuring the Client ID, add a redirect URL under "Permissions & events":
+# https://<URL>/api/github.callback
 GITHUB_CLIENT_ID=
 GITHUB_CLIENT_SECRET=
 GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
-# 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 in addition to Slack authentication:
-# DOCS: https://docs.getoutline.com/s/hosting/doc/slack-G2mc8DOJHk
+# following configs are also needed, some more details
+# => https://wiki.generaloutline.com/share/be25efd1-b3ef-4450-b8e5-c4a4fc11e02a
+#
 SLACK_VERIFICATION_TOKEN=your_token
 SLACK_APP_ID=A0XXXXXXX
 SLACK_MESSAGE_ACTIONS=true
@@ -222,34 +198,29 @@ SLACK_MESSAGE_ACTIONS=true
 DROPBOX_APP_KEY=
 
 # Optionally enable Sentry (sentry.io) to track errors and performance,
-# DOCS: https://docs.getoutline.com/s/hosting/doc/sentry-jxcFttcDl5
+# and optionally add a Sentry proxy tunnel for bypassing ad blockers in the UI:
+# https://docs.sentry.io/platforms/javascript/troubleshooting/#using-the-tunnel-option)
 SENTRY_DSN=
 SENTRY_TUNNEL=
 
-# Enable importing pages from a Notion workspace
-# DOCS: https://docs.getoutline.com/s/hosting/doc/notion-2v6g7WY3l3
-NOTION_CLIENT_ID=
-NOTION_CLIENT_SECRET=
+# 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=
 
-# 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
+# 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
 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

.eslintrc

@@ -65,7 +65,7 @@
     ],
     "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
     "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
-    "lodash/import-scope": ["error", "method"],
+    "lodash/import-scope": ["warn", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,

.github/workflows/auto_close_prs.yml

@@ -1,59 +0,0 @@
-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.'
-                });
-              }
-            }

.github/workflows/ci.yml

@@ -63,7 +63,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       server: ${{ steps.filter.outputs.server }}
-      app: ${{ steps.filter.outputs.app }}
     steps:
       - uses: actions/checkout@v4
       - uses: dorny/paths-filter@v2
@@ -82,7 +81,7 @@ jobs:
               - 'yarn.lock'
 
   test:
-    needs: [build, changes]
+    needs: build
     if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     strategy:
@@ -144,8 +143,8 @@ jobs:
         yarn test --maxWorkers=2 $TESTFILES
 
   bundle-size:
-    needs: [build, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
+    needs: [build, types]
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
@@ -162,4 +161,3 @@ jobs:
       with:
         key: ${{ secrets.RELATIVE_CI_KEY }}
         token: ${{ secrets.GITHUB_TOKEN }}
-        webpackStatsFile: ./build/app/webpack-stats.json

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.84.0
+Licensed Work:        Outline 0.83.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-05-11
+Change Date:          2029-04-11
 
 Change License:       Apache License, Version 2.0
 

app/actions/definitions/oauthClients.tsx

@@ -1,25 +0,0 @@
-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} />,
-    });
-  },
-});

app/actions/definitions/teams.tsx

@@ -11,7 +11,7 @@ import { ActionContext } from "~/types";
 import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";
 
-export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
+export const createTeamsList = ({ 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: switchTeamsList,
+  children: createTeamsList,
 });
 
 export const createTeam = createAction({

app/components/Avatar/Avatar.tsx

@@ -13,11 +13,6 @@ export enum AvatarSize {
   Upload = 64,
 }
 
-export enum AvatarVariant {
-  Round = "round",
-  Square = "square",
-}
-
 export interface IAvatar {
   avatarUrl: string | null;
   color?: string;
@@ -28,8 +23,6 @@ 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. */
@@ -45,14 +38,14 @@ type Props = {
 };
 
 function Avatar(props: Props) {
-  const { model, style, variant = AvatarVariant.Round, ...rest } = props;
+  const { model, style, ...rest } = props;
   const src = props.src || model?.avatarUrl;
   const [error, handleError] = useBoolean(false);
 
   return (
-    <Relative style={style} $variant={variant} $size={props.size}>
+    <Relative style={style}>
       {src && !error ? (
-        <Image onError={handleError} src={src} {...rest} />
+        <CircleImg onError={handleError} src={src} {...rest} />
       ) : model ? (
         <Initials color={model.color} {...rest}>
           {model.initial}
@@ -68,19 +61,19 @@ Avatar.defaultProps = {
   size: AvatarSize.Medium,
 };
 
-const Relative = styled.div<{ $variant: AvatarVariant; $size: AvatarSize }>`
+const Relative = styled.div`
   position: relative;
   user-select: none;
   flex-shrink: 0;
-  border-radius: ${(props) =>
-    props.$variant === AvatarVariant.Round ? "50%" : `${props.$size / 8}px`};
-  overflow: hidden;
 `;
 
-const Image = styled.img<{ size: number }>`
+const CircleImg = styled.img<{ size: number }>`
   display: block;
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
+  border-radius: 50%;
+  flex-shrink: 0;
+  overflow: hidden;
 `;
 
 export default Avatar;

app/components/Avatar/Initials.tsx

@@ -13,6 +13,7 @@ const Initials = styled(Flex)<{
 }>`
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
   width: 100%;
   height: 100%;
   color: ${(props) =>
@@ -22,6 +23,7 @@ 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

app/components/Collection/CollectionForm.tsx

@@ -1,4 +1,3 @@
-import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
@@ -15,15 +14,13 @@ 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 = createLazyComponent(() => import("~/components/IconPicker"));
+const IconPicker = React.lazy(() => import("~/components/IconPicker"));
 
 export interface FormData {
   name: string;
@@ -33,26 +30,6 @@ 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,
@@ -65,7 +42,11 @@ export const CollectionForm = observer(function CollectionForm_({
 
   const [hasOpenedIconPicker, setHasOpenedIconPicker] = useBoolean(false);
 
-  const iconColor = useIconColor(collection);
+  const iconColor = React.useMemo(
+    () => collection?.color ?? randomElement(colorPalette),
+    [collection?.color]
+  );
+
   const fallbackIcon = <Icon value="collection" color={iconColor} />;
 
   const {
@@ -89,11 +70,6 @@ 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.
@@ -208,7 +184,7 @@ export const CollectionForm = observer(function CollectionForm_({
   );
 });
 
-const StyledIconPicker = styled(IconPicker.Component)`
+const StyledIconPicker = styled(IconPicker)`
   margin-left: 4px;
   margin-right: 4px;
 `;

app/components/CollectionDescription.tsx

@@ -6,18 +6,15 @@ 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 { Properties } from "~/types";
+import Text from "./Text";
 
 const extensions = withUIExtensions(richExtensions);
 
@@ -25,8 +22,8 @@ type Props = {
   collection: Collection;
 };
 
-function Overview({ collection }: Props) {
-  const { documents, collections } = useStores();
+function CollectionDescription({ collection }: Props) {
+  const { collections } = useStores();
   const { t } = useTranslation();
   const user = useCurrentUser({ rejectOnEmpty: true });
   const can = usePolicy(collection);
@@ -57,24 +54,6 @@ function Overview({ 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 />}
@@ -86,11 +65,11 @@ function Overview({ collection }: Props) {
             placeholder={`${t("Add a description")}…`}
             extensions={extensions}
             maxLength={CollectionValidation.maxDescriptionLength}
-            onCreateLink={onCreateLink}
             canUpdate={can.update}
             readOnly={!can.update}
             userId={user.id}
             editorStyle={editorStyle}
+            embedsDisabled
           />
           <div ref={childRef} />
         </React.Suspense>
@@ -105,4 +84,4 @@ const Placeholder = styled(Text)`
   min-height: 27px;
 `;
 
-export default observer(Overview);
+export default observer(CollectionDescription);

app/components/ContextMenu/Template.tsx

@@ -138,7 +138,7 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               as={Link}
               id={`${item.title}-${index}`}
               to={item.to}
-              key={`${item.type}-${item.title}-${index}`}
+              key={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={`${item.type}-${item.title}-${index}`}
+              key={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={`${item.type}-${item.title}-${index}`}
+              key={index}
               icon={showIcons !== false ? item.icon : undefined}
               {...menu}
             >
@@ -185,25 +185,18 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
           );
 
           return item.tooltip ? (
-            <Tooltip
-              content={item.tooltip}
-              placement={"bottom"}
-              key={`tooltip-${item.title}-${index}`}
-            >
+            <Tooltip content={item.tooltip} placement={"bottom"}>
               <div>{menuItem}</div>
             </Tooltip>
           ) : (
-            <React.Fragment key={`${item.type}-${item.title}-${index}`}>
-              {menuItem}
-            </React.Fragment>
+            <>{menuItem}</>
           );
         }
 
         if (item.type === "submenu") {
-          // Skip rendering empty submenus
-          return item.items.length > 0 ? (
+          return (
             <BaseMenuItem
-              key={`${item.type}-${item.title}-${index}`}
+              key={index}
               as={SubMenu}
               id={`${item.title}-${index}`}
               templateItems={item.items}
@@ -216,17 +209,15 @@ function Template({ items, actions, context, showIcons, ...menu }: Props) {
               }
               {...menu}
             />
-          ) : null;
+          );
         }
 
         if (item.type === "separator") {
-          return <Separator key={`separator-${index}`} />;
+          return <Separator key={index} />;
         }
 
         if (item.type === "heading") {
-          return (
-            <Header key={`heading-${item.title}-${index}`}>{item.title}</Header>
-          );
+          return <Header key={index}>{item.title}</Header>;
         }
 
         const _exhaustiveCheck: never = item;

app/components/DocumentBreadcrumb.tsx

@@ -18,13 +18,6 @@ type Props = {
   children?: React.ReactNode;
   document: Document;
   onlyText?: boolean;
-  reverse?: boolean;
-  /**
-   * Maximum number of items to show in the breadcrumb.
-   * If value is less than or equals to 0, no items will be shown.
-   * If value is undefined, all items will be shown.
-   */
-  maxDepth?: number;
 };
 
 function useCategory(document: Document): MenuInternalLink | null {
@@ -61,7 +54,7 @@ function useCategory(document: Document): MenuInternalLink | null {
 }
 
 function DocumentBreadcrumb(
-  { document, children, onlyText, reverse = false, maxDepth }: Props,
+  { document, children, onlyText }: Props,
   ref: React.RefObject<HTMLDivElement> | null
 ) {
   const { collections } = useStores();
@@ -72,7 +65,6 @@ function DocumentBreadcrumb(
     ? collections.get(document.collectionId)
     : undefined;
   const can = usePolicy(collection);
-  const depth = maxDepth === undefined ? undefined : Math.max(0, maxDepth);
 
   React.useEffect(() => {
     void document.loadRelations({ withoutPolicies: true });
@@ -99,23 +91,20 @@ function DocumentBreadcrumb(
     };
   }
 
-  const path = document.pathTo.slice(0, -1);
+  const path = document.pathTo;
 
   const items = React.useMemo(() => {
-    const output: MenuInternalLink[] = [];
-
-    if (depth === 0) {
-      return output;
-    }
+    const output = [];
 
     if (category) {
       output.push(category);
     }
+
     if (collectionNode) {
       output.push(collectionNode);
     }
 
-    path.forEach((node: NavigationNode) => {
+    path.slice(0, -1).forEach((node: NavigationNode) => {
       const title = node.title || t("Untitled");
       output.push({
         type: "route",
@@ -132,43 +121,21 @@ function DocumentBreadcrumb(
         },
       });
     });
-
-    return reverse
-      ? depth !== undefined
-        ? output.slice(-depth)
-        : output
-      : depth !== undefined
-      ? output.slice(0, depth)
-      : output;
-  }, [t, path, category, sidebarContext, collectionNode, reverse, depth]);
+    return output;
+  }, [t, path, category, sidebarContext, collectionNode]);
 
   if (!collections.isLoaded) {
     return null;
   }
 
-  if (onlyText) {
-    if (depth === 0) {
-      return <></>;
-    }
-
-    const slicedPath = reverse
-      ? path.slice(depth && -depth)
-      : path.slice(0, depth);
-
-    const showCollection =
-      collection &&
-      (!reverse || depth === undefined || slicedPath.length < depth);
-
+  if (onlyText === true) {
     return (
       <>
-        {showCollection && collection.name}
-        {slicedPath.map((node: NavigationNode, index: number) => (
+        {collection?.name}
+        {path.slice(0, -1).map((node: NavigationNode) => (
           <React.Fragment key={node.id}>
-            {showCollection && <SmallSlash />}
+            <SmallSlash />
             {node.title || t("Untitled")}
-            {!showCollection && index !== slicedPath.length - 1 && (
-              <SmallSlash />
-            )}
           </React.Fragment>
         ))}
       </>

app/components/DocumentViews.tsx

@@ -46,10 +46,10 @@ function DocumentViews({ document, isOpen }: Props) {
   return (
     <>
       {isOpen && (
-        <PaginatedList<User>
+        <PaginatedList
           aria-label={t("Viewers")}
           items={users}
-          renderItem={(model) => {
+          renderItem={(model: User) => {
             const view = documentViews.find((v) => v.userId === model.id);
             const isPresent = presentIds.includes(model.id);
             const isEditing = editingIds.includes(model.id);

app/components/EditableTitle.tsx

@@ -64,12 +64,11 @@ 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;
       }
@@ -81,8 +80,6 @@ function EditableTitle(
         setValue(originalValue);
         toast.error(error.message);
         throw error;
-      } finally {
-        setIsEditing(false);
       }
     },
     [originalValue, value, onCancel, onSubmit]

app/components/FilterOptions.tsx

@@ -56,7 +56,7 @@ const FilterOptions = ({
     : "";
 
   const renderItem = React.useCallback(
-    (option) => (
+    (option: TFilterOption) => (
       <MenuItem
         key={option.key}
         onClick={() => {
@@ -174,7 +174,7 @@ const FilterOptions = ({
         )}
       </MenuButton>
       <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList<TFilterOption>
+        <PaginatedList
           listRef={listRef}
           options={{ query, ...fetchQueryOptions }}
           items={filteredOptions}

app/components/HoverPreview/Components.tsx

@@ -2,6 +2,7 @@ import { transparentize } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
+import { getTextColor } from "@shared/utils/color";
 import Text from "~/components/Text";
 
 export const CARD_MARGIN = 10;
@@ -32,7 +33,7 @@ export const Title = styled(Text).attrs({ as: "h2", size: "large" })`
   display: flex;
   align-items: flex-start;
   justify-content: flex-start;
-  gap: 6px;
+  gap: 4px;
 `;
 
 export const Info = styled(StyledText).attrs(() => ({
@@ -59,27 +60,15 @@ export const Thumbnail = styled.img`
 export const Label = styled(Text).attrs({ size: "xsmall", weight: "bold" })<{
   color?: string;
 }>`
-  border: 1px solid ${(props) => props.theme.divider};
+  background-color: ${(props) =>
+    props.color ?? props.theme.backgroundSecondary};
+  color: ${(props) =>
+    props.color ? getTextColor(props.color) : props.theme.text};
   width: fit-content;
   border-radius: 2em;
-  padding: 1px 8px 1px 20px;
+  padding: 0 8px;
   margin-right: 0.5em;
   margin-top: 0.5em;
-  position: relative;
-  flex-shrink: 0;
-
-  &::after {
-    content: "";
-    position: absolute;
-    left: 8px;
-    top: 50%;
-    transform: translateY(-50%);
-    width: 6px;
-    height: 6px;
-    border-radius: 50%;
-    background-color: ${(props) =>
-      props.color || props.theme.backgroundSecondary};
-  }
 `;
 
 export const CardContent = styled.div`

app/components/HoverPreview/HoverPreviewIssue.tsx

@@ -1,15 +1,9 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
-import styled from "styled-components";
-import { Backticks } from "@shared/components/Backticks";
-import { IssueStatusIcon } from "@shared/components/IssueStatusIcon";
-import {
-  IntegrationService,
-  UnfurlResourceType,
-  UnfurlResponse,
-} from "@shared/types";
+import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { IssueStatusIcon } from "../Icons/IssueStatusIcon";
 import Text from "../Text";
 import Time from "../Time";
 import {
@@ -29,11 +23,6 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
   ref: React.Ref<HTMLDivElement>
 ) {
   const authorName = author.name;
-  const urlObj = new URL(url);
-  const service =
-    urlObj.hostname === "github.com"
-      ? IntegrationService.GitHub
-      : IntegrationService.Linear;
 
   return (
     <Preview as="a" href={url} target="_blank" rel="noopener noreferrer">
@@ -42,18 +31,13 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
           <CardContent>
             <Flex gap={2} column>
               <Title>
-                <StyledIssueStatusIcon
-                  service={service}
-                  state={state}
-                  size={18}
-                />
+                <IssueStatusIcon status={state.name} color={state.color} />
                 <span>
-                  <Backticks content={title} />
-                  &nbsp;<Text type="tertiary">{id}</Text>
+                  {title}&nbsp;<Text type="tertiary">{id}</Text>
                 </span>
               </Title>
-              <Flex align="center" gap={6}>
-                <Avatar src={author.avatarUrl} size={18} />
+              <Flex align="center" gap={4}>
+                <Avatar src={author.avatarUrl} />
                 <Info>
                   <Trans>
                     {{ authorName }} created{" "}
@@ -78,8 +62,4 @@ const HoverPreviewIssue = React.forwardRef(function _HoverPreviewIssue(
   );
 });
 
-const StyledIssueStatusIcon = styled(IssueStatusIcon)`
-  margin-top: 2px;
-`;
-
 export default HoverPreviewIssue;

app/components/HoverPreview/HoverPreviewPullRequest.tsx

@@ -1,11 +1,9 @@
 import * as React from "react";
 import { Trans } from "react-i18next";
-import styled from "styled-components";
-import { Backticks } from "@shared/components/Backticks";
-import { PullRequestIcon } from "@shared/components/PullRequestIcon";
 import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
 import { Avatar } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import { PullRequestIcon } from "../Icons/PullRequestIcon";
 import Text from "../Text";
 import Time from "../Time";
 import {
@@ -33,14 +31,13 @@ const HoverPreviewPullRequest = React.forwardRef(
             <CardContent>
               <Flex gap={2} column>
                 <Title>
-                  <StyledPullRequestIcon size={18} state={state} />
+                  <PullRequestIcon status={state.name} color={state.color} />
                   <span>
-                    <Backticks content={title} />
-                    &nbsp;<Text type="tertiary">{id}</Text>
+                    {title}&nbsp;<Text type="tertiary">{id}</Text>
                   </span>
                 </Title>
-                <Flex align="center" gap={6}>
-                  <Avatar src={author.avatarUrl} size={18} />
+                <Flex align="center" gap={4}>
+                  <Avatar src={author.avatarUrl} />
                   <Info>
                     <Trans>
                       {{ authorName }} opened{" "}
@@ -58,8 +55,4 @@ const HoverPreviewPullRequest = React.forwardRef(
   }
 );
 
-const StyledPullRequestIcon = styled(PullRequestIcon)`
-  margin-top: 2px;
-`;
-
 export default HoverPreviewPullRequest;

app/components/IconPicker/index.tsx

@@ -45,7 +45,6 @@ type Props = {
   onChange: (icon: string | null, color: string | null) => void;
   onOpen?: () => void;
   onClose?: () => void;
-  children?: React.ReactNode;
 };
 
 const IconPicker = ({
@@ -60,7 +59,6 @@ const IconPicker = ({
   onOpen,
   onClose,
   borderOnHover,
-  children,
 }: Props) => {
   const { t } = useTranslation();
 
@@ -176,9 +174,7 @@ const IconPicker = ({
             onClick={handlePopoverButtonClick}
             $borderOnHover={borderOnHover}
           >
-            {children ? (
-              children
-            ) : iconType && icon ? (
+            {iconType && icon ? (
               <Icon value={icon} color={color} size={size} initial={initial} />
             ) : (
               <StyledSmileyIcon color={theme.placeholder} size={size} />

app/components/Icons/IssueStatusIcon.tsx

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

app/components/Icons/PullRequestIcon.tsx

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

app/components/LazyLoad.ts

@@ -1,47 +0,0 @@
-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,
-  };
-}

app/components/Modal.tsx

@@ -114,8 +114,6 @@ const Modal: React.FC<Props> = ({
                 <Small {...props}>
                   <Centered
                     onClick={(ev) => ev.stopPropagation()}
-                    // maxHeight needed for proper overflow behavior in Safari
-                    style={{ maxHeight: "65vh" }}
                     column
                     reverse
                   >
@@ -261,7 +259,6 @@ const Small = styled.div`
   width: 75vw;
   min-width: 350px;
   max-width: 450px;
-  max-height: 65vh;
   z-index: ${depths.modal};
   display: flex;
   justify-content: center;

app/components/Notifications/Notifications.tsx

@@ -79,11 +79,11 @@ function Notifications(
         </Header>
         <React.Suspense fallback={null}>
           <Scrollable ref={ref} flex topShadow>
-            <PaginatedList<Notification>
+            <PaginatedList
               fetch={notifications.fetchPage}
               options={{ archived: false }}
               items={isOpen ? notifications.orderedData : undefined}
-              renderItem={(item) => (
+              renderItem={(item: Notification) => (
                 <NotificationListItem
                   key={item.id}
                   notification={item}

app/components/OAuthClient/OAuthClientForm.tsx

@@ -1,142 +0,0 @@
-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>
-  );
-});

app/components/OAuthClient/OAuthClientNew.tsx

@@ -1,33 +0,0 @@
-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} />;
-});

app/components/PaginatedDocumentList.tsx

@@ -10,7 +10,7 @@ type Props = {
   fetch: (options: any) => Promise<Document[] | undefined>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
-  empty?: JSX.Element;
+  empty?: React.ReactNode;
   showParentDocuments?: boolean;
   showCollection?: boolean;
   showPublished?: boolean;
@@ -34,7 +34,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
   const { t } = useTranslation();
 
   return (
-    <PaginatedList<Document>
+    <PaginatedList
       aria-label={t("Documents")}
       items={documents}
       empty={empty}
@@ -42,7 +42,7 @@ const PaginatedDocumentList = React.memo<Props>(function PaginatedDocumentList({
       fetch={fetch}
       options={options}
       renderError={(props) => <Error {...props} />}
-      renderItem={(item, _index) => (
+      renderItem={(item: Document, _index) => (
         <DocumentListItem
           key={item.id}
           document={item}

app/components/PaginatedEventList.tsx

@@ -10,7 +10,7 @@ type Props = {
   fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
-  empty?: JSX.Element;
+  empty?: React.ReactNode;
 };
 
 const PaginatedEventList = React.memo<Props>(function PaginatedEventList({

app/components/PaginatedList.test.tsx

@@ -1,15 +1,13 @@
 import "../stores";
 import { render } from "@testing-library/react";
 import { TFunction } from "i18next";
-import { Provider } from "mobx-react";
 import * as React from "react";
 import { getI18n } from "react-i18next";
 import { Pagination } from "@shared/constants";
-import PaginatedList from "./PaginatedList";
+import { Component as PaginatedList } from "./PaginatedList";
 
 describe("PaginatedList", () => {
   const i18n = getI18n();
-  const authStore = {};
 
   const props = {
     i18n,
@@ -19,23 +17,19 @@ describe("PaginatedList", () => {
 
   it("with no items renders nothing", () => {
     const result = render(
-      <Provider auth={authStore}>
-        <PaginatedList items={[]} renderItem={render} {...props} />
-      </Provider>
+      <PaginatedList items={[]} renderItem={render} {...props} />
     );
     expect(result.container.innerHTML).toEqual("");
   });
 
   it("with no items renders empty prop", async () => {
     const result = render(
-      <Provider auth={authStore}>
-        <PaginatedList
-          items={[]}
-          empty={<p>Sorry, no results</p>}
-          renderItem={render}
-          {...props}
-        />{" "}
-      </Provider>
+      <PaginatedList
+        items={[]}
+        empty={<p>Sorry, no results</p>}
+        renderItem={render}
+        {...props}
+      />
     );
     await expect(
       result.findAllByText("Sorry, no results")
@@ -48,15 +42,13 @@ describe("PaginatedList", () => {
       id: "one",
     };
     render(
-      <Provider auth={authStore}>
-        <PaginatedList
-          items={[]}
-          fetch={fetch}
-          options={options}
-          renderItem={render}
-          {...props}
-        />{" "}
-      </Provider>
+      <PaginatedList
+        items={[]}
+        fetch={fetch}
+        options={options}
+        renderItem={render}
+        {...props}
+      />
     );
     expect(fetch).toHaveBeenCalledWith({
       ...options,

app/components/PaginatedList.tsx

@@ -1,315 +1,265 @@
 import isEqual from "lodash/isEqual";
+import { observable, action, computed } from "mobx";
+import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
+import { withTranslation, WithTranslation } from "react-i18next";
 import { Waypoint } from "react-waypoint";
 import { Pagination } from "@shared/constants";
+import RootStore from "~/stores/RootStore";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DelayedMount from "~/components/DelayedMount";
 import PlaceholderList from "~/components/List/Placeholder";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import usePrevious from "~/hooks/usePrevious";
+import withStores from "~/components/withStores";
 import { dateToHeading } from "~/utils/date";
 
-/**
- * Base interface for items that can be paginated
- * @interface PaginatedItem
- */
 export interface PaginatedItem {
-  /** Unique identifier for the item */
   id?: string;
-  /** Last update timestamp of the item */
   updatedAt?: string;
-  /** Creation timestamp of the item */
   createdAt?: string;
 }
 
-/**
- * Props for the PaginatedList component
- * @template T Type of items in the list, must extend PaginatedItem
- */
-interface Props<T extends PaginatedItem>
-  extends React.HTMLAttributes<HTMLDivElement> {
-  /**
-   * Function to fetch paginated data. Should return a promise resolving to an array of items
-   * @param options Pagination and other query options
-   */
-  fetch?: (
-    options: Record<string, any> | undefined
-  ) => Promise<unknown[] | undefined> | undefined;
+type Props<T> = WithTranslation &
+  RootStore &
+  React.HTMLAttributes<HTMLDivElement> & {
+    fetch?: (
+      options: Record<string, any> | undefined
+    ) => Promise<T[] | undefined> | undefined;
+    options?: Record<string, any>;
+    heading?: React.ReactNode;
+    empty?: React.ReactNode;
+    loading?: React.ReactElement;
+    items?: T[];
+    className?: string;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    renderError?: (options: {
+      error: Error;
+      retry: () => void;
+    }) => React.ReactNode;
+    renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
+    onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
+    listRef?: React.RefObject<HTMLDivElement>;
+  };
 
-  /** Additional options to pass to the fetch function */
-  options?: Record<string, any>;
+@observer
+class PaginatedList<T extends PaginatedItem> extends React.PureComponent<
+  Props<T>
+> {
+  @observable
+  error?: Error;
 
-  /** Optional header content to display above the list */
-  heading?: React.ReactNode;
+  @observable
+  isFetchingMore = false;
 
-  /** Content to display when the list is empty */
-  empty?: JSX.Element | null;
+  @observable
+  isFetching = false;
 
-  /** Optional loading state content */
-  loading?: JSX.Element | null;
+  @observable
+  isFetchingInitial = !this.props.items?.length;
 
-  /** Array of items to display in the list */
-  items?: T[];
+  @observable
+  fetchCounter = 0;
 
-  /** CSS class name to apply to the list container */
-  className?: string;
+  @observable
+  renderCount = Pagination.defaultLimit;
 
-  /**
-   * Function to render each individual item in the list
-   * @param item The item to render
-   * @param index The index of the item in the list
-   */
-  renderItem: (item: T, index: number) => React.ReactNode;
+  @observable
+  offset = 0;
 
-  /**
-   * Function to render error state
-   * @param options Object containing error details and retry function
-   */
-  renderError?: (options: {
-    /** Details of the error */
-    error: Error;
-    /** Function to retry the fetch operation */
-    retry: () => void;
-  }) => JSX.Element;
+  @observable
+  allowLoadMore = true;
 
-  /**
-   * Function to render section headings (typically date-based)
-   * @param name The heading text or element to render
-   */
-  renderHeading?: (name: React.ReactElement<any> | string) => React.ReactNode;
+  componentDidMount() {
+    void this.fetchResults();
+  }
 
-  /**
-   * Handler for escape key press
-   * @param ev Keyboard event object
-   */
-  onEscape?: (ev: React.KeyboardEvent<HTMLDivElement>) => void;
+  componentDidUpdate(prevProps: Props<T>) {
+    if (
+      prevProps.fetch !== this.props.fetch ||
+      !isEqual(prevProps.options, this.props.options)
+    ) {
+      this.reset();
+      void this.fetchResults();
+    }
+  }
 
-  /** Reference to the list container element */
-  listRef?: React.RefObject<HTMLDivElement>;
-}
+  reset = () => {
+    this.offset = 0;
+    this.allowLoadMore = true;
+    this.renderCount = Pagination.defaultLimit;
+    this.isFetching = false;
+    this.isFetchingInitial = false;
+    this.isFetchingMore = false;
+  };
 
-/**
- * A reusable component that renders a paginated list with infinite scrolling
- * and optional date-based section headings.
- *
- * @template T Type of the list items, must extend PaginatedItem
- */
-const PaginatedList = <T extends PaginatedItem>({
-  fetch,
-  options,
-  heading,
-  empty = null,
-  loading = null,
-  items = [],
-  className,
-  renderItem,
-  renderError,
-  renderHeading,
-  onEscape,
-  listRef,
-  ...rest
-}: Props<T>): JSX.Element | null => {
-  const user = useCurrentUser({ rejectOnEmpty: false });
-  const { t } = useTranslation();
-
-  const [error, setError] = React.useState<Error | undefined>();
-  const [isFetchingMore, setIsFetchingMore] = React.useState(false);
-  const [isFetching, setIsFetching] = React.useState(false);
-  const [isFetchingInitial, setIsFetchingInitial] = React.useState(
-    !items?.length
-  );
-  const [fetchCounter, setFetchCounter] = React.useState(0);
-  const [renderCount, setRenderCount] = React.useState(Pagination.defaultLimit);
-  const [offset, setOffset] = React.useState(0);
-  const [allowLoadMore, setAllowLoadMore] = React.useState(true);
-
-  const reset = React.useCallback(() => {
-    setOffset(0);
-    setAllowLoadMore(true);
-    setRenderCount(Pagination.defaultLimit);
-    setIsFetching(false);
-    setIsFetchingInitial(false);
-    setIsFetchingMore(false);
-  }, []);
-
-  const fetchResults = React.useCallback(async () => {
-    if (!fetch) {
+  @action
+  fetchResults = async () => {
+    if (!this.props.fetch) {
       return;
     }
-
-    setIsFetching(true);
-    const counter = fetchCounter + 1;
-    setFetchCounter(counter);
-    const limit = options?.limit ?? Pagination.defaultLimit;
-    setError(undefined);
+    this.isFetching = true;
+    const counter = ++this.fetchCounter;
+    const limit = this.props.options?.limit ?? Pagination.defaultLimit;
+    this.error = undefined;
 
     try {
-      const results = await fetch({
+      const results = await this.props.fetch({
         limit,
-        offset,
-        ...options,
+        offset: this.offset,
+        ...this.props.options,
       });
 
-      if (offset !== 0) {
-        setRenderCount((prevCount) => prevCount + limit);
+      if (this.offset !== 0) {
+        this.renderCount += limit;
       }
 
       if (results && (results.length === 0 || results.length < limit)) {
-        setAllowLoadMore(false);
+        this.allowLoadMore = false;
       } else {
-        setOffset((prevOffset) => prevOffset + limit);
+        this.offset += limit;
       }
 
-      setIsFetchingInitial(false);
+      this.isFetchingInitial = false;
     } catch (err) {
-      setError(err);
+      this.error = err;
     } finally {
       // only the most recent fetch should end the loading state
-      if (counter >= fetchCounter) {
-        setIsFetching(false);
-        setIsFetchingMore(false);
+      if (counter >= this.fetchCounter) {
+        this.isFetching = false;
+        this.isFetchingMore = false;
       }
     }
-  }, [fetch, fetchCounter, offset, options]);
+  };
 
-  const loadMoreResults = React.useCallback(async () => {
-    // Don't paginate if there aren't more results or we're currently fetching
-    if (!allowLoadMore || isFetching) {
+  @action
+  loadMoreResults = async () => {
+    // Don't paginate if there aren't more results or we’re currently fetching
+    if (!this.allowLoadMore || this.isFetching) {
       return;
     }
-
     // If there are already cached results that we haven't yet rendered because
     // of lazy rendering then show another page.
-    const leftToRender = (items?.length ?? 0) - renderCount;
+    const leftToRender = (this.props.items?.length ?? 0) - this.renderCount;
 
     if (leftToRender > 0) {
-      setRenderCount((prevCount) => prevCount + Pagination.defaultLimit);
+      this.renderCount += Pagination.defaultLimit;
     }
 
     // If there are less than a pages results in the cache go ahead and fetch
     // another page from the server
     if (leftToRender <= Pagination.defaultLimit) {
-      setIsFetchingMore(true);
-      await fetchResults();
+      this.isFetchingMore = true;
+      await this.fetchResults();
     }
-  }, [allowLoadMore, isFetching, items?.length, renderCount, fetchResults]);
+  };
 
-  const prevFetch = usePrevious(fetch);
-  const prevOptions = usePrevious(options);
+  @computed
+  get itemsToRender() {
+    return this.props.items?.slice(0, this.renderCount) ?? [];
+  }
 
-  // Initial fetch on mount
-  React.useEffect(() => {
-    if (fetch) {
-      void fetchResults();
-    }
-  }, [fetch]);
+  render() {
+    const {
+      items = [],
+      heading,
+      auth,
+      empty = null,
+      renderHeading,
+      renderError,
+      onEscape,
+    } = this.props;
 
-  // Handle updates to fetch or options
-  React.useEffect(() => {
-    if (!prevFetch || !prevOptions) {
-      return; // Skip on initial mount since it's handled by the above effect
+    const showLoading =
+      this.isFetching &&
+      !this.isFetchingMore &&
+      (!items?.length || (this.fetchCounter <= 1 && this.isFetchingInitial));
+
+    if (showLoading) {
+      return (
+        this.props.loading || (
+          <DelayedMount>
+            <div className={this.props.className}>
+              <PlaceholderList count={5} />
+            </div>
+          </DelayedMount>
+        )
+      );
     }
 
-    if (prevFetch !== fetch || !isEqual(prevOptions, options)) {
-      reset();
-      void fetchResults();
+    if (items?.length === 0) {
+      if (this.error && renderError) {
+        return renderError({ error: this.error, retry: this.fetchResults });
+      }
+
+      return empty;
     }
-  }, [fetch, options, reset, fetchResults, prevFetch, prevOptions]);
 
-  // Computed property equivalent
-  const itemsToRender = React.useMemo(
-    () => items?.slice(0, renderCount) ?? [],
-    [items, renderCount]
-  );
-
-  const showLoading =
-    isFetching &&
-    !isFetchingMore &&
-    (!items?.length || (fetchCounter <= 1 && isFetchingInitial));
-
-  if (showLoading) {
     return (
-      loading || (
-        <DelayedMount>
-          <div className={className}>
-            <PlaceholderList count={5} />
+      <>
+        {heading}
+        <ArrowKeyNavigation
+          aria-label={this.props["aria-label"]}
+          onEscape={onEscape}
+          className={this.props.className}
+          items={this.itemsToRender}
+          ref={this.props.listRef}
+        >
+          {() => {
+            let previousHeading = "";
+            return this.itemsToRender.map((item, index) => {
+              const children = this.props.renderItem(item, index);
+
+              // If there is no renderHeading method passed then no date
+              // headings are rendered
+              if (!renderHeading) {
+                return children;
+              }
+
+              // Our models have standard date fields, updatedAt > createdAt.
+              // Get what a heading would look like for this item
+              const currentDate =
+                "updatedAt" in item && item.updatedAt
+                  ? item.updatedAt
+                  : "createdAt" in item && item.createdAt
+                  ? item.createdAt
+                  : previousHeading;
+              const currentHeading = dateToHeading(
+                currentDate,
+                this.props.t,
+                auth.user?.language
+              );
+
+              // If the heading is different to any previous heading then we
+              // should render it, otherwise the item can go under the previous
+              // heading
+              if (
+                children &&
+                (!previousHeading || currentHeading !== previousHeading)
+              ) {
+                previousHeading = currentHeading;
+                return (
+                  <React.Fragment
+                    key={"id" in item && item.id ? item.id : index}
+                  >
+                    {renderHeading(currentHeading)}
+                    {children}
+                  </React.Fragment>
+                );
+              }
+
+              return children;
+            });
+          }}
+        </ArrowKeyNavigation>
+        {this.allowLoadMore && (
+          <div style={{ height: "1px" }}>
+            <Waypoint key={this.renderCount} onEnter={this.loadMoreResults} />
           </div>
-        </DelayedMount>
-      )
+        )}
+      </>
     );
   }
+}
 
-  if (items?.length === 0) {
-    if (error && renderError) {
-      return renderError({ error, retry: fetchResults });
-    }
+export const Component = PaginatedList;
 
-    return empty;
-  }
-
-  return (
-    <React.Fragment>
-      {heading}
-      <ArrowKeyNavigation
-        aria-label={rest["aria-label"]}
-        onEscape={onEscape}
-        className={className}
-        items={itemsToRender}
-        ref={listRef}
-      >
-        {() => {
-          let previousHeading = "";
-          return itemsToRender.map((item, index) => {
-            const children = renderItem(item, index);
-
-            // If there is no renderHeading method passed then no date
-            // headings are rendered
-            if (!renderHeading) {
-              return children;
-            }
-
-            // Our models have standard date fields, updatedAt > createdAt.
-            // Get what a heading would look like for this item
-            const currentDate =
-              "updatedAt" in item && item.updatedAt
-                ? item.updatedAt
-                : "createdAt" in item && item.createdAt
-                ? item.createdAt
-                : previousHeading;
-            const currentHeading = dateToHeading(
-              currentDate,
-              t,
-              user?.language
-            );
-
-            // If the heading is different to any previous heading then we
-            // should render it, otherwise the item can go under the previous
-            // heading
-            if (
-              children &&
-              (!previousHeading || currentHeading !== previousHeading)
-            ) {
-              previousHeading = currentHeading;
-              return (
-                <React.Fragment key={"id" in item && item.id ? item.id : index}>
-                  {renderHeading(currentHeading)}
-                  {children}
-                </React.Fragment>
-              );
-            }
-
-            return children;
-          });
-        }}
-      </ArrowKeyNavigation>
-      {allowLoadMore && (
-        <div style={{ height: "1px" }}>
-          <Waypoint key={renderCount} onEnter={loadMoreResults} />
-        </div>
-      )}
-    </React.Fragment>
-  );
-};
-
-export default PaginatedList;
+export default withTranslation()(withStores(PaginatedList));

app/components/Reactions/ReactionPicker.tsx

@@ -4,7 +4,6 @@ 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";
@@ -13,7 +12,7 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useWindowSize from "~/hooks/useWindowSize";
 import Tooltip from "../Tooltip";
 
-const EmojiPanel = createLazyComponent(
+const EmojiPanel = React.lazy(
   () => import("~/components/IconPicker/components/EmojiPanel")
 );
 
@@ -105,7 +104,6 @@ const ReactionPicker: React.FC<Props> = ({
               aria-label={t("Reaction picker")}
               className={className}
               onClick={handlePopoverButtonClick}
-              onMouseEnter={() => EmojiPanel.preload()}
               size={size}
             >
               <ReactionIcon size={22} />
@@ -125,7 +123,7 @@ const ReactionPicker: React.FC<Props> = ({
         {popover.visible && (
           <React.Suspense fallback={<Placeholder />}>
             <EventBoundary>
-              <EmojiPanel.Component
+              <EmojiPanel
                 height={300}
                 panelWidth={panelWidth}
                 query={query}

app/components/SearchPopover.tsx

@@ -200,7 +200,7 @@ function SearchPopover({ shareId, className }: Props) {
         style={{ zIndex: depths.sidebar + 1 }}
         shrink
       >
-        <PaginatedList<SearchResult>
+        <PaginatedList
           options={{ query, snippetMinWords: 10, snippetMaxWords: 11 }}
           items={cachedSearchResults}
           fetch={performSearch}
@@ -209,7 +209,7 @@ function SearchPopover({ shareId, className }: Props) {
             <NoResults>{t("No results for {{query}}", { query })}</NoResults>
           }
           loading={<PlaceholderList count={3} header={{ height: 20 }} />}
-          renderItem={(item, index) => (
+          renderItem={(item: SearchResult, index) => (
             <SearchListItem
               key={item.document.id}
               shareId={shareId}

app/components/Sharing/components/Suggestions.tsx

@@ -93,13 +93,11 @@ export const Suggestions = observer(
     const suggestions = React.useMemo(() => {
       const filtered: Suggestion[] = (
         document
-          ? users
-              .notInDocument(document.id, query)
-              .filter((u) => u.id !== user.id)
+          ? users.notInDocument(document.id, query)
           : collection
           ? users.notInCollection(collection.id, query)
           : users.activeOrInvited
-      ).filter((u) => !u.isSuspended);
+      ).filter((u) => !u.isSuspended && u.id !== user.id);
 
       if (isEmail(query)) {
         filtered.push(getSuggestionForEmail(query));

app/components/Sidebar/App.tsx

@@ -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 TeamMenu from "~/menus/TeamMenu";
+import OrganizationMenu from "~/menus/OrganizationMenu";
 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 />
 
-          <TeamMenu>
+          <OrganizationMenu>
             {(props: SidebarButtonProps) => (
               <SidebarButton
                 {...props}
@@ -91,7 +91,7 @@ function AppSidebar() {
                 </Tooltip>
               </SidebarButton>
             )}
-          </TeamMenu>
+          </OrganizationMenu>
           <Overflow>
             <Section>
               <SidebarLink

app/components/Sidebar/Settings.tsx

@@ -23,20 +23,12 @@ import ToggleButton from "./components/ToggleButton";
 import Version from "./components/Version";
 
 function SettingsSidebar() {
-  const { ui, integrations } = useStores();
+  const { ui } = useStores();
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
   const configs = useSettingsConfig();
-
-  const groupedConfig = groupBy(
-    configs.filter((item) =>
-      item.group === "Integrations" && item.pluginId
-        ? integrations.findByService(item.pluginId)
-        : true
-    ),
-    "group"
-  );
+  const groupedConfig = groupBy(configs, "group");
 
   const returnToApp = React.useCallback(() => {
     history.push("/home");
@@ -71,9 +63,8 @@ function SettingsSidebar() {
                   <SidebarLink
                     key={item.path}
                     to={item.path}
-                    onClickIntent={item.preload}
                     active={
-                      item.path.startsWith(settingsPath("templates"))
+                      item.path !== settingsPath()
                         ? location.pathname.startsWith(item.path)
                         : undefined
                     }

app/components/Sidebar/Sidebar.tsx

@@ -321,7 +321,6 @@ const Container = styled(Flex)<ContainerProps>`
   z-index: ${depths.mobileSidebar};
   max-width: 80%;
   min-width: 280px;
-  padding-left: var(--sal);
   ${fadeOnDesktopBackgrounded()}
 
   @media print {

app/components/Sidebar/components/ArchiveLink.tsx

@@ -82,12 +82,12 @@ function ArchiveLink() {
         </div>
         {expanded === true ? (
           <Relative>
-            <PaginatedList<Collection>
+            <PaginatedList
               aria-label={t("Archived collections")}
               items={collections.archived}
               loading={<PlaceholderCollections />}
               renderError={(props) => <StyledError {...props} />}
-              renderItem={(item) => (
+              renderItem={(item: Collection) => (
                 <ArchivedCollectionLink
                   key={item.id}
                   depth={1}

app/components/Sidebar/components/Collections.tsx

@@ -22,7 +22,7 @@ import SidebarContext from "./SidebarContext";
 function Collections() {
   const { documents, collections } = useStores();
   const { t } = useTranslation();
-  const orderedCollections = collections.allActive;
+  const orderedCollections = collections.orderedData;
 
   const params = React.useMemo(
     () => ({
@@ -54,7 +54,7 @@ function Collections() {
       <Flex column>
         <Header id="collections" title={t("Collections")}>
           <Relative>
-            <PaginatedList<Collection>
+            <PaginatedList
               options={params}
               aria-label={t("Collections")}
               items={collections.allActive}
@@ -69,7 +69,7 @@ function Collections() {
                 ) : undefined
               }
               renderError={(props) => <StyledError {...props} />}
-              renderItem={(item, index) => (
+              renderItem={(item: Collection, index) => (
                 <DraggableCollectionLink
                   key={item.id}
                   collection={item}

app/components/Sidebar/components/DocumentLink.tsx

@@ -148,12 +148,7 @@ function InnerDocumentLink(
   const color = document?.color || node.color;
 
   // Draggable
-  const [{ isDragging }, drag] = useDragDocument(
-    node,
-    depth,
-    document,
-    isEditing
-  );
+  const [{ isDragging }, drag] = useDragDocument(node, depth, document);
 
   // Drop to re-parent
   const parentRef = React.useRef<HTMLDivElement>(null);
@@ -275,8 +270,6 @@ function InnerDocumentLink(
           <div ref={dropToReparent}>
             <DropToImport documentId={node.id} activeClassName="activeDropZone">
               <SidebarLink
-                // @ts-expect-error react-router type is wrong, string component is fine.
-                component={isEditing ? "div" : undefined}
                 expanded={hasChildren ? isExpanded : undefined}
                 onDisclosureClick={handleDisclosureClick}
                 onClickIntent={handlePrefetch}
@@ -292,7 +285,6 @@ function InnerDocumentLink(
                   <EditableTitle
                     title={title}
                     onSubmit={handleTitleChange}
-                    isEditing={isEditing}
                     onEditing={setIsEditing}
                     canUpdate={canUpdate}
                     maxLength={DocumentValidation.maxTitleLength}

app/components/Sidebar/components/NavLink.tsx

@@ -39,7 +39,6 @@ export interface Props extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
   location?: Location;
   strict?: boolean;
   to: LocationDescriptor;
-  component?: React.ComponentType;
   onBeforeClick?: () => void;
 }
 
@@ -147,22 +146,17 @@ const NavLink = ({
     setPreActive(undefined);
   }, [currentLocation]);
 
-  const handleKeyDown = React.useCallback(
-    (event: React.KeyboardEvent<HTMLAnchorElement>) => {
-      if (["Enter", " "].includes(event.key)) {
-        navigateTo();
-        event.currentTarget?.blur();
-      }
-    },
-    [navigateTo]
-  );
-
   return (
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
       onClick={handleClick}
-      onKeyDown={handleKeyDown}
+      onKeyDown={(event) => {
+        if (["Enter", " "].includes(event.key)) {
+          navigateTo();
+          event.currentTarget?.blur();
+        }
+      }}
       aria-current={(isActive && ariaCurrent) || undefined}
       className={className}
       style={style}

app/components/Sidebar/components/StarredLink.tsx

@@ -38,10 +38,10 @@ function StarredLink({ star }: Props) {
   const { ui, collections, documents } = useStores();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const { documentId, collectionId } = star;
-  const collection = collectionId ? collections.get(collectionId) : undefined;
+  const collection = collections.get(collectionId);
   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);
     },
     []

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -166,13 +166,11 @@ export function useDropToReorderStar(getIndex?: () => string) {
  * @param node The NavigationNode model to drag.
  * @param depth The depth of the node in the sidebar.
  * @param document The related Document model.
- * @param isEditing Whether the sidebar item is currently being edited.
  */
 export function useDragDocument(
   node: NavigationNode,
   depth: number,
-  document?: Document,
-  isEditing?: boolean
+  document?: Document
 ) {
   const icon = document?.icon || node.icon || node.emoji;
   const color = document?.color || node.color;
@@ -190,7 +188,7 @@ export function useDragDocument(
         icon: icon ? <Icon value={icon} color={color} /> : undefined,
         collectionId: document?.collectionId || "",
       } as DragObject),
-    canDrag: () => !!document?.isActive && !isEditing,
+    canDrag: () => !!document?.isActive,
     collect: (monitor) => ({
       isDragging: monitor.isDragging(),
     }),

app/components/Table.tsx

@@ -335,7 +335,6 @@ const TR = styled.div<{ $columns: string }>`
   grid-template-columns: ${({ $columns }) => `${$columns}`};
   align-items: center;
   border-bottom: 1px solid ${s("divider")};
-  overflow: hidden;
 
   &:last-child {
     border-bottom: 0;
@@ -358,8 +357,7 @@ const TD = styled.span`
   padding: 10px 6px;
   font-size: 14px;
   text-wrap: wrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-word;
 
   &:first-child {
     font-size: 15px;

app/components/TeamLogo.ts

@@ -1,11 +1,8 @@
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { Avatar } from "./Avatar";
-import { AvatarVariant } from "./Avatar/Avatar";
 
-const TeamLogo = styled(Avatar).attrs({
-  variant: AvatarVariant.Square,
-})`
+const TeamLogo = styled(Avatar)`
   border-radius: 4px;
   box-shadow: inset 0 0 0 1px ${s("divider")};
   border: 0;

app/components/Text.ts

@@ -1,3 +1,73 @@
-import Text from "@shared/components/Text";
+import styled, { css } from "styled-components";
+import { ellipsis } from "@shared/styles";
+
+type Props = {
+  /** The type of text to render */
+  type?: "secondary" | "tertiary" | "danger";
+  /** The size of the text */
+  size?: "xlarge" | "large" | "medium" | "small" | "xsmall";
+  /** The direction of the text (defaults to ltr) */
+  dir?: "ltr" | "rtl" | "auto";
+  /** Whether the text should be selectable (defaults to false) */
+  selectable?: boolean;
+  /** The font weight of the text */
+  weight?: "xbold" | "bold" | "normal";
+  /** Whether the text should be italic */
+  italic?: boolean;
+  /** Whether the text should be truncated with an ellipsis */
+  ellipsis?: boolean;
+  /** Whether the text should be monospaced */
+  monospace?: boolean;
+};
+
+/**
+ * Use this component for all interface text that should not be selectable
+ * by the user, this is the majority of UI text explainers, notes, headings.
+ */
+const Text = styled.span<Props>`
+  margin-top: 0;
+  text-align: ${(props) => (props.dir ? props.dir : "inherit")};
+  color: ${(props) =>
+    props.type === "secondary"
+      ? props.theme.textSecondary
+      : props.type === "tertiary"
+      ? props.theme.textTertiary
+      : props.type === "danger"
+      ? props.theme.brand.red
+      : props.theme.text};
+  font-size: ${(props) =>
+    props.size === "xlarge"
+      ? "26px"
+      : props.size === "large"
+      ? "18px"
+      : props.size === "medium"
+      ? "16px"
+      : props.size === "small"
+      ? "14px"
+      : props.size === "xsmall"
+      ? "13px"
+      : "inherit"};
+
+  ${(props) =>
+    props.weight &&
+    css`
+      font-weight: ${props.weight === "xbold"
+        ? 600
+        : props.weight === "bold"
+        ? 500
+        : props.weight === "normal"
+        ? 400
+        : "inherit"};
+    `}
+
+  font-style: ${(props) => (props.italic ? "italic" : "normal")};
+  font-family: ${(props) =>
+    props.monospace ? props.theme.fontFamilyMono : "inherit"};
+
+  white-space: normal;
+  user-select: ${(props) => (props.selectable ? "text" : "none")};
+
+  ${(props) => props.ellipsis && ellipsis()}
+`;
 
 export default Text;

app/components/WebsocketProvider.tsx

@@ -1,4 +1,3 @@
-import * as Sentry from "@sentry/react";
 import invariant from "invariant";
 import find from "lodash/find";
 import { action, observable } from "mobx";
@@ -135,15 +134,6 @@ 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) => {
@@ -261,10 +251,8 @@ class WebsocketProvider extends React.Component<Props> {
           }
           policies.remove(document.id);
 
-          if (event.collectionId) {
-            const collection = collections.get(event.collectionId);
-            collection?.removeDocument(document.id);
-          }
+          const collection = collections.get(event.collectionId);
+          collection?.removeDocument(document.id);
         }
       )
     );

app/editor/components/FindAndReplace.tsx

@@ -41,7 +41,6 @@ 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),

app/editor/components/FloatingToolbar.tsx

@@ -7,7 +7,6 @@ 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";
@@ -242,16 +241,12 @@ 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 - safeAreaInsets.bottom
-              }px)`,
+              bottom: `calc(100% - ${height - rect.y}px)`,
             }}
           >
             {props.children}

app/editor/components/LinkEditor.tsx

@@ -10,7 +10,6 @@ import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { hideScrollbars, s } from "@shared/styles";
 import { isInternalUrl, sanitizeUrl } from "@shared/utils/urls";
-import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Flex from "~/components/Flex";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import Scrollable from "~/components/Scrollable";
@@ -254,14 +253,7 @@ const LinkEditor: React.FC<Props> = ({
                   onPointerMove={() => setSelectedIndex(index)}
                   selected={index === selectedIndex}
                   key={doc.id}
-                  subtitle={
-                    <DocumentBreadcrumb
-                      document={doc}
-                      onlyText
-                      reverse
-                      maxDepth={2}
-                    />
-                  }
+                  subtitle={doc.collection?.name}
                   title={doc.title}
                   icon={
                     doc.icon ? (

app/editor/components/MentionMenu.tsx

@@ -11,7 +11,6 @@ import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { Avatar, AvatarSize } from "~/components/Avatar";
-import DocumentBreadcrumb from "~/components/DocumentBreadcrumb";
 import Flex from "~/components/Flex";
 import {
   DocumentsSection,
@@ -58,7 +57,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       res.data.documents.map(documents.add);
       res.data.users.map(users.add);
       res.data.collections.map(collections.add);
-    }, [search, documents, users, collections])
+    }, [search, documents, users])
   );
 
   React.useEffect(() => {
@@ -69,7 +68,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
 
   React.useEffect(() => {
     if (actorId && !loading) {
-      const items: MentionItem[] = users
+      const items = users
         .findByQuery(search, { maxResults: maxResultsInSection })
         .map(
           (user) =>
@@ -113,14 +112,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                     <DocumentIcon />
                   ),
                   title: doc.title,
-                  subtitle: (
-                    <DocumentBreadcrumb
-                      document={doc}
-                      onlyText
-                      reverse
-                      maxDepth={2}
-                    />
-                  ),
+                  subtitle: doc.collection?.name,
                   section: DocumentsSection,
                   appendSpace: true,
                   attrs: {

app/editor/components/PasteMenu.tsx

@@ -1,16 +1,7 @@
-import { observer } from "mobx-react";
-import { EmailIcon, LinkIcon } from "outline-icons";
+import { LinkIcon } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
-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";
-import { determineMentionType, isURLMentionable } from "~/utils/mention";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
@@ -24,65 +15,34 @@ type Props = Omit<
   embeds: EmbedDescriptor[];
 };
 
-export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
+const PasteMenu = ({ embeds, ...props }: Props) => {
   const { t } = useTranslation();
-  const { integrations } = useStores();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-
-  let mentionType: MentionType | undefined;
-
-  if (pastedText && isUrl(pastedText)) {
-    const url = new URL(pastedText);
-    const integration = integrations.find((intg: Integration) =>
-      isURLMentionable({ url, integration: intg })
-    );
-
-    mentionType = integration
-      ? determineMentionType({ url, integration })
-      : undefined;
-  }
 
   const embed = React.useMemo(() => {
     for (const e of embeds) {
-      const matches = e.matcher(pastedText);
+      const matches = e.matcher(props.pastedText);
       if (matches) {
         return e;
       }
     }
     return;
-  }, [embeds, pastedText]);
+  }, [embeds, props.pastedText]);
 
   const items = React.useMemo(
-    () =>
-      [
-        {
-          name: "noop",
-          title: t("Keep as link"),
-          icon: <LinkIcon />,
-        },
-        {
-          name: "mention",
-          title: t("Mention"),
-          icon: <EmailIcon />,
-          visible: !!mentionType,
-          attrs: {
-            id: v4(),
-            type: mentionType,
-            label: pastedText,
-            href: pastedText,
-            modelId: v4(),
-            actorId: user?.id,
-          },
-          appendSpace: true,
-        },
-        {
-          name: "embed",
-          title: t("Embed"),
-          icon: embed?.icon,
-          keywords: embed?.keywords,
-        },
-      ] satisfies MenuItem[],
-    [t, embed, mentionType, pastedText, user]
+    () => [
+      {
+        name: "noop",
+        title: t("Keep as link"),
+        icon: <LinkIcon />,
+      },
+      {
+        name: "embed",
+        title: t("Embed"),
+        icon: embed?.icon,
+        keywords: embed?.keywords,
+      },
+    ],
+    [embed, t]
   );
 
   return (
@@ -92,7 +52,9 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
       filterable={false}
       renderMenuItem={(item, _index, options) => (
         <SuggestionsMenuItem
-          onClick={options.onClick}
+          onClick={() => {
+            props.onSelect?.(item);
+          }}
           selected={options.selected}
           title={item.title}
           icon={item.icon}
@@ -101,4 +63,6 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
       items={items}
     />
   );
-});
+};
+
+export default PasteMenu;

app/editor/components/SelectionToolbar.tsx

@@ -174,12 +174,12 @@ export default function SelectionToolbar(props: Props) {
   const { isTemplate, rtl, canComment, canUpdate, ...rest } = props;
   const { state } = view;
   const { selection } = state;
+  const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
 
   if ((readOnly && !canComment) || isDragging) {
     return null;
   }
 
-  const isDividerSelection = isNodeActive(state.schema.nodes.hr)(state);
   const colIndex = getColumnIndex(state);
   const rowIndex = getRowIndex(state);
   const isTableSelection = colIndex !== undefined && rowIndex !== undefined;

app/editor/extensions/BlockMenu.tsx

@@ -1,12 +1,10 @@
 import { action } from "mobx";
 import { PlusIcon } from "outline-icons";
-import { Node, ResolvedPos } from "prosemirror-model";
-import { EditorState, Plugin } from "prosemirror-state";
+import { Plugin } from "prosemirror-state";
 import { Decoration, DecorationSet } from "prosemirror-view";
 import * as React from "react";
-import { createRoot } from "react-dom/client";
+import ReactDOM from "react-dom";
 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";
@@ -29,10 +27,7 @@ export default class BlockMenuExtension extends Suggestion {
     const button = document.createElement("button");
     button.className = "block-menu-trigger";
     button.type = "button";
-    button.addEventListener("click", this.handleClick);
-    const root = createRoot(button);
-    root.render(<PlusIcon />);
-    return button;
+    ReactDOM.render(<PlusIcon />, button);
 
     return [
       ...super.plugins,
@@ -54,6 +49,7 @@ 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(
@@ -73,39 +69,33 @@ 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}`,
-        },
-      ]),
     ];
   }
 

app/editor/extensions/ClipboardTextSerializer.ts

@@ -1,6 +1,5 @@
 import { Plugin, PluginKey } from "prosemirror-state";
 import Extension from "@shared/editor/lib/Extension";
-import { isList } from "@shared/editor/queries/isList";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 
 /**
@@ -19,25 +18,17 @@ export default class ClipboardTextSerializer extends Extension {
       new Plugin({
         key: new PluginKey("clipboardTextSerializer"),
         props: {
-          clipboardTextSerializer: (slice, view) => {
+          clipboardTextSerializer: (slice) => {
             const isMultiline = slice.content.childCount > 1;
 
             // This is a cheap way to determine if the content is "complex",
             // aka it has multiple marks or formatting. In which case we'll use
             // markdown formatting
-            const hasMultipleListItems = slice.content.content
-              .filter((node) => node.content.content.length > 1)
-              .some((node) => isList(node, view.state.schema));
-            const hasMultipleBlockTypes =
-              [
-                ...new Set(
-                  slice.content.content
-                    .filter((node) => node.content.content.length > 1)
-                    .map((node) => node.type.name)
-                ),
-              ].length > 1;
             const copyAsMarkdown =
-              isMultiline || hasMultipleBlockTypes || hasMultipleListItems;
+              isMultiline ||
+              slice.content.content.some(
+                (node) => node.content.content.length > 1
+              );
 
             return copyAsMarkdown
               ? mdSerializer.serialize(slice.content, {

app/editor/extensions/PasteHandler.tsx

@@ -24,7 +24,7 @@ import parseCollectionSlug from "@shared/utils/parseCollectionSlug";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isCollectionUrl, isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
-import { PasteMenu } from "../components/PasteMenu";
+import PasteMenu from "../components/PasteMenu";
 
 export default class PasteHandler extends Extension {
   state: {
@@ -415,21 +415,6 @@ export default class PasteHandler extends Extension {
     });
   };
 
-  private insertMention = () => {
-    const { view } = this.editor;
-    const { state } = view;
-    const result = this.findPlaceholder(state, this.state.pastedText);
-
-    // Remove just the placeholder here.
-    // Mention node will be created by SuggestionsMenu.
-    if (result) {
-      const tr = state.tr.deleteRange(result[0], result[1]);
-      view.dispatch(
-        tr.setSelection(TextSelection.near(tr.doc.resolve(result[0])))
-      );
-    }
-  };
-
   private removePlaceholder = () => {
     const { view } = this.editor;
     const { state } = view;
@@ -465,11 +450,6 @@ export default class PasteHandler extends Extension {
         this.insertEmbed();
         break;
       }
-      case "mention": {
-        this.hidePasteMenu();
-        this.insertMention();
-        break;
-      }
       default:
         break;
     }

app/editor/extensions/SmartText.ts

@@ -2,8 +2,7 @@ import Extension from "@shared/editor/lib/Extension";
 import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
-// Note that the suppression of pipe here prevents conflict with table creation rule.
-const emdash = new InputRule(/(?:^|[^\|])(--)$/, "—");
+const emdash = new InputRule(/--$/, "—");
 const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
 const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");

app/editor/menus/formatting.tsx

@@ -67,7 +67,7 @@ export default function formattingMenuItems(
       shortcut: `${metaDisplay}+B`,
       icon: <BoldIcon />,
       active: isMarkActive(schema.marks.strong),
-      visible: !isCodeBlock && (!isMobile || !isEmpty),
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "em",
@@ -75,7 +75,7 @@ export default function formattingMenuItems(
       shortcut: `${metaDisplay}+I`,
       icon: <ItalicIcon />,
       active: isMarkActive(schema.marks.em),
-      visible: !isCodeBlock && (!isMobile || !isEmpty),
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       name: "strikethrough",
@@ -83,7 +83,7 @@ export default function formattingMenuItems(
       shortcut: `${metaDisplay}+D`,
       icon: <StrikethroughIcon />,
       active: isMarkActive(schema.marks.strikethrough),
-      visible: !isCodeBlock && (!isMobile || !isEmpty),
+      visible: !isCode && (!isMobile || !isEmpty),
     },
     {
       tooltip: dictionary.mark,

app/hooks/useEmbeds.ts

@@ -18,7 +18,8 @@ export default function useEmbeds(loadIfMissing = false) {
   React.useEffect(() => {
     async function fetchEmbedIntegrations() {
       try {
-        await integrations.fetchAll({
+        await integrations.fetchPage({
+          limit: 100,
           type: IntegrationType.Embed,
         });
       } catch (err) {

app/hooks/useIsMounted.ts

@@ -1,3 +1,19 @@
-import useIsMounted from "@shared/hooks/useIsMounted";
+import * as React from "react";
 
-export default useIsMounted;
+/**
+ * Hook to check if component is still mounted
+ *
+ * @returns {boolean} true if the component is mounted, false otherwise
+ */
+export default function useIsMounted() {
+  const isMounted = React.useRef(false);
+
+  React.useEffect(() => {
+    isMounted.current = true;
+    return () => {
+      isMounted.current = false;
+    };
+  }, []);
+
+  return React.useCallback(() => isMounted.current, []);
+}

app/hooks/useLoggedInSessions.ts

@@ -1,14 +0,0 @@
-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") || "{}");
-}

app/hooks/useRequest.ts

@@ -59,7 +59,7 @@ export default function useRequest<T = unknown>(
     if (makeRequestOnMount) {
       void request();
     }
-  }, []);
+  }, [request, makeRequestOnMount]);
 
   return { data, loading, loaded, error, request };
 }

app/hooks/useSettingsConfig.ts

@@ -8,30 +8,28 @@ import {
   GlobeIcon,
   TeamIcon,
   BeakerIcon,
+  BuildingBlocksIcon,
   SettingsIcon,
   ExportIcon,
   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 { Integrations } from "~/scenes/Settings/Integrations";
-import { createLazyComponent as lazy } from "~/components/LazyLoad";
+import ZapierIcon from "~/components/Icons/ZapierIcon";
 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 Applications = lazy(() => import("~/scenes/Settings/Applications"));
-const APIAndApps = lazy(() => import("~/scenes/Settings/APIAndApps"));
+const PersonalApiKeys = lazy(() => import("~/scenes/Settings/PersonalApiKeys"));
 const Details = lazy(() => import("~/scenes/Settings/Details"));
 const Export = lazy(() => import("~/scenes/Settings/Export"));
 const Features = lazy(() => import("~/scenes/Settings/Features"));
@@ -42,40 +40,33 @@ const Notifications = lazy(() => import("~/scenes/Settings/Notifications"));
 const Preferences = lazy(() => import("~/scenes/Settings/Preferences"));
 const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
+const SelfHosted = lazy(() => import("~/scenes/Settings/SelfHosted"));
 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,
-        preload: Profile.preload,
+        component: Profile,
         enabled: true,
         group: t("Account"),
         icon: ProfileIcon,
@@ -83,8 +74,7 @@ const useSettingsConfig = () => {
       {
         name: t("Preferences"),
         path: settingsPath("preferences"),
-        component: Preferences.Component,
-        preload: Preferences.preload,
+        component: Preferences,
         enabled: true,
         group: t("Account"),
         icon: SettingsIcon,
@@ -92,27 +82,24 @@ const useSettingsConfig = () => {
       {
         name: t("Notifications"),
         path: settingsPath("notifications"),
-        component: Notifications.Component,
-        preload: Notifications.preload,
+        component: Notifications,
         enabled: true,
         group: t("Account"),
         icon: EmailIcon,
       },
       {
-        name: t("API & Apps"),
-        path: settingsPath("api-and-apps"),
-        component: APIAndApps.Component,
-        preload: APIAndApps.preload,
-        enabled: true,
+        name: t("API Keys"),
+        path: settingsPath("personal-api-keys"),
+        component: PersonalApiKeys,
+        enabled: can.createApiKey && !can.listApiKeys,
         group: t("Account"),
-        icon: PadlockIcon,
+        icon: CodeIcon,
       },
       // Workspace
       {
         name: t("Details"),
         path: settingsPath("details"),
-        component: Details.Component,
-        preload: Details.preload,
+        component: Details,
         enabled: can.update,
         group: t("Workspace"),
         icon: TeamIcon,
@@ -120,8 +107,7 @@ const useSettingsConfig = () => {
       {
         name: t("Security"),
         path: settingsPath("security"),
-        component: Security.Component,
-        preload: Security.preload,
+        component: Security,
         enabled: can.update,
         group: t("Workspace"),
         icon: PadlockIcon,
@@ -129,8 +115,7 @@ const useSettingsConfig = () => {
       {
         name: t("Features"),
         path: settingsPath("features"),
-        component: Features.Component,
-        preload: Features.preload,
+        component: Features,
         enabled: can.update,
         group: t("Workspace"),
         icon: BeakerIcon,
@@ -138,8 +123,7 @@ const useSettingsConfig = () => {
       {
         name: t("Members"),
         path: settingsPath("members"),
-        component: Members.Component,
-        preload: Members.preload,
+        component: Members,
         enabled: can.listUsers,
         group: t("Workspace"),
         icon: UserIcon,
@@ -147,8 +131,7 @@ const useSettingsConfig = () => {
       {
         name: t("Groups"),
         path: settingsPath("groups"),
-        component: Groups.Component,
-        preload: Groups.preload,
+        component: Groups,
         enabled: can.listGroups,
         group: t("Workspace"),
         icon: GroupIcon,
@@ -156,8 +139,7 @@ const useSettingsConfig = () => {
       {
         name: t("Templates"),
         path: settingsPath("templates"),
-        component: Templates.Component,
-        preload: Templates.preload,
+        component: Templates,
         enabled: can.readTemplate,
         group: t("Workspace"),
         icon: ShapesIcon,
@@ -165,26 +147,15 @@ const useSettingsConfig = () => {
       {
         name: t("API Keys"),
         path: settingsPath("api-keys"),
-        component: ApiKeys.Component,
-        preload: ApiKeys.preload,
+        component: ApiKeys,
         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,
-        preload: Shares.preload,
+        component: Shares,
         enabled: can.listShares,
         group: t("Workspace"),
         icon: GlobeIcon,
@@ -192,8 +163,7 @@ const useSettingsConfig = () => {
       {
         name: t("Import"),
         path: settingsPath("import"),
-        component: Import.Component,
-        preload: Import.preload,
+        component: Import,
         enabled: can.createImport,
         group: t("Workspace"),
         icon: ImportIcon,
@@ -201,20 +171,27 @@ const useSettingsConfig = () => {
       {
         name: t("Export"),
         path: settingsPath("export"),
-        component: Export.Component,
-        preload: Export.preload,
+        component: Export,
         enabled: can.createExport,
         group: t("Workspace"),
         icon: ExportIcon,
       },
       // Integrations
       {
-        name: `${t("Install")}…`,
-        path: settingsPath("integrations"),
-        component: Integrations,
-        enabled: true,
+        name: t("Self Hosted"),
+        path: integrationSettingsPath("self-hosted"),
+        component: SelfHosted,
+        enabled: can.update && !isCloudHosted,
         group: t("Integrations"),
-        icon: PlusIcon,
+        icon: BuildingBlocksIcon,
+      },
+      {
+        name: "Zapier",
+        path: integrationSettingsPath("zapier"),
+        component: Zapier,
+        enabled: can.update && isCloudHosted,
+        group: t("Integrations"),
+        icon: ZapierIcon,
       },
     ];
 
@@ -231,10 +208,7 @@ const useSettingsConfig = () => {
             ? integrationSettingsPath(plugin.id)
             : settingsPath(plugin.id),
         group: t(group),
-        pluginId: plugin.id,
-        description: plugin.value.description,
-        component: plugin.value.component.Component,
-        preload: plugin.value.component.preload,
+        component: plugin.value.component,
         enabled: plugin.value.enabled
           ? plugin.value.enabled(team, user)
           : can.update,

app/hooks/useTemplateMenuItems.tsx

@@ -1,88 +0,0 @@
-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;
-}

app/index.tsx

@@ -4,7 +4,7 @@ import { LazyMotion } from "framer-motion";
 import { KBarProvider } from "kbar";
 import { Provider } from "mobx-react";
 import * as React from "react";
-import { createRoot } from "react-dom/client";
+import { render } from "react-dom";
 import { HelmetProvider } from "react-helmet-async";
 import { Router } from "react-router-dom";
 import stores from "~/stores";
@@ -79,8 +79,7 @@ if (element) {
     </React.StrictMode>
   );
 
-  const root = createRoot(element);
-  root.render(<App />);
+  render(<App />, element);
 }
 
 window.addEventListener("load", async () => {

app/menus/DocumentMenu.tsx

@@ -2,13 +2,7 @@ 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,
-  ShapesIcon,
-} from "outline-icons";
+import { EditIcon, InputIcon, RestoreIcon, SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
@@ -63,7 +57,6 @@ 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";
@@ -83,7 +76,6 @@ 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 */
@@ -155,7 +147,6 @@ type MenuContentProps = {
   onOpen?: () => void;
   onClose?: () => void;
   onFindAndReplace?: () => void;
-  onSelectTemplate?: (template: Document) => void;
   onRename?: () => void;
   showDisplayOptions?: boolean;
   showToggleEmbeds?: boolean;
@@ -165,7 +156,6 @@ const MenuContent: React.FC<MenuContentProps> = observer(function MenuContent_({
   onOpen,
   onClose,
   onFindAndReplace,
-  onSelectTemplate,
   onRename,
   showDisplayOptions,
   showToggleEmbeds,
@@ -228,11 +218,6 @@ const MenuContent: React.FC<MenuContentProps> = observer(function MenuContent_({
     [collections.orderedData, handleRestore, policies]
   );
 
-  const templateMenuItems = useTemplateMenuItems({
-    document,
-    onSelectTemplate,
-  });
-
   return !isEmpty(can) ? (
     <ContextMenu
       {...menuState}
@@ -325,12 +310,6 @@ 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),
           {
@@ -404,7 +383,6 @@ function DocumentMenu({
   modal = true,
   showToggleEmbeds,
   showDisplayOptions,
-  onSelectTemplate,
   label,
   onRename,
   onOpen,
@@ -488,7 +466,6 @@ function DocumentMenu({
             onOpen={onOpen}
             onClose={onClose}
             onRename={onRename}
-            onSelectTemplate={onSelectTemplate}
             showDisplayOptions={showDisplayOptions}
             showToggleEmbeds={showToggleEmbeds}
           />

app/menus/OAuthAuthenticationMenu.tsx

@@ -1,57 +0,0 @@
-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);

app/menus/OAuthClientMenu.tsx

@@ -1,68 +0,0 @@
-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);

app/menus/OrganizationMenu.tsx

@@ -10,7 +10,7 @@ import {
 } from "~/actions/definitions/navigation";
 import {
   createTeam,
-  switchTeamsList,
+  createTeamsList,
   desktopLoginTeam,
 } from "~/actions/definitions/teams";
 import useActionContext from "~/hooks/useActionContext";
@@ -22,7 +22,7 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const TeamMenu: React.FC = ({ children }: Props) => {
+const OrganizationMenu: React.FC = ({ children }: Props) => {
   const menu = useMenuState({
     unstable_offset: [4, -4],
     placement: "bottom-start",
@@ -44,7 +44,7 @@ const TeamMenu: React.FC = ({ children }: Props) => {
   // menu is not cached at all.
   const actions = React.useMemo(
     () => [
-      ...switchTeamsList(context),
+      ...createTeamsList(context),
       createTeam,
       desktopLoginTeam,
       separator(),
@@ -64,4 +64,4 @@ const TeamMenu: React.FC = ({ children }: Props) => {
   );
 };
 
-export default observer(TeamMenu);
+export default observer(OrganizationMenu);

app/menus/TemplatesMenu.tsx

@@ -1,13 +1,17 @@
 import { observer } from "mobx-react";
-import { ShapesIcon } from "outline-icons";
+import { DocumentIcon, 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 { useTemplateMenuItems } from "~/hooks/useTemplateMenuItems";
+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 */
@@ -19,12 +23,57 @@ 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 items = useTemplateMenuItems({ onSelectTemplate, document });
+  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;
 
   if (!items.length) {
     return null;

app/models/Document.ts

@@ -331,16 +331,6 @@ 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.
    *

app/models/Integration.ts

@@ -1,8 +1,8 @@
 import { observable } from "mobx";
-import {
+import type {
   IntegrationService,
-  type IntegrationSettings,
-  type IntegrationType,
+  IntegrationSettings,
+  IntegrationType,
 } from "@shared/types";
 import User from "~/models/User";
 import Model from "~/models/base/Model";

app/models/Star.ts

@@ -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" })

app/models/oauth/OAuthAuthentication.ts

@@ -1,39 +0,0 @@
-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;

app/models/oauth/OAuthClient.ts

@@ -1,92 +0,0 @@
-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;

app/routes/authenticated.tsx

@@ -42,77 +42,55 @@ 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 (
-    <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>
+    <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>
   );
 }
 

app/routes/index.tsx

@@ -6,15 +6,14 @@ import FullscreenLoading from "~/components/FullscreenLoading";
 import Route from "~/components/ProfiledRoute";
 import env from "~/env";
 import useQueryNotices from "~/hooks/useQueryNotices";
-import lazy from "~/utils/lazyWithRetry";
+import lazyWithRetry from "~/utils/lazyWithRetry";
 import { matchDocumentSlug as slug } from "~/utils/routeHelpers";
 
-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"));
+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"));
 
 export default function Routes() {
   useQueryNotices();
@@ -44,7 +43,6 @@ 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} />

app/routes/settings.tsx

@@ -7,7 +7,6 @@ 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() {
@@ -23,12 +22,6 @@ 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}`}

app/scenes/Collection/index.tsx

@@ -12,7 +12,7 @@ import {
 } from "react-router-dom";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { IconTitleWrapper } from "@shared/components/Icon";
+import Icon, { IconTitleWrapper } from "@shared/components/Icon";
 import { s } from "@shared/styles";
 import { StatusFilter } from "@shared/types";
 import { colorPalette } from "@shared/utils/collections";
@@ -20,6 +20,7 @@ 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";
@@ -45,7 +46,6 @@ 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,6 +66,7 @@ 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();
@@ -119,16 +120,21 @@ const CollectionScene = observer(function _CollectionScene() {
 
   React.useEffect(() => {
     async function fetchData() {
-      try {
-        setError(undefined);
-        await collections.fetch(id);
-      } catch (err) {
-        setError(err);
+      if ((!can || !collection) && !error && !isFetching) {
+        try {
+          setError(undefined);
+          setFetching(true);
+          await collections.fetch(id);
+        } catch (err) {
+          setError(err);
+        } finally {
+          setFetching(false);
+        }
       }
     }
 
     void fetchData();
-  }, []);
+  }, [collections, isFetching, collection, error, id, can]);
 
   useCommandBarActions([editCollection], [ui.activeCollectionId ?? "none"]);
 
@@ -139,7 +145,11 @@ const CollectionScene = observer(function _CollectionScene() {
   const hasOverview = can.update || collection?.hasDescription;
 
   const fallbackIcon = collection ? (
-    <CollectionIcon collection={collection} size={40} expanded />
+    <Icon
+      value={collection.icon ?? "collection"}
+      color={collection.color || undefined}
+      size={40}
+    />
   ) : null;
 
   const tabProps = (path: CollectionPath) => ({
@@ -158,7 +168,7 @@ const CollectionScene = observer(function _CollectionScene() {
       left={
         collection.isArchived ? (
           <CollectionBreadcrumb collection={collection} />
-        ) : (
+        ) : collection.isEmpty ? undefined : (
           <InputSearchPage
             source="collection"
             placeholder={`${t("Search in collection")}…`}
@@ -202,9 +212,7 @@ const CollectionScene = observer(function _CollectionScene() {
                     popoverPosition="bottom-start"
                     onChange={handleIconChange}
                     borderOnHover
-                  >
-                    {fallbackIcon}
-                  </IconPicker>
+                  />
                 </React.Suspense>
               ) : (
                 fallbackIcon
@@ -257,7 +265,7 @@ const CollectionScene = observer(function _CollectionScene() {
                 path={collectionPath(collection.path, CollectionPath.Overview)}
               >
                 {hasOverview ? (
-                  <Overview collection={collection} />
+                  <CollectionDescription collection={collection} />
                 ) : (
                   <Redirect
                     to={{

app/scenes/Document/components/Document.tsx

@@ -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, TextSelection } from "prosemirror-state";
+import { AllSelection } from "prosemirror-state";
 import * as React from "react";
 import { WithTranslation, withTranslation } from "react-i18next";
 import {
@@ -146,17 +146,7 @@ class DocumentScene extends React.Component<Props> {
     }
   }
 
-  /**
-   * 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
-  ) => {
+  replaceDocument = (template: Document | Revision) => {
     const editorRef = this.editor.current;
 
     if (!editorRef) {
@@ -164,7 +154,6 @@ 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(
@@ -174,7 +163,11 @@ class DocumentScene extends React.Component<Props> {
     );
 
     if (doc) {
-      view.dispatch(view.state.tr.setSelection(sel).replaceSelectionWith(doc));
+      view.dispatch(
+        view.state.tr
+          .setSelection(new AllSelection(view.state.doc))
+          .replaceSelectionWith(doc)
+      );
     }
 
     this.isEditorDirty = true;
@@ -224,10 +217,7 @@ class DocumentScene extends React.Component<Props> {
     });
 
     if (response) {
-      await this.replaceSelection(
-        response.data,
-        new AllSelection(editorRef.view.state.doc)
-      );
+      await this.replaceDocument(response.data);
       toast.success(t("Document restored"));
       history.replace(this.props.document.url, history.location.state);
     }
@@ -528,7 +518,7 @@ class DocumentScene extends React.Component<Props> {
               }
               savingIsDisabled={document.isSaving || this.isEmpty}
               sharedTree={this.props.sharedTree}
-              onSelectTemplate={this.replaceSelection}
+              onSelectTemplate={this.replaceDocument}
               onSave={this.onSave}
             />
             <Main fullWidth={document.fullWidth} tocPosition={tocPos}>

app/scenes/Document/components/Header.tsx

@@ -387,7 +387,6 @@ function DocumentHeader({
                     neutral
                   />
                 )}
-                onSelectTemplate={onSelectTemplate}
                 onFindAndReplace={editor?.commands.openFindAndReplace}
                 showToggleEmbeds={canToggleEmbeds}
                 showDisplayOptions

app/scenes/Document/components/Insights.tsx

@@ -144,10 +144,10 @@ function Insights() {
                     small
                   />
                 )}
-                <PaginatedList<User>
+                <PaginatedList
                   aria-label={t("Contributors")}
                   items={document.collaborators}
-                  renderItem={(model) => (
+                  renderItem={(model: User) => (
                     <ListItem
                       key={model.id}
                       title={model.name}

app/scenes/Document/components/References.tsx

@@ -18,7 +18,7 @@ type Props = {
 };
 
 function References({ document }: Props) {
-  const { documents } = useStores();
+  const { collections, documents } = useStores();
   const user = useCurrentUser();
   const location = useLocation();
   const locationSidebarContext = useLocationSidebarContext();
@@ -27,8 +27,10 @@ function References({ document }: Props) {
     void documents.fetchBacklinks(document.id);
   }, [documents, document.id]);
 
-  const backlinks = document.backlinks;
-  const collection = document.collection;
+  const backlinks = documents.getBacklinkedDocuments(document.id);
+  const collection = document.collectionId
+    ? collections.get(document.collectionId)
+    : undefined;
   const children = collection
     ? collection.getChildrenForDocument(document.id)
     : [];

app/scenes/Invite.tsx

@@ -209,9 +209,7 @@ function Invite({ onSubmit }: Props) {
                   placeholder={`name@${predictedDomain}`}
                   value={invite.email}
                   required={index === 0}
-                  autoComplete="off"
                   autoFocus
-                  data-1p-ignore
                   flex
                 />
                 <StyledInput

app/scenes/KeyboardShortcuts.tsx

@@ -415,10 +415,6 @@ function KeyboardShortcuts() {
             shortcut: <Key>---</Key>,
             label: t("Horizontal divider"),
           },
-          {
-            shortcut: <Key>{"|--"}</Key>,
-            label: t("Table"),
-          },
           {
             shortcut: <Key>{"```"}</Key>,
             label: t("Code block"),

app/scenes/Login/OAuthAuthorize.tsx

@@ -1,260 +0,0 @@
-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;
-`;

app/scenes/Login/OAuthScopeHelper.ts

@@ -1,56 +0,0 @@
-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);
-  }
-}

app/scenes/Login/components/BackButton.tsx

@@ -10,21 +10,12 @@ import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = {
   config?: Config;
-  onBack?: () => void;
 };
 
-export function BackButton({ onBack, config }: Props) {
+export default function BackButton({ 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;
   }

app/scenes/Login/components/Background.tsx

@@ -1,12 +0,0 @@
-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()}
-`;

app/scenes/Login/components/Centered.tsx

@@ -1,15 +0,0 @@
-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;
-`;

app/scenes/Login/components/ConnectHeader.tsx

@@ -1,40 +0,0 @@
-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>
-  );
-}

app/scenes/Login/components/LoginDialog.tsx

@@ -39,10 +39,7 @@ export function LoginDialog() {
         maxLength={255}
         autoComplete="off"
         placeholder={t("subdomain")}
-        {...register("subdomain", {
-          required: true,
-          pattern: /^[a-z\d-]{1,63}$/,
-        })}
+        {...register("subdomain", { required: true, pattern: /^[a-z\d-]+$/ })}
       >
         <Domain>.getoutline.com</Domain>
       </Input>

app/scenes/Login/components/Notices.tsx

@@ -123,7 +123,7 @@ function Message({ notice }: { notice: string }) {
   }
 }
 
-export function Notices() {
+export default function Notices() {
   const query = useQuery();
   const notice = query.get("notice");
 

app/scenes/Login/components/TeamSwitcher.tsx

@@ -1,109 +0,0 @@
-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;
-`;

app/scenes/Login/index.ts

@@ -1,3 +0,0 @@
-import Login from "./Login";
-
-export default Login;

app/scenes/Login/index.tsx

@@ -13,6 +13,7 @@ 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";
@@ -29,23 +30,21 @@ 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 { Background } from "./components/Background";
-import { Centered } from "./components/Centered";
-import { Notices } from "./components/Notices";
+import BackButton from "./components/BackButton";
+import Notices from "./components/Notices";
 import { getRedirectUrl, navigateToSubdomain } from "./urls";
 
 type Props = {
   children?: (config?: Config) => React.ReactNode;
-  onBack?: () => void;
 };
 
-function Login({ children, onBack }: Props) {
+function Login({ children }: Props) {
   const location = useLocation();
   const query = useQuery();
   const notice = query.get("notice");
@@ -111,9 +110,9 @@ function Login({ children, onBack }: Props) {
   if (error) {
     return (
       <Background>
-        <BackButton onBack={onBack} />
+        <BackButton />
         <ChangeLanguage locale={detectLanguage()} />
-        <Centered>
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Login")} />
           <Heading centered>{t("Error")}</Heading>
           <Note>
@@ -143,9 +142,9 @@ function Login({ children, onBack }: Props) {
   if (isCloudHosted && isCustomDomain && !config.name) {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
+        <BackButton config={config} />
         <ChangeLanguage locale={detectLanguage()} />
-        <Centered>
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Custom domain setup")} />
           <Heading centered>{t("Almost there")}…</Heading>
           <Note>
@@ -161,10 +160,17 @@ function Login({ children, onBack }: Props) {
   if (Desktop.isElectron() && notice === "domain-required") {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
+        <BackButton config={config} />
         <ChangeLanguage locale={detectLanguage()} />
 
-        <Centered as="form" onSubmit={handleGoSubdomain}>
+        <Centered
+          as="form"
+          onSubmit={handleGoSubdomain}
+          align="center"
+          justify="center"
+          column
+          auto
+        >
           <Heading centered>{t("Choose workspace")}</Heading>
           <Note>
             {t(
@@ -200,8 +206,8 @@ function Login({ children, onBack }: Props) {
   if (emailLinkSentTo) {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
-        <Centered>
+        <BackButton config={config} />
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Check your email")} />
           <CheckEmailIcon size={38} />
           <Heading centered>{t("Check your email")}</Heading>
@@ -235,10 +241,10 @@ function Login({ children, onBack }: Props) {
 
   return (
     <Background>
-      <BackButton onBack={onBack} config={config} />
+      <BackButton config={config} />
       <ChangeLanguage locale={detectLanguage()} />
 
-      <Centered gap={12}>
+      <Centered align="center" justify="center" gap={12} column auto>
         <PageTitle
           title={config.name ? `${config.name} – ${t("Login")}` : t("Login")}
         />
@@ -330,6 +336,14 @@ 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;
 `;
@@ -375,4 +389,12 @@ 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);

app/scenes/Login/urls.ts

@@ -3,15 +3,6 @@ import { parseDomain } from "@shared/utils/domains";
 import env from "~/env";
 import Desktop from "~/utils/Desktop";
 
-function validateAndEncodeSubdomain(subdomain: string): string {
-  const encodedSubdomain = encodeURIComponent(subdomain);
-  const urlPattern = /^[a-z\d-]{1,63}$/;
-  if (!urlPattern.test(encodedSubdomain)) {
-    throw new Error("Invalid subdomain");
-  }
-  return `https://${encodedSubdomain}.getoutline.com`;
-}
-
 /**
  * If we're on a custom domain or a subdomain then the auth must point to the
  * apex (env.URL) for authentication so that the state cookie can be set and read.
@@ -45,7 +36,7 @@ export async function navigateToSubdomain(subdomain: string) {
     .toLowerCase()
     .trim()
     .replace(/^https?:\/\//, "");
-  const host = validateAndEncodeSubdomain(normalizedSubdomain);
+  const host = `https://${normalizedSubdomain}.getoutline.com`;
   await Desktop.bridge?.addCustomHost(host);
   window.location.href = host;
 }

app/scenes/Settings/APIAndApps.tsx

@@ -1,105 +0,0 @@
-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);