fix: Line numbers flash in on load

fix: Text color of plain text and markdown code blocks

.babelrc

@@ -1,11 +1,6 @@
 {
   "presets": [
-    [
-      "@babel/preset-react",
-      {
-        "runtime": "automatic"
-      }
-    ],
+    "@babel/preset-react",
     "@babel/preset-env",
     "@babel/preset-typescript"
   ],
@@ -65,4 +60,4 @@
       ]
     }
   }
-}
+}

.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

@@ -2,9 +2,7 @@
   "parser": "@typescript-eslint/parser",
   "parserOptions": {
     "sourceType": "module",
-    "extraFileExtensions": [
-      ".json"
-    ],
+    "extraFileExtensions": [".json"],
     "project": "./tsconfig.json",
     "ecmaFeatures": {
       "jsx": true
@@ -19,7 +17,6 @@
   ],
   "plugins": [
     "es",
-    "react",
     "@typescript-eslint",
     "eslint-plugin-import",
     "eslint-plugin-node",
@@ -27,52 +24,28 @@
     "eslint-plugin-lodash"
   ],
   "rules": {
-    "no-restricted-imports": [
-      "error",
-      {
-        "paths": [
-          {
-            "name": "reakit/Menu",
-            "importNames": [
-              "useMenuState"
-            ],
-            "message": "Do not use useMenuState from reakit/Menu. Use useMenuState instead."
-          }
-        ]
-      }
-    ],
     "eqeqeq": 2,
     "curly": 2,
     "no-console": "error",
-    "arrow-body-style": [
-      "error",
-      "as-needed"
-    ],
+    "arrow-body-style": ["error", "as-needed"],
     "spaced-comment": "error",
     "object-shorthand": "error",
     "no-mixed-operators": "off",
     "no-useless-escape": "off",
     "no-shadow": "off",
     "es/no-regexp-lookbehind-assertions": "error",
-    "react/react-in-jsx-scope": "off",
-    "react/self-closing-comp": [
-      "error",
-      {
-        "component": true,
-        "html": true
-      }
-    ],
+    "react/self-closing-comp": ["error", {
+      "component": true,
+      "html": true
+    }],
     "@typescript-eslint/no-shadow": [
       "warn",
       {
-        "allow": [
-          "transaction"
-        ],
+        "allow": ["transaction"],
         "hoist": "all",
         "ignoreTypeValueShadow": true
       }
     ],
-    "@typescript-eslint/no-require-imports": "off",
     "@typescript-eslint/no-explicit-any": "warn",
     "@typescript-eslint/no-floating-promises": "error",
     "@typescript-eslint/await-thenable": "error",
@@ -86,30 +59,13 @@
       "error",
       {
         "argsIgnorePattern": "^_",
-        "caughtErrorsIgnorePattern": "^_",
         "args": "after-used",
         "ignoreRestSiblings": true
       }
     ],
-    "padding-line-between-statements": [
-      "error",
-      {
-        "blankLine": "always",
-        "prev": "*",
-        "next": "export"
-      }
-    ],
-    "lines-between-class-members": [
-      "error",
-      "always",
-      {
-        "exceptAfterSingleLine": true
-      }
-    ],
-    "lodash/import-scope": [
-      "error",
-      "method"
-    ],
+    "padding-line-between-statements": ["error", { "blankLine": "always", "prev": "*", "next": "export" }],
+    "lines-between-class-members": ["error", "always", { "exceptAfterSingleLine": true }],
+    "lodash/import-scope": ["error", "method"],
     "import/no-named-as-default": "off",
     "import/no-named-as-default-member": "off",
     "import/newline-after-import": 2,
@@ -178,10 +134,7 @@
       "version": "detect"
     },
     "import/parsers": {
-      "@typescript-eslint/parser": [
-        ".ts",
-        ".tsx"
-      ]
+      "@typescript-eslint/parser": [".ts", ".tsx"]
     },
     "import/resolver": {
       "typescript": {}

.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

@@ -145,7 +145,7 @@ jobs:
 
   bundle-size:
     needs: [build, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4

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/.eslintrc

@@ -7,9 +7,6 @@
   "plugins": [
     "eslint-plugin-react-hooks"
   ],
-  "rules": {
-    "react/react-in-jsx-scope": "off"
-  },
   "env": {
     "jest": true,
     "browser": true

app/actions/definitions/apiKeys.tsx

@@ -1,4 +1,5 @@
 import { PlusIcon } from "outline-icons";
+import * as React from "react";
 import stores from "~/stores";
 import ApiKeyNew from "~/scenes/ApiKeyNew";
 import { createAction } from "..";

app/actions/definitions/collections.tsx

@@ -13,6 +13,7 @@ import {
   UnstarredIcon,
   UnsubscribeIcon,
 } from "outline-icons";
+import * as React from "react";
 import { toast } from "sonner";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";

app/actions/definitions/comments.tsx

@@ -1,4 +1,5 @@
 import { DoneIcon, SmileyIcon, TrashIcon } from "outline-icons";
+import * as React from "react";
 import { toast } from "sonner";
 import stores from "~/stores";
 import Comment from "~/models/Comment";

app/actions/definitions/developer.tsx

@@ -7,6 +7,7 @@ import {
   TrashIcon,
   UserIcon,
 } from "outline-icons";
+import * as React from "react";
 import { toast } from "sonner";
 import { createAction } from "~/actions";
 import { DeveloperSection } from "~/actions/sections";
@@ -106,8 +107,8 @@ export const startTyping = createAction({
     }, 250);
 
     window.addEventListener("keydown", (event) => {
-      if (event.key === "Escape" && intervalId) {
-        clearInterval(intervalId);
+      if (event.key === "Escape") {
+        intervalId && clearInterval(intervalId);
       }
     });
 

app/actions/definitions/documents.tsx

@@ -1,6 +1,5 @@
 import copy from "copy-to-clipboard";
 import invariant from "invariant";
-import uniqBy from "lodash/uniqBy";
 import {
   DownloadIcon,
   DuplicateIcon,
@@ -32,6 +31,7 @@ import {
   LogoutIcon,
   CaseSensitiveIcon,
 } from "outline-icons";
+import * as React from "react";
 import { toast } from "sonner";
 import Icon from "@shared/components/Icon";
 import {
@@ -85,9 +85,8 @@ export const openDocument = createAction({
       (acc, node) => [...acc, ...node.children],
       [] as NavigationNode[]
     );
-    const documents = stores.documents.orderedData;
 
-    return uniqBy([...documents, ...nodes], "id").map((item) => ({
+    return nodes.map((item) => ({
       // Note: using url which includes the slug rather than id here to bust
       // cache if the document is renamed
       id: item.url,
@@ -752,7 +751,7 @@ export const importDocument = createAction({
 
     return false;
   },
-  perform: ({ activeDocumentId, activeCollectionId, stores }) => {
+  perform: ({ activeCollectionId, activeDocumentId, stores }) => {
     const { documents } = stores;
     const input = document.createElement("input");
     input.type = "file";
@@ -1085,7 +1084,6 @@ export const openDocumentComments = createAction({
   icon: <CommentIcon />,
   visible: ({ activeDocumentId, stores }) => {
     const can = stores.policies.abilities(activeDocumentId ?? "");
-
     return (
       !!activeDocumentId &&
       can.comment &&
@@ -1213,7 +1211,7 @@ export const leaveDocument = createAction({
       } as UserMembership);
 
       toast.success(t("You have left the shared document"));
-    } catch (_err) {
+    } catch (err) {
       toast.error(t("Could not leave document"));
     }
   },

app/actions/definitions/navigation.tsx

@@ -13,6 +13,7 @@ import {
   ShapesIcon,
   DraftsIcon,
 } from "outline-icons";
+import * as React from "react";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import { isMac } from "@shared/utils/browser";
 import stores from "~/stores";

app/actions/definitions/notifications.tsx

@@ -1,4 +1,5 @@
 import { ArchiveIcon, MarkAsReadIcon } from "outline-icons";
+import * as React from "react";
 import { createAction } from "..";
 import { NotificationSection } from "../sections";
 

app/actions/definitions/oauthClients.tsx

@@ -1,24 +0,0 @@
-import { PlusIcon } from "outline-icons";
-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/revisions.tsx

@@ -1,5 +1,6 @@
 import copy from "copy-to-clipboard";
-import { LinkIcon, RestoreIcon, TrashIcon } from "outline-icons";
+import { LinkIcon, RestoreIcon } from "outline-icons";
+import * as React from "react";
 import { matchPath } from "react-router-dom";
 import { toast } from "sonner";
 import stores from "~/stores";
@@ -12,7 +13,7 @@ import {
 } from "~/utils/routeHelpers";
 
 export const restoreRevision = createAction({
-  name: ({ t }) => t("Restore"),
+  name: ({ t }) => t("Restore revision"),
   analyticsName: "Restore revision",
   icon: <RestoreIcon />,
   section: RevisionSection,
@@ -41,38 +42,6 @@ export const restoreRevision = createAction({
   },
 });
 
-export const deleteRevision = createAction({
-  name: ({ t }) => t("Delete"),
-  analyticsName: "Delete revision",
-  icon: <TrashIcon />,
-  section: RevisionSection,
-  dangerous: true,
-  visible: ({ activeDocumentId }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).update,
-  perform: async ({ t, event, location, activeDocumentId }) => {
-    event?.preventDefault();
-    if (!activeDocumentId) {
-      return;
-    }
-
-    const document = stores.documents.get(activeDocumentId);
-    if (!document) {
-      return;
-    }
-
-    const match = matchPath<{ revisionId: string }>(location.pathname, {
-      path: matchDocumentHistory,
-    });
-    const revisionId = match?.params.revisionId;
-    if (revisionId) {
-      const revision = stores.revisions.get(revisionId);
-      await revision?.delete();
-      toast.success(t("This version of the document was deleted"));
-      history.push(documentHistoryPath(document));
-    }
-  },
-});
-
 export const copyLinkToRevision = createAction({
   name: ({ t }) => t("Copy link"),
   analyticsName: "Copy link to revision",

app/actions/definitions/settings.tsx

@@ -1,4 +1,5 @@
 import { SunIcon, MoonIcon, BrowserIcon } from "outline-icons";
+import * as React from "react";
 import stores from "~/stores";
 import { Theme } from "~/stores/UiStore";
 import { createAction } from "~/actions";
@@ -42,7 +43,9 @@ export const changeTheme = createAction({
     isContextMenu ? t("Appearance") : t("Change theme"),
   analyticsName: "Change theme",
   placeholder: ({ t }) => t("Change theme to"),
-  icon: stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />,
+  icon: function _Icon() {
+    return stores.ui.resolvedTheme === "light" ? <SunIcon /> : <MoonIcon />;
+  },
   keywords: "appearance display",
   section: SettingsSection,
   children: [changeToLightTheme, changeToDarkTheme, changeToSystemTheme],

app/actions/definitions/teams.tsx

@@ -1,4 +1,5 @@
 import { ArrowIcon, PlusIcon } from "outline-icons";
+import * as React from "react";
 import styled from "styled-components";
 import { stringToColor } from "@shared/utils/color";
 import RootStore from "~/stores/RootStore";
@@ -10,25 +11,27 @@ 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,
     analyticsName: "Switch workspace",
     section: TeamSection,
     keywords: "change switch workspace organization team",
-    icon: (
-      <StyledTeamLogo
-        alt={session.name}
-        model={{
-          initial: session.name[0],
-          avatarUrl: session.avatarUrl,
-          id: session.id,
-          color: stringToColor(session.id),
-        }}
-        size={24}
-      />
-    ),
+    icon: function _Icon() {
+      return (
+        <StyledTeamLogo
+          alt={session.name}
+          model={{
+            initial: session.name[0],
+            avatarUrl: session.avatarUrl,
+            id: session.id,
+            color: stringToColor(session.id),
+          }}
+          size={24}
+        />
+      );
+    },
     visible: ({ currentTeamId }: ActionContext) => currentTeamId !== session.id,
     perform: () => (window.location.href = session.url),
   })) ?? [];
@@ -41,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({
@@ -55,15 +58,13 @@ export const createTeam = createAction({
   perform: ({ t, event, stores }) => {
     event?.preventDefault();
     event?.stopPropagation();
-
     const { user } = stores.auth;
-    if (user) {
+    user &&
       stores.dialogs.openModal({
         title: t("Create a workspace"),
         fullscreen: true,
         content: <TeamNew user={user} />,
       });
-    }
   },
 });
 

app/actions/definitions/users.tsx

@@ -1,4 +1,5 @@
 import { PlusIcon } from "outline-icons";
+import * as React from "react";
 import { UserRole } from "@shared/types";
 import { UserRoleHelper } from "@shared/utils/UserRoleHelper";
 import stores from "~/stores";

app/actions/index.ts

@@ -1,4 +1,5 @@
 import flattenDeep from "lodash/flattenDeep";
+import * as React from "react";
 import { toast } from "sonner";
 import { Optional } from "utility-types";
 import { v4 as uuidv4 } from "uuid";

app/components/Arrow.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 export default function Arrow() {
   return (
     <svg

app/components/Authenticated.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { useEffect } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -19,7 +19,7 @@ const Authenticated = ({ children }: Props) => {
 
   // Watching for language changes here as this is the earliest point we might have the user
   // available and means we can start loading translations faster
-  useEffect(() => {
+  React.useEffect(() => {
     void changeLanguage(language, i18n);
   }, [i18n, language]);
 

app/components/AuthenticatedLayout.tsx

@@ -108,7 +108,7 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     can.comment &&
     ui.activeDocumentId &&
     ui.commentsExpanded &&
-    !!team.getPreference(TeamPreference.Commenting);
+    team.getPreference(TeamPreference.Commenting);
 
   const sidebarRight = (
     <AnimatePresence

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,25 +38,14 @@ type Props = {
 };
 
 function Avatar(props: Props) {
-  const {
-    model,
-    style,
-    variant = AvatarVariant.Round,
-    className,
-    ...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}
-      className={className}
-    >
+    <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}
@@ -79,21 +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;
-  width: ${(props) => props.$size}px;
-  height: ${(props) => props.$size}px;
 `;
 
-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/GroupAvatar.tsx

@@ -1,4 +1,5 @@
 import { GroupIcon } from "outline-icons";
+import * as React from "react";
 import { useTheme } from "styled-components";
 import Squircle from "@shared/components/Squircle";
 import Group from "~/models/Group";

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/Avatar/index.ts

@@ -1,7 +1,7 @@
-import Avatar, { IAvatar, AvatarSize, AvatarVariant } from "./Avatar";
+import Avatar, { IAvatar, AvatarSize } from "./Avatar";
 import AvatarWithPresence from "./AvatarWithPresence";
 import { GroupAvatar } from "./GroupAvatar";
 
-export { Avatar, GroupAvatar, AvatarSize, AvatarVariant, AvatarWithPresence };
+export { Avatar, GroupAvatar, AvatarSize, AvatarWithPresence };
 
 export type { IAvatar };

app/components/Branding.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";

app/components/ChangeLanguage.tsx

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

app/components/CircularProgressBar.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import styled, { useTheme } from "styled-components";
 
 const cleanPercentage = (percentage: number) => {

app/components/Collaborators.tsx

@@ -1,21 +1,19 @@
-import * as Popover from "@radix-ui/react-popover";
 import filter from "lodash/filter";
 import isEqual from "lodash/isEqual";
 import orderBy from "lodash/orderBy";
 import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
-import { useState, useMemo, useEffect, useCallback } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import Document from "~/models/Document";
 import { AvatarSize, AvatarWithPresence } from "~/components/Avatar";
 import DocumentViews from "~/components/DocumentViews";
 import Facepile from "~/components/Facepile";
 import NudeButton from "~/components/NudeButton";
+import Popover from "~/components/Popover";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = {
   /** The document to display live collaborators for */
@@ -24,21 +22,6 @@ type Props = {
   limit?: number;
 };
 
-// Styled components to match the original Popover styling
-const StyledPopoverContent = styled(Popover.Content)`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: 75% 0;
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 12px 24px;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  z-index: ${depths.modal};
-  overflow-x: hidden;
-  overflow-y: auto;
-  outline: none;
-`;
-
 /**
  * Displays a list of live collaborators for a document, including their avatars
  * and presence status.
@@ -48,94 +31,58 @@ function Collaborators(props: Props) {
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
-  const [requestedUserIds, setRequestedUserIds] = useState<string[]>([]);
-  const [popoverOpen, setPopoverOpen] = useState(false);
+  const [requestedUserIds, setRequestedUserIds] = React.useState<string[]>([]);
   const { users, presence, ui } = useStores();
   const { document } = props;
-  const { observingUserId } = ui;
   const documentPresence = presence.get(document.id);
-  const documentPresenceArray = useMemo(
-    () => (documentPresence ? Array.from(documentPresence.values()) : []),
-    [documentPresence]
-  );
+  const documentPresenceArray = documentPresence
+    ? Array.from(documentPresence.values())
+    : [];
 
-  // Use Set for O(1) lookups and stable references
-  const presentIds = useMemo(
-    () => new Set(documentPresenceArray.map((p) => p.userId)),
-    [documentPresenceArray]
-  );
-  const editingIds = useMemo(
-    () =>
-      new Set(
-        documentPresenceArray.filter((p) => p.isEditing).map((p) => p.userId)
-      ),
-    [documentPresenceArray]
-  );
+  const presentIds = documentPresenceArray.map((p) => p.userId);
+  const editingIds = documentPresenceArray
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
 
   // ensure currently present via websocket are always ordered first
-  // Memoize collaboratorIds as a Set for efficient lookup
-  const collaboratorIdsSet = useMemo(
-    () => new Set(document.collaboratorIds),
-    [document.collaboratorIds]
-  );
-  const collaborators = useMemo(
+  const collaborators = React.useMemo(
     () =>
       orderBy(
         filter(
           users.all,
           (u) =>
-            (presentIds.has(u.id) || collaboratorIdsSet.has(u.id)) &&
+            (presentIds.includes(u.id) ||
+              document.collaboratorIds.includes(u.id)) &&
             !u.isSuspended
         ),
-        [(u) => presentIds.has(u.id), "id"],
+        [(u) => presentIds.includes(u.id), "id"],
         ["asc", "asc"]
       ),
-    [collaboratorIdsSet, users.all, presentIds]
+    [document.collaboratorIds, users.all, presentIds]
   );
 
   // load any users we don't yet have in memory
-  // Memoize ids to avoid unnecessary effect executions
-  const missingUserIds = useMemo(
-    () =>
-      uniq([...document.collaboratorIds, ...Array.from(presentIds)])
-        .filter((userId) => !users.get(userId))
-        .sort(),
-    [document.collaboratorIds, presentIds, users]
-  );
+  React.useEffect(() => {
+    const ids = uniq([...document.collaboratorIds, ...presentIds])
+      .filter((userId) => !users.get(userId))
+      .sort();
 
-  useEffect(() => {
-    if (
-      !isEqual(requestedUserIds, missingUserIds) &&
-      missingUserIds.length > 0
-    ) {
-      setRequestedUserIds(missingUserIds);
-      void users.fetchPage({ ids: missingUserIds, limit: 100 });
+    if (!isEqual(requestedUserIds, ids) && ids.length > 0) {
+      setRequestedUserIds(ids);
+      void users.fetchPage({ ids, limit: 100 });
     }
-  }, [missingUserIds, requestedUserIds, users]);
+  }, [document, users, presentIds, document.collaboratorIds, requestedUserIds]);
 
-  // Memoize onClick handler to avoid inline function creation
-  const handleAvatarClick = useCallback(
-    (
-        collaboratorId: string,
-        isPresent: boolean,
-        isObserving: boolean,
-        isObservable: boolean
-      ) =>
-      (ev: React.MouseEvent) => {
-        if (isObservable && isPresent) {
-          ev.preventDefault();
-          ev.stopPropagation();
-          ui.setObservingUser(isObserving ? undefined : collaboratorId);
-        }
-      },
-    [ui]
-  );
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "bottom-end",
+  });
 
-  const renderAvatar = useCallback(
+  const renderAvatar = React.useCallback(
     ({ model: collaborator, ...rest }) => {
-      const isPresent = presentIds.has(collaborator.id);
-      const isEditing = editingIds.has(collaborator.id);
-      const isObserving = observingUserId === collaborator.id;
+      const isPresent = presentIds.includes(collaborator.id);
+      const isEditing = editingIds.includes(collaborator.id);
+      const isObserving = ui.observingUserId === collaborator.id;
       const isObservable = collaborator.id !== currentUserId;
 
       return (
@@ -149,48 +96,46 @@ function Collaborators(props: Props) {
           isCurrentUser={currentUserId === collaborator.id}
           onClick={
             isObservable
-              ? handleAvatarClick(
-                  collaborator.id,
-                  isPresent,
-                  isObserving,
-                  isObservable
-                )
+              ? (ev) => {
+                  if (isPresent) {
+                    ev.preventDefault();
+                    ev.stopPropagation();
+                    ui.setObservingUser(
+                      isObserving ? undefined : collaborator.id
+                    );
+                  }
+                }
               : undefined
           }
         />
       );
     },
-    [presentIds, editingIds, observingUserId, currentUserId, handleAvatarClick]
+    [presentIds, ui, currentUserId, editingIds]
   );
 
   return (
-    <Popover.Root open={popoverOpen} onOpenChange={setPopoverOpen}>
-      <Popover.Trigger asChild>
-        <NudeButton
-          width={Math.min(collaborators.length, limit) * AvatarSize.Large}
-          height={AvatarSize.Large}
-        >
-          <Facepile
-            size={AvatarSize.Large}
-            limit={limit}
-            overflow={Math.max(0, collaborators.length - limit)}
-            users={collaborators}
-            renderAvatar={renderAvatar}
-          />
-        </NudeButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <StyledPopoverContent
-          side="bottom"
-          align="end"
-          sideOffset={0}
-          aria-label={t("Viewers")}
-          style={{ width: 300 }}
-        >
-          <DocumentViews document={document} />
-        </StyledPopoverContent>
-      </Popover.Portal>
-    </Popover.Root>
+    <>
+      <PopoverDisclosure {...popover}>
+        {(popoverProps) => (
+          <NudeButton
+            width={Math.min(collaborators.length, limit) * AvatarSize.Large}
+            height={AvatarSize.Large}
+            {...popoverProps}
+          >
+            <Facepile
+              size={AvatarSize.Large}
+              limit={limit}
+              overflow={Math.max(0, collaborators.length - limit)}
+              users={collaborators}
+              renderAvatar={renderAvatar}
+            />
+          </NudeButton>
+        )}
+      </PopoverDisclosure>
+      <Popover {...popover} width={300} aria-label={t("Viewers")} tabIndex={0}>
+        <DocumentViews document={document} isOpen={popover.visible} />
+      </Popover>
+    </>
   );
 }
 

app/components/Collection/CollectionEdit.tsx

@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { useCallback } from "react";
+import * as React from "react";
 import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import { CollectionForm, FormData } from "./CollectionForm";
@@ -16,7 +16,7 @@ export const CollectionEdit = observer(function CollectionEdit_({
   const { collections } = useStores();
   const collection = collections.get(collectionId);
 
-  const handleSubmit = useCallback(
+  const handleSubmit = React.useCallback(
     async (data: FormData) => {
       try {
         await collection?.save(data);

app/components/Collection/CollectionForm.tsx

@@ -1,12 +1,11 @@
-import uniq from "lodash/uniq";
 import { observer } from "mobx-react";
-import { useMemo, useEffect, useCallback, Suspense } from "react";
+import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
 import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
-import { CollectionPermission, TeamPreference } from "@shared/types";
+import { CollectionPermission } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
 import { colorPalette } from "@shared/utils/collections";
 import { CollectionValidation } from "@shared/validations";
@@ -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;
@@ -31,29 +28,8 @@ export interface FormData {
   color: string | null;
   sharing: boolean;
   permission: CollectionPermission | undefined;
-  commenting?: boolean | null;
 }
 
-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 = 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,
@@ -66,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 {
@@ -84,19 +64,13 @@ export const CollectionForm = observer(function CollectionForm_({
       icon: collection?.icon,
       sharing: collection?.sharing ?? true,
       permission: collection?.permission,
-      commenting: collection?.commenting ?? true,
       color: iconColor,
     },
   });
 
   const values = watch();
 
-  // Preload the IconPicker component on mount
-  useEffect(() => {
-    void IconPicker.preload();
-  }, []);
-
-  useEffect(() => {
+  React.useEffect(() => {
     // If the user hasn't picked an icon yet, go ahead and suggest one based on
     // the name of the collection. It's the little things sometimes.
     if (!hasOpenedIconPicker && !collection) {
@@ -109,12 +83,12 @@ export const CollectionForm = observer(function CollectionForm_({
     }
   }, [collection, hasOpenedIconPicker, setValue, values.name, values.icon]);
 
-  useEffect(() => {
+  React.useEffect(() => {
     setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
   }, [setFocus]);
 
-  const handleIconChange = useCallback(
-    (icon: string, color: string) => {
+  const handleIconChange = React.useCallback(
+    (icon: string, color: string | null) => {
       if (icon !== values.icon) {
         setFocus("name");
       }
@@ -131,6 +105,7 @@ export const CollectionForm = observer(function CollectionForm_({
         <Trans>
           Collections are used to group documents and choose permissions
         </Trans>
+        .
       </Text>
       <Flex gap={8}>
         <Input
@@ -141,7 +116,7 @@ export const CollectionForm = observer(function CollectionForm_({
             maxLength: CollectionValidation.maxNameLength,
           })}
           prefix={
-            <Suspense fallback={fallbackIcon}>
+            <React.Suspense fallback={fallbackIcon}>
               <StyledIconPicker
                 icon={values.icon}
                 color={values.color ?? iconColor}
@@ -150,7 +125,7 @@ export const CollectionForm = observer(function CollectionForm_({
                 onOpen={setHasOpenedIconPicker}
                 onChange={handleIconChange}
               />
-            </Suspense>
+            </React.Suspense>
           }
           autoComplete="off"
           autoFocus
@@ -181,36 +156,13 @@ export const CollectionForm = observer(function CollectionForm_({
       )}
 
       {team.sharing && (
-        <Controller
-          control={control}
-          name="sharing"
-          render={({ field }) => (
-            <Switch
-              id="sharing"
-              label={t("Public document sharing")}
-              note={t(
-                "Allow documents within this collection to be shared publicly on the internet."
-              )}
-              checked={field.value}
-              onChange={field.onChange}
-            />
-          )}
-        />
-      )}
-
-      {team.getPreference(TeamPreference.Commenting) && (
-        <Controller
-          control={control}
-          name="commenting"
-          render={({ field }) => (
-            <Switch
-              id="commenting"
-              label={t("Commenting")}
-              note={t("Allow commenting on documents within this collection.")}
-              checked={!!field.value}
-              onChange={field.onChange}
-            />
+        <Switch
+          id="sharing"
+          label={t("Public document sharing")}
+          note={t(
+            "Allow documents within this collection to be shared publicly on the internet."
           )}
+          {...register("sharing")}
         />
       )}
 
@@ -232,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/Collection/CollectionNew.tsx

@@ -1,6 +1,6 @@
 import { runInAction } from "mobx";
 import { observer } from "mobx-react";
-import { useCallback } from "react";
+import * as React from "react";
 import { toast } from "sonner";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -14,7 +14,7 @@ export const CollectionNew = observer(function CollectionNew_({
   onSubmit,
 }: Props) {
   const { collections } = useStores();
-  const handleSubmit = useCallback(
+  const handleSubmit = React.useCallback(
     async (data: FormData) => {
       try {
         const collection = await collections.save(data);

app/components/CollectionDeleteDialog.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";

app/components/CollectionDescription.tsx

@@ -1,23 +1,20 @@
 import debounce from "lodash/debounce";
 import { observer } from "mobx-react";
-import { useMemo, useRef, useCallback, Suspense } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import styled from "styled-components";
 import { richExtensions } from "@shared/editor/nodes";
 import { s } from "@shared/styles";
-import { 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,13 +22,13 @@ 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);
 
-  const handleSave = useMemo(
+  const handleSave = React.useMemo(
     () =>
       debounce(async (getValue) => {
         try {
@@ -46,9 +43,9 @@ function Overview({ collection }: Props) {
     [collection, t]
   );
 
-  const childRef = useRef<HTMLDivElement>(null);
+  const childRef = React.useRef<HTMLDivElement>(null);
   const childOffsetHeight = childRef.current?.offsetHeight || 0;
-  const editorStyle = useMemo(
+  const editorStyle = React.useMemo(
     () => ({
       padding: "0 32px",
       margin: "0 -32px",
@@ -57,43 +54,25 @@ function Overview({ collection }: Props) {
     [childOffsetHeight]
   );
 
-  const onCreateLink = 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 />}
       {(collection.hasDescription || can.update) && (
-        <Suspense fallback={<Placeholder>Loading…</Placeholder>}>
+        <React.Suspense fallback={<Placeholder>Loading…</Placeholder>}>
           <Editor
             defaultValue={collection.data}
             onChange={handleSave}
             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} />
-        </Suspense>
+        </React.Suspense>
       )}
     </>
   );
@@ -105,4 +84,4 @@ const Placeholder = styled(Text)`
   min-height: 27px;
 `;
 
-export default observer(Overview);
+export default observer(CollectionDescription);

app/components/CommandBar/CommandBarResults.tsx

@@ -1,4 +1,5 @@
 import { useMatches, KBarResults } from "kbar";
+import * as React from "react";
 import styled from "styled-components";
 import Text from "~/components/Text";
 import CommandBarItem from "./CommandBarItem";

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,5 +1,5 @@
 import { DocumentIcon } from "outline-icons";
-import { useMemo } from "react";
+import * as React from "react";
 import Icon from "@shared/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
@@ -10,7 +10,7 @@ import { documentPath } from "~/utils/routeHelpers";
 const useRecentDocumentActions = (count = 6) => {
   const { documents, ui } = useStores();
 
-  return useMemo(
+  return React.useMemo(
     () =>
       documents.recentlyViewed
         .filter((document) => document.id !== ui.activeDocumentId)

app/components/CommandBar/useSettingsAction.tsx

@@ -1,5 +1,5 @@
 import { SettingsIcon } from "outline-icons";
-import { useMemo } from "react";
+import * as React from "react";
 import { createAction } from "~/actions";
 import { NavigationSection } from "~/actions/sections";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
@@ -7,7 +7,7 @@ import history from "~/utils/history";
 
 const useSettingsAction = () => {
   const config = useSettingsConfig();
-  const actions = useMemo(
+  const actions = React.useMemo(
     () =>
       config.map((item) => {
         const Icon = item.icon;
@@ -22,7 +22,7 @@ const useSettingsAction = () => {
     [config]
   );
 
-  const navigateToSettings = useMemo(
+  const navigateToSettings = React.useMemo(
     () =>
       createAction({
         id: "settings",

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,5 +1,5 @@
 import { NewDocumentIcon, ShapesIcon } from "outline-icons";
-import { useEffect, useMemo } from "react";
+import * as React from "react";
 import Icon from "@shared/components/Icon";
 import { createAction } from "~/actions";
 import {
@@ -14,11 +14,11 @@ import { newDocumentPath } from "~/utils/routeHelpers";
 const useTemplatesAction = () => {
   const { documents } = useStores();
 
-  useEffect(() => {
+  React.useEffect(() => {
     void documents.fetchAllTemplates();
   }, [documents]);
 
-  const actions = useMemo(
+  const actions = React.useMemo(
     () =>
       documents.templatesAlphabetical.map((template) =>
         createAction({
@@ -61,7 +61,7 @@ const useTemplatesAction = () => {
     [documents.templatesAlphabetical]
   );
 
-  const newFromTemplate = useMemo(
+  const newFromTemplate = React.useMemo(
     () =>
       createAction({
         id: "templates",

app/components/CommentDeleteDialog.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import { toast } from "sonner";
 import Comment from "~/models/Comment";

app/components/ConfirmMoveDialog.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { CollectionPermission, NavigationNode } from "@shared/types";

app/components/ConnectionStatus.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { DisconnectedIcon } from "outline-icons";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -74,6 +75,10 @@ function ConnectionStatus() {
 
 const Button = styled(NudeButton)`
   display: none;
+  position: fixed;
+  bottom: 0;
+  margin: 20px;
+  transform: translateX(-32px);
 
   ${breakpoint("tablet")`
     display: block;

app/components/ContextMenu/Template.tsx

@@ -3,6 +3,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import {
+  useMenuState,
   MenuButton,
   MenuItem as BaseMenuItem,
   MenuStateReturn,
@@ -12,7 +13,6 @@ import MenuIconWrapper from "~/components/ContextMenu/MenuIconWrapper";
 import Flex from "~/components/Flex";
 import { actionToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
-import { useMenuState } from "~/hooks/useMenuState";
 import {
   Action,
   ActionContext,
@@ -52,9 +52,7 @@ const SubMenu = React.forwardRef(function _Template(
 ) {
   const { t } = useTranslation();
   const theme = useTheme();
-  const menu = useMenuState({
-    parentId: parentMenuState.baseId,
-  });
+  const menu = useMenuState();
 
   return (
     <>
@@ -140,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}
@@ -156,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}
@@ -178,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}
             >
@@ -187,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}
@@ -218,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/ContextMenu/index.tsx

@@ -171,9 +171,7 @@ const InnerContextMenu = (props: InnerContextMenuProps) => {
       });
     }
     return () => {
-      if (scrollElement && !props.isSubMenu) {
-        enableBodyScroll(scrollElement);
-      }
+      scrollElement && !props.isSubMenu && enableBodyScroll(scrollElement);
     };
   }, [props.isSubMenu, props.visible]);
 

app/components/CopyToClipboard.ts

@@ -15,7 +15,7 @@ function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
 
   const onClick = React.useCallback(
     (ev: React.MouseEvent<HTMLElement>) => {
-      const childElem = React.Children.only(children);
+      const elem = React.Children.only(children);
 
       copy(text, {
         debug: env.ENVIRONMENT !== "production",
@@ -24,12 +24,8 @@ function CopyToClipboard(props: Props, ref: React.Ref<HTMLElement>) {
 
       onCopy?.();
 
-      if (
-        childElem &&
-        childElem.props &&
-        typeof childElem.props.onClick === "function"
-      ) {
-        childElem.props.onClick(ev);
+      if (elem && elem.props && typeof elem.props.onClick === "function") {
+        elem.props.onClick(ev);
       } else {
         ev.preventDefault();
         ev.stopPropagation();

app/components/DelayedMount.ts

@@ -1,4 +1,4 @@
-import { useState, useEffect } from "react";
+import * as React from "react";
 
 type Props = {
   delay?: number;
@@ -6,9 +6,9 @@ type Props = {
 };
 
 export default function DelayedMount({ delay = 250, children }: Props) {
-  const [isShowing, setShowing] = useState(false);
+  const [isShowing, setShowing] = React.useState(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     const timeout = setTimeout(() => setShowing(true), delay);
     return () => {
       clearTimeout(timeout);

app/components/DesktopEventHandler.tsx

@@ -1,4 +1,4 @@
-import { useRef, useEffect } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
@@ -12,9 +12,9 @@ export default function DesktopEventHandler() {
   const { t } = useTranslation();
   const history = useHistory();
   const { dialogs } = useStores();
-  const hasDisabledUpdateMessage = useRef(false);
+  const hasDisabledUpdateMessage = React.useRef(false);
 
-  useEffect(() => {
+  React.useEffect(() => {
     Desktop.bridge?.redirect((path: string, replace = false) => {
       if (replace) {
         history.replace(path);

app/components/Dialogs.tsx

@@ -1,4 +1,5 @@
 import { observer } from "mobx-react";
+import * as React from "react";
 import Guide from "~/components/Guide";
 import Modal from "~/components/Modal";
 import useStores from "~/hooks/useStores";

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/DocumentCard.tsx

@@ -4,7 +4,7 @@ import { subDays } from "date-fns";
 import { m } from "framer-motion";
 import { observer } from "mobx-react";
 import { CloseIcon, DocumentIcon, ClockIcon, EyeIcon } from "outline-icons";
-import { useRef, useCallback, useMemo } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
@@ -40,7 +40,7 @@ function DocumentCard(props: Props) {
   const { collections } = useStores();
   const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
-  const pinnedToHome = useRef(!pin?.collectionId).current;
+  const pinnedToHome = React.useRef(!pin?.collectionId).current;
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
@@ -63,7 +63,7 @@ function DocumentCard(props: Props) {
     transition,
   };
 
-  const handleUnpin = useCallback(
+  const handleUnpin = React.useCallback(
     async (ev) => {
       ev.preventDefault();
       ev.stopPropagation();
@@ -178,7 +178,7 @@ function DocumentCard(props: Props) {
 
 const ReadingTime = ({ document }: { document: Document }) => {
   const { t } = useTranslation();
-  const markdown = useMemo(() => document.toMarkdown(), [document]);
+  const markdown = React.useMemo(() => document.toMarkdown(), [document]);
   const stats = useTextStats(markdown);
 
   return (

app/components/DocumentContext.tsx

@@ -1,5 +1,5 @@
 import { action, computed, observable } from "mobx";
-import { createContext, useContext, useMemo, PropsWithChildren } from "react";
+import React, { PropsWithChildren } from "react";
 import { Heading } from "@shared/utils/ProsemirrorHelper";
 import Document from "~/models/Document";
 import { Editor } from "~/editor";
@@ -64,10 +64,10 @@ class DocumentContext {
   }
 }
 
-const Context = createContext<DocumentContext | null>(null);
+const Context = React.createContext<DocumentContext | null>(null);
 
 export const useDocumentContext = () => {
-  const ctx = useContext(Context);
+  const ctx = React.useContext(Context);
   if (!ctx) {
     throw new Error(
       "useDocumentContext must be used within DocumentContextProvider"
@@ -79,6 +79,6 @@ export const useDocumentContext = () => {
 export const DocumentContextProvider = ({
   children,
 }: PropsWithChildren<unknown>) => {
-  const context = useMemo(() => new DocumentContext(), []);
+  const context = React.useMemo(() => new DocumentContext(), []);
   return <Context.Provider value={context}>{children}</Context.Provider>;
 };

app/components/DocumentCopy.tsx

@@ -46,6 +46,20 @@ function DocumentCopy({ document, onSubmit }: Props) {
     return nodes;
   }, [policies, collectionTrees, document.isTemplate]);
 
+  const handlePublishChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setPublish(ev.target.checked);
+    },
+    []
+  );
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
   const copy = async () => {
     if (!selectedPath) {
       toast.message(t("Select a location to copy"));
@@ -65,7 +79,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
 
       toast.success(t("Document copied"));
       onSubmit(result);
-    } catch (_err) {
+    } catch (err) {
       toast.error(t("Couldn’t copy the document, try again?"));
     }
   };
@@ -88,7 +102,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
                   label={t("Publish")}
                   labelPosition="right"
                   checked={publish}
-                  onChange={setPublish}
+                  onChange={handlePublishChange}
                 />
               </Text>
             )}
@@ -99,7 +113,7 @@ function DocumentCopy({ document, onSubmit }: Props) {
                   label={t("Include nested documents")}
                   labelPosition="right"
                   checked={recursive}
-                  onChange={setRecursive}
+                  onChange={handleRecursiveChange}
                 />
               </Text>
             )}

app/components/DocumentExplorer.tsx

@@ -60,7 +60,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     if (defaultValue) {
       const node = items.find((item) => item.id === defaultValue);
       if (node) {
-        return ancestors(node).map((ancestorNode) => ancestorNode.id);
+        return ancestors(node).map((node) => node.id);
       }
     }
     return [];
@@ -99,10 +99,10 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   }, [searchTerm]);
 
   React.useEffect(() => {
-    setItemRefs((existingItemRefs) =>
+    setItemRefs((itemRefs) =>
       map(
         fill(Array(items.length), 0),
-        (_, i) => existingItemRefs[i] || React.createRef()
+        (_, i) => itemRefs[i] || React.createRef()
       )
     );
   }, [items.length]);
@@ -180,7 +180,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     );
 
     // remove children
-    const newNodes = filter(nodes, (n) => !includes(descendantIds, n.id));
+    const newNodes = filter(nodes, (node) => !includes(descendantIds, node.id));
     const scrollOffset = calculateInitialScrollOffset(newNodes.length);
     setInitialScrollOffset(scrollOffset);
   };

app/components/DocumentTasks.tsx

@@ -1,6 +1,7 @@
 import { TFunction } from "i18next";
 import { observer } from "mobx-react";
 import { DoneIcon } from "outline-icons";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
 import Document from "~/models/Document";

app/components/DocumentViews.tsx

@@ -1,7 +1,7 @@
 import compact from "lodash/compact";
 import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
-import { useMemo, useCallback } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { dateLocale, dateToRelative } from "@shared/utils/date";
 import Document from "~/models/Document";
@@ -14,86 +14,78 @@ import useStores from "~/hooks/useStores";
 
 type Props = {
   document: Document;
+  isOpen?: boolean;
 };
 
-function DocumentViews({ document }: Props) {
+function DocumentViews({ document, isOpen }: Props) {
   const { t } = useTranslation();
   const { views, presence } = useStores();
   const user = useCurrentUser();
   const locale = dateLocale(user.language);
+
   const documentPresence = presence.get(document.id);
   const documentPresenceArray = documentPresence
     ? Array.from(documentPresence.values())
     : [];
-
-  // Use Set for O(1) lookups and stable references
-  const presentIds = useMemo(
-    () => new Set(documentPresenceArray.map((p) => p.userId)),
-    [documentPresenceArray]
-  );
-  const editingIds = useMemo(
-    () =>
-      new Set(
-        documentPresenceArray.filter((p) => p.isEditing).map((p) => p.userId)
-      ),
-    [documentPresenceArray]
-  );
+  const presentIds = documentPresenceArray.map((p) => p.userId);
+  const editingIds = documentPresenceArray
+    .filter((p) => p.isEditing)
+    .map((p) => p.userId);
 
   // ensure currently present via websocket are always ordered first
-  const documentViews = useMemo(
-    () => views.inDocument(document.id),
-    [views, document.id]
+  const documentViews = views.inDocument(document.id);
+  const sortedViews = sortBy(
+    documentViews,
+    (view) => !presentIds.includes(view.userId)
   );
-  const sortedViews = useMemo(
-    () => sortBy(documentViews, (view) => !presentIds.has(view.userId)),
-    [documentViews, presentIds]
-  );
-  const users = useMemo(
+  const users = React.useMemo(
     () => compact(sortedViews.map((v) => v.user)),
     [sortedViews]
   );
 
-  // Memoize renderItem for PaginatedList
-  const renderItem = useCallback(
-    (model: User) => {
-      const view = documentViews.find((v) => v.userId === model.id);
-      const isPresent = presentIds.has(model.id);
-      const isEditing = editingIds.has(model.id);
-      const subtitle = isPresent
-        ? isEditing
-          ? t("Currently editing")
-          : t("Currently viewing")
-        : t("Viewed {{ timeAgo }}", {
-            timeAgo: dateToRelative(
-              view ? Date.parse(view.lastViewedAt) : new Date(),
-              {
-                addSuffix: true,
-                locale,
-              }
-            ),
-          });
-      return (
-        <ListItem
-          key={model.id}
-          title={model.name}
-          subtitle={subtitle}
-          image={
-            <Avatar key={model.id} model={model} size={AvatarSize.Large} />
-          }
-          border={false}
-          small
-        />
-      );
-    },
-    [documentViews, presentIds, editingIds, t, locale]
-  );
-
   return (
-    <PaginatedList<User>
-      aria-label={t("Viewers")}
-      items={users}
-      renderItem={renderItem}
-    />
+    <>
+      {isOpen && (
+        <PaginatedList
+          aria-label={t("Viewers")}
+          items={users}
+          renderItem={(model: User) => {
+            const view = documentViews.find((v) => v.userId === model.id);
+            const isPresent = presentIds.includes(model.id);
+            const isEditing = editingIds.includes(model.id);
+            const subtitle = isPresent
+              ? isEditing
+                ? t("Currently editing")
+                : t("Currently viewing")
+              : t("Viewed {{ timeAgo }}", {
+                  timeAgo: dateToRelative(
+                    view ? Date.parse(view.lastViewedAt) : new Date(),
+                    {
+                      addSuffix: true,
+                      locale,
+                    }
+                  ),
+                });
+            return (
+              <ListItem
+                key={model.id}
+                title={model.name}
+                subtitle={subtitle}
+                image={
+                  <Avatar
+                    key={model.id}
+                    model={model}
+                    size={AvatarSize.Large}
+                  />
+                }
+                border={false}
+                small
+              />
+            );
+          }}
+        />
+      )}
+    </>
   );
 }
 

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/EventListItem.tsx

@@ -11,7 +11,7 @@ import {
   UserIcon,
   CrossIcon,
 } from "outline-icons";
-import { useRef } from "react";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
@@ -48,12 +48,10 @@ export type DocumentEvent = {
   userId: string;
 };
 
-export type Event = {
-  id: string;
-  actorId: string;
-  createdAt: string;
-  deletedAt?: string;
-} & (RevisionEvent | DocumentEvent);
+export type Event = { id: string; actorId: string; createdAt: string } & (
+  | RevisionEvent
+  | DocumentEvent
+);
 
 type Props = {
   document: Document;
@@ -67,7 +65,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
   const user = "userId" in event ? users.get(event.userId) : undefined;
   const location = useLocation();
   const sidebarContext = useLocationSidebarContext();
-  const revisionLoadedRef = useRef(false);
+  const revisionLoadedRef = React.useRef(false);
   const opts = {
     userName: actor?.name,
   };
@@ -76,7 +74,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     event.id === RevisionHelper.latestId(document.id);
   let meta, icon, to: LocationDescriptor | undefined;
 
-  const ref = useRef<HTMLAnchorElement>(null);
+  const ref = React.useRef<HTMLAnchorElement>(null);
   // the time component tends to steal focus when clicked
   // ...so forward the focus back to the parent item
   const handleTimeClick = () => {
@@ -87,7 +85,6 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     if (
       !document.isDeleted &&
       event.name === "revisions.create" &&
-      !event.deletedAt &&
       !isDerivedFromDocument &&
       !revisionLoadedRef.current
     ) {
@@ -98,31 +95,24 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
 
   switch (event.name) {
     case "revisions.create":
-      {
-        if (event.deletedAt) {
-          icon = <TrashIcon />;
-          meta = t("Revision deleted");
-        } else {
-          icon = <EditIcon size={16} />;
-          meta = event.latest ? (
-            <>
-              {t("Current version")} &middot; {actor?.name}
-            </>
-          ) : (
-            t("{{userName}} edited", opts)
-          );
-          to = {
-            pathname: documentHistoryPath(
-              document,
-              isDerivedFromDocument ? "latest" : event.id
-            ),
-            state: {
-              sidebarContext,
-              retainScrollPosition: true,
-            },
-          };
-        }
-      }
+      icon = <EditIcon size={16} />;
+      meta = event.latest ? (
+        <>
+          {t("Current version")} &middot; {actor?.name}
+        </>
+      ) : (
+        t("{{userName}} edited", opts)
+      );
+      to = {
+        pathname: documentHistoryPath(
+          document,
+          isDerivedFromDocument ? "latest" : event.id
+        ),
+        state: {
+          sidebarContext,
+          retainScrollPosition: true,
+        },
+      };
       break;
 
     case "documents.archive":
@@ -191,7 +181,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
     to = undefined;
   }
 
-  return event.name === "revisions.create" && !event.deletedAt ? (
+  return event.name === "revisions.create" ? (
     <RevisionItem
       small
       exact
@@ -228,12 +218,7 @@ const EventListItem = ({ event, document, ...rest }: Props) => {
       </IconWrapper>
       <Text size="xsmall" type="secondary">
         {meta} &middot;{" "}
-        <Time
-          dateTime={event.deletedAt ?? event.createdAt}
-          relative
-          shorten
-          addSuffix
-        />
+        <Time dateTime={event.createdAt} relative shorten addSuffix />
       </Text>
     </EventItem>
   );

app/components/Facepile.tsx

@@ -1,10 +1,10 @@
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
+import Initials from "./Avatar/Initials";
 
 type Props = {
   /** The users to display */
@@ -31,22 +31,19 @@ function Facepile({
   renderAvatar = Avatar,
   ...rest
 }: Props) {
-  const { t } = useTranslation();
   const filtered = users.filter(Boolean).slice(-limit);
   const Component = renderAvatar;
 
-  if (overflow > 0) {
-    filtered.unshift({
-      id: "overflow",
-      initial: `${users.length ? "+" : ""}${overflow}`,
-      name: t(`{{count}} more user`, { count: overflow }),
-    } as User);
-  }
-
   return (
     <Avatars {...rest}>
+      {overflow > 0 && (
+        <Initials size={size} content={String(overflow)}>
+          {users.length ? "+" : ""}
+          {overflow}
+        </Initials>
+      )}
       {filtered.map((model, index) => {
-        const lastChild = index === 0;
+        const lastChild = index === 0 && overflow <= 0;
         return (
           <Component
             key={model.id}

app/components/Fade.tsx

@@ -1,4 +1,4 @@
-import { useState } from "react";
+import React from "react";
 import styled from "styled-components";
 import { fadeIn } from "~/styles/animations";
 
@@ -21,7 +21,7 @@ type Props = {
  * Wraps children in a <Fade> if loading is true on mount.
  */
 export const ConditionalFade = ({ animate, children }: Props) => {
-  const [isAnimated] = useState(animate);
+  const [isAnimated] = React.useState(animate);
   return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
 };
 

app/components/FilterOptions.tsx

@@ -1,7 +1,7 @@
 import deburr from "lodash/deburr";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { MenuButton } from "reakit/Menu";
+import { useMenuState, MenuButton } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import type { FetchPageParams } from "~/stores/base/Store";
@@ -9,7 +9,6 @@ import Button, { Inner } from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
 import MenuItem from "~/components/ContextMenu/MenuItem";
 import Text from "~/components/Text";
-import { useMenuState } from "~/hooks/useMenuState";
 import Input, { NativeInput, Outline } from "./Input";
 import PaginatedList, { PaginatedItem } from "./PaginatedList";
 
@@ -57,7 +56,7 @@ const FilterOptions = ({
     : "";
 
   const renderItem = React.useCallback(
-    (option) => (
+    (option: TFilterOption) => (
       <MenuItem
         key={option.key}
         onClick={() => {
@@ -175,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/FullscreenLoading.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import styled from "styled-components";
 import Empty from "~/components/Empty";
 import Fade from "~/components/Fade";

app/components/Guide.tsx

@@ -36,8 +36,8 @@ const Guide: React.FC<Props> = ({
 
   return (
     <DialogBackdrop {...dialog}>
-      {(backdropProps) => (
-        <Backdrop {...backdropProps}>
+      {(props) => (
+        <Backdrop {...props}>
           <Dialog
             {...dialog}
             aria-label={title}
@@ -45,8 +45,8 @@ const Guide: React.FC<Props> = ({
             hideOnEsc
             hide={onRequestClose}
           >
-            {(dialogProps) => (
-              <Scene {...dialogProps} {...rest}>
+            {(props) => (
+              <Scene {...props} {...rest}>
                 <Content>
                   {title && <Header>{title}</Header>}
                   {children}

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/components/ColorPicker.tsx

@@ -1,5 +1,5 @@
 import { BackIcon } from "outline-icons";
-import * as React from "react";
+import React from "react";
 import styled from "styled-components";
 import { breakpoints, s, hover } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
@@ -193,7 +193,7 @@ const SwitcherButton = styled(NudeButton)<{ panel: Panel }>`
 `;
 
 const LargeMobileBuiltinColors = styled(BuiltinColors)`
-  max-width: 400px;
+  max-width: 380px;
   padding-right: 8px;
 `;
 

app/components/IconPicker/components/EmojiPanel.tsx

@@ -1,5 +1,5 @@
 import concat from "lodash/concat";
-import * as React from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { EmojiCategory, EmojiSkinTone, IconType } from "@shared/types";

app/components/IconPicker/components/GridTemplate.tsx

@@ -1,6 +1,6 @@
 import chunk from "lodash/chunk";
 import compact from "lodash/compact";
-import * as React from "react";
+import React from "react";
 import styled from "styled-components";
 import { IconType } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";

app/components/IconPicker/components/IconPanel.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { IconType } from "@shared/types";

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -1,6 +1,6 @@
-import { useMemo, useCallback } from "react";
+import React from "react";
 import { useTranslation } from "react-i18next";
-import { Menu, MenuButton, MenuItem } from "reakit";
+import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
 import styled from "styled-components";
 import { depths, s, hover } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
@@ -8,7 +8,6 @@ import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
-import { useMenuState } from "~/hooks/useMenuState";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({
@@ -20,13 +19,16 @@ const SkinTonePicker = ({
 }) => {
   const { t } = useTranslation();
 
-  const handEmojiVariants = useMemo(() => getEmojiVariants({ id: "hand" }), []);
+  const handEmojiVariants = React.useMemo(
+    () => getEmojiVariants({ id: "hand" }),
+    []
+  );
 
   const menu = useMenuState({
     placement: "bottom-end",
   });
 
-  const handleSkinClick = useCallback(
+  const handleSkinClick = React.useCallback(
     (emojiSkin) => {
       menu.hide();
       onChange(emojiSkin);
@@ -34,7 +36,7 @@ const SkinTonePicker = ({
     [menu, onChange]
   );
 
-  const menuItems = useMemo(
+  const menuItems = React.useMemo(
     () =>
       Object.entries(handEmojiVariants).map(([eskin, emoji]) => (
         <MenuItem {...menu} key={emoji.value}>

app/components/IconPicker/index.tsx

@@ -1,20 +1,27 @@
-import * as Popover from "@radix-ui/react-popover";
-import * as Tabs from "@radix-ui/react-tabs";
 import { SmileyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import {
+  PopoverDisclosure,
+  Tab,
+  TabList,
+  TabPanel,
+  usePopoverState,
+  useTabState,
+} from "reakit";
 import styled, { css } from "styled-components";
 import Icon from "@shared/components/Icon";
-import { s, hover, depths } from "@shared/styles";
+import { s, hover } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import Popover from "~/components/Popover";
 import useMobile from "~/hooks/useMobile";
+import useOnClickOutside from "~/hooks/useOnClickOutside";
+import usePrevious from "~/hooks/usePrevious";
 import useWindowSize from "~/hooks/useWindowSize";
-import { fadeAndScaleIn } from "~/styles/animations";
-import { Drawer, DrawerContent, DrawerTrigger } from "../primitives/Drawer";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
 import { PopoverButton } from "./components/PopoverButton";
@@ -24,8 +31,6 @@ const TAB_NAMES = {
   Emoji: "emoji",
 } as const;
 
-type TabName = (typeof TAB_NAMES)[keyof typeof TAB_NAMES];
-
 const POPOVER_WIDTH = 408;
 
 type Props = {
@@ -40,7 +45,6 @@ type Props = {
   onChange: (icon: string | null, color: string | null) => void;
   onOpen?: () => void;
   onClose?: () => void;
-  children?: React.ReactNode;
 };
 
 const IconPicker = ({
@@ -55,16 +59,15 @@ const IconPicker = ({
   onOpen,
   onClose,
   borderOnHover,
-  children,
 }: Props) => {
   const { t } = useTranslation();
 
   const { width: windowWidth } = useWindowSize();
   const isMobile = useMobile();
 
-  const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState("");
   const [chosenColor, setChosenColor] = React.useState(color);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
 
   const iconType = determineIconType(icon);
   const defaultTab = React.useMemo(
@@ -73,40 +76,32 @@ const IconPicker = ({
     [iconType]
   );
 
-  const [activeTab, setActiveTab] = React.useState<TabName>(defaultTab);
+  const popover = usePopoverState({
+    placement: popoverPosition,
+    modal: true,
+    unstable_offset: [0, 0],
+  });
+  const { hide, show, visible } = popover;
+  const tab = useTabState({ selectedId: defaultTab });
+  const previouslyVisible = usePrevious(popover.visible);
 
   const popoverWidth = isMobile ? windowWidth : POPOVER_WIDTH;
-
-  const handleTabChange = React.useCallback((value: string) => {
-    setActiveTab(value as TabName);
-  }, []);
+  // In mobile, popover is absolutely positioned to leave 8px on both sides.
+  const panelWidth = isMobile ? windowWidth - 16 : popoverWidth;
 
   const resetDefaultTab = React.useCallback(() => {
-    setActiveTab(defaultTab);
+    tab.select(defaultTab);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [defaultTab]);
 
-  const handleOpenChange = React.useCallback(
-    (isOpen: boolean) => {
-      setOpen(isOpen);
-      if (isOpen) {
-        onOpen?.();
-      } else {
-        onClose?.();
-        setQuery("");
-        resetDefaultTab();
-      }
-    },
-    [onOpen, onClose, resetDefaultTab]
-  );
-
   const handleIconChange = React.useCallback(
     (ic: string) => {
-      setOpen(false);
+      hide();
       const icType = determineIconType(ic);
       const finalColor = icType === IconType.SVG ? chosenColor : null;
       onChange(ic, finalColor);
     },
-    [onChange, chosenColor]
+    [hide, onChange, chosenColor]
   );
 
   const handleIconColorChange = React.useCallback(
@@ -114,6 +109,7 @@ const IconPicker = ({
       setChosenColor(c);
 
       const icType = determineIconType(icon);
+      // Outline icon set; propagate color change
       if (icType === IconType.SVG) {
         onChange(icon, c);
       }
@@ -122,168 +118,133 @@ const IconPicker = ({
   );
 
   const handleIconRemove = React.useCallback(() => {
-    setOpen(false);
+    hide();
     onChange(null, null);
-  }, [setOpen, onChange]);
+  }, [hide, onChange]);
 
-  const PickerContent = (
-    <Content
-      open={open}
-      activeTab={activeTab}
-      iconColor={chosenColor}
-      iconInitial={initial ?? ""}
-      query={query}
-      panelWidth={popoverWidth}
-      allowDelete={!!(allowDelete && icon)}
-      onTabChange={handleTabChange}
-      onQueryChange={setQuery}
-      onIconChange={handleIconChange}
-      onIconColorChange={handleIconColorChange}
-      onIconRemove={handleIconRemove}
-    />
+  const handlePopoverButtonClick = React.useCallback(
+    (ev: React.MouseEvent) => {
+      ev.stopPropagation();
+      if (visible) {
+        hide();
+      } else {
+        show();
+      }
+    },
+    [hide, show, visible]
   );
 
-  // Update selected tab when default tab changes
+  // Popover open effect
   React.useEffect(() => {
-    setActiveTab(defaultTab);
-  }, [defaultTab]);
+    if (visible && !previouslyVisible) {
+      onOpen?.();
+    } else if (!visible && previouslyVisible) {
+      onClose?.();
+      setQuery("");
+      resetDefaultTab();
+    }
+  }, [visible, previouslyVisible, onOpen, onClose, resetDefaultTab]);
 
-  if (isMobile) {
-    return (
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>
+  // Custom click outside handling rather than using `hideOnClickOutside` from reakit so that we can
+  // prevent event bubbling.
+  useOnClickOutside(
+    contentRef,
+    (event) => {
+      if (
+        popover.visible &&
+        !popover.unstable_disclosureRef.current?.contains(event.target as Node)
+      ) {
+        event.stopPropagation();
+        event.preventDefault();
+        popover.hide();
+      }
+    },
+    { capture: true }
+  );
+
+  return (
+    <>
+      <PopoverDisclosure {...popover}>
+        {(props) => (
           <PopoverButton
+            {...props}
             aria-label={t("Show menu")}
             className={className}
             size={size}
+            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} />
             )}
           </PopoverButton>
-        </DrawerTrigger>
-        <DrawerContent aria-label={t("Icon Picker")}>
-          {PickerContent}
-        </DrawerContent>
-      </Drawer>
-    );
-  }
-
-  return (
-    <Popover.Root open={open} onOpenChange={handleOpenChange} modal={true}>
-      <Popover.Trigger asChild>
-        <PopoverButton
-          aria-label={t("Show menu")}
-          className={className}
-          size={size}
-          $borderOnHover={borderOnHover}
-        >
-          {children ? (
-            children
-          ) : iconType && icon ? (
-            <Icon value={icon} color={color} size={size} initial={initial} />
-          ) : (
-            <StyledSmileyIcon color={theme.placeholder} size={size} />
-          )}
-        </PopoverButton>
-      </Popover.Trigger>
-      <Popover.Portal>
-        <StyledPopoverContent
-          side={popoverPosition === "right" ? "right" : "bottom"}
-          align={popoverPosition === "bottom-start" ? "start" : "center"}
-          sideOffset={0}
-          width={popoverWidth}
-          aria-label={t("Icon Picker")}
-          onClick={(e) => e.stopPropagation()}
-        >
-          {PickerContent}
-        </StyledPopoverContent>
-      </Popover.Portal>
-    </Popover.Root>
-  );
-};
-
-type ContentProps = {
-  open: boolean;
-  activeTab: TabName;
-  query: string;
-  iconColor: string;
-  iconInitial: string;
-  panelWidth: number;
-  allowDelete: boolean;
-  onTabChange: (tab: string) => void;
-  onQueryChange: (query: string) => void;
-  onIconChange: (icon: string) => void;
-  onIconColorChange: (color: string) => void;
-  onIconRemove: () => void;
-};
-
-const Content = ({
-  open,
-  activeTab,
-  iconColor,
-  iconInitial,
-  query,
-  panelWidth,
-  allowDelete,
-  onTabChange,
-  onQueryChange,
-  onIconChange,
-  onIconColorChange,
-  onIconRemove,
-}: ContentProps) => {
-  const { t } = useTranslation();
-
-  return (
-    <Tabs.Root value={activeTab} onValueChange={onTabChange}>
-      <TabActionsWrapper justify="space-between" align="center">
-        <Tabs.List>
-          <StyledTab
-            value={TAB_NAMES["Icon"]}
-            aria-label={t("Icons")}
-            $active={activeTab === TAB_NAMES["Icon"]}
-          >
-            {t("Icons")}
-          </StyledTab>
-          <StyledTab
-            value={TAB_NAMES["Emoji"]}
-            aria-label={t("Emojis")}
-            $active={activeTab === TAB_NAMES["Emoji"]}
-          >
-            {t("Emojis")}
-          </StyledTab>
-        </Tabs.List>
-        {allowDelete && (
-          <RemoveButton onClick={onIconRemove}>{t("Remove")}</RemoveButton>
         )}
-      </TabActionsWrapper>
-      <StyledTabContent value={TAB_NAMES["Icon"]}>
-        <IconPanel
-          panelWidth={panelWidth}
-          initial={iconInitial}
-          color={iconColor}
-          query={query}
-          panelActive={open && activeTab === TAB_NAMES["Icon"]}
-          onIconChange={onIconChange}
-          onColorChange={onIconColorChange}
-          onQueryChange={onQueryChange}
-        />
-      </StyledTabContent>
-      <StyledTabContent value={TAB_NAMES["Emoji"]}>
-        <EmojiPanel
-          panelWidth={panelWidth}
-          query={query}
-          panelActive={open && activeTab === TAB_NAMES["Emoji"]}
-          onEmojiChange={onIconChange}
-          onQueryChange={onQueryChange}
-        />
-      </StyledTabContent>
-    </Tabs.Root>
+      </PopoverDisclosure>
+      <Popover
+        {...popover}
+        ref={contentRef}
+        width={popoverWidth}
+        shrink
+        aria-label={t("Icon Picker")}
+        onClick={(e) => e.stopPropagation()}
+        hideOnClickOutside={false}
+      >
+        <>
+          <TabActionsWrapper justify="space-between" align="center">
+            <TabList {...tab}>
+              <StyledTab
+                {...tab}
+                id={TAB_NAMES["Icon"]}
+                aria-label={t("Icons")}
+                $active={tab.selectedId === TAB_NAMES["Icon"]}
+              >
+                {t("Icons")}
+              </StyledTab>
+              <StyledTab
+                {...tab}
+                id={TAB_NAMES["Emoji"]}
+                aria-label={t("Emojis")}
+                $active={tab.selectedId === TAB_NAMES["Emoji"]}
+              >
+                {t("Emojis")}
+              </StyledTab>
+            </TabList>
+            {allowDelete && icon && (
+              <RemoveButton onClick={handleIconRemove}>
+                {t("Remove")}
+              </RemoveButton>
+            )}
+          </TabActionsWrapper>
+          <StyledTabPanel {...tab}>
+            <IconPanel
+              panelWidth={panelWidth}
+              initial={initial ?? "?"}
+              color={chosenColor}
+              query={query}
+              panelActive={
+                popover.visible && tab.selectedId === TAB_NAMES["Icon"]
+              }
+              onIconChange={handleIconChange}
+              onColorChange={handleIconColorChange}
+              onQueryChange={setQuery}
+            />
+          </StyledTabPanel>
+          <StyledTabPanel {...tab}>
+            <EmojiPanel
+              panelWidth={panelWidth}
+              query={query}
+              panelActive={
+                popover.visible && tab.selectedId === TAB_NAMES["Emoji"]
+              }
+              onEmojiChange={handleIconChange}
+              onQueryChange={setQuery}
+            />
+          </StyledTabPanel>
+        </>
+      </Popover>
+    </>
   );
 };
 
@@ -312,7 +273,7 @@ const TabActionsWrapper = styled(Flex)`
   border-bottom: 1px solid ${s("inputBorder")};
 `;
 
-const StyledTab = styled(Tabs.Trigger)<{ $active: boolean }>`
+const StyledTab = styled(Tab)<{ $active: boolean }>`
   position: relative;
   font-weight: 500;
   font-size: 14px;
@@ -343,32 +304,9 @@ const StyledTab = styled(Tabs.Trigger)<{ $active: boolean }>`
     `}
 `;
 
-const StyledTabContent = styled(Tabs.Content)`
+const StyledTabPanel = styled(TabPanel)`
   height: 410px;
   overflow-y: auto;
 `;
 
-const StyledPopoverContent = styled(Popover.Content)<{ width: number }>`
-  animation: ${fadeAndScaleIn} 200ms ease;
-  transform-origin: var(--radix-popover-content-transform-origin);
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 6px 0;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  z-index: ${depths.modal};
-  width: ${(props) => props.width}px;
-  overflow: hidden;
-  outline: none;
-
-  @media (max-width: 768px) {
-    position: fixed;
-    z-index: ${depths.menu};
-    top: 50px;
-    left: 8px;
-    right: 8px;
-    width: auto;
-  }
-`;
-
 export default React.memo(IconPicker);

app/components/Icons/CircleIcon.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/CollectionIcon.tsx

@@ -1,6 +1,7 @@
 import { observer } from "mobx-react";
 import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
+import * as React from "react";
 import Icon from "@shared/components/Icon";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";

app/components/Icons/GoogleIcon.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/IssueStatusIcon.tsx

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

app/components/Icons/LanguageIcon.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 export function LanguageIcon({ className }: { className?: string }) {
   return (
     <svg

app/components/Icons/MarkdownIcon.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/OutlineIcon.tsx

@@ -1,3 +1,5 @@
+import * as React from "react";
+
 type Props = {
   /** The size of the icon, 24px is default to match standard icons */
   size?: number;

app/components/Icons/PullRequestIcon.tsx

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

app/components/Input.tsx

@@ -1,6 +1,6 @@
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s, ellipsis } from "@shared/styles";
@@ -221,7 +221,7 @@ function Input(
       <label>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
+            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
           ) : (
             wrappedLabel
           ))}

app/components/InputColor.tsx

@@ -1,9 +1,8 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { MenuButton } from "reakit/Menu";
+import { MenuButton, useMenuState } from "reakit/Menu";
 import styled from "styled-components";
 import { s } from "@shared/styles";
-import { useMenuState } from "~/hooks/useMenuState";
 import lazyWithRetry from "~/utils/lazyWithRetry";
 import ContextMenu from "./ContextMenu";
 import DelayedMount from "./DelayedMount";

app/components/InputSelect.tsx

@@ -1,4 +1,3 @@
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import {
   Select,
   SelectOption,
@@ -8,6 +7,7 @@ import {
 } from "@renderlesskit/react";
 import { CheckmarkIcon } from "outline-icons";
 import * as React from "react";
+import { VisuallyHidden } from "reakit/VisuallyHidden";
 import styled, { css } from "styled-components";
 import { s } from "@shared/styles";
 import Button, { Props as ButtonProps, Inner } from "~/components/Button";
@@ -213,7 +213,7 @@ const InputSelect = (props: Props, ref: React.RefObject<InputSelectRef>) => {
       <Wrapper short={short}>
         {label &&
           (labelHidden ? (
-            <VisuallyHidden.Root>{wrappedLabel}</VisuallyHidden.Root>
+            <VisuallyHidden>{wrappedLabel}</VisuallyHidden>
           ) : (
             wrappedLabel
           ))}

app/components/InputSelectNew.tsx

@@ -1,6 +1,6 @@
 import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
 import { transparentize } from "polished";
-import * as React from "react";
+import React from "react";
 import styled from "styled-components";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";

app/components/LanguagePrompt.tsx

@@ -1,5 +1,6 @@
 import { m } from "framer-motion";
 import find from "lodash/find";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { languages, languageOptions } from "@shared/i18n";

app/components/Layout.tsx

@@ -38,41 +38,39 @@ const Layout = React.forwardRef(function Layout_(
   });
 
   return (
-    <MenuProvider>
-      <Container column auto ref={ref}>
-        <Helmet>
-          <title>{title ? title : env.APP_NAME}</title>
-        </Helmet>
+    <Container column auto ref={ref}>
+      <Helmet>
+        <title>{title ? title : env.APP_NAME}</title>
+      </Helmet>
 
-        <SkipNavLink />
+      <SkipNavLink />
 
-        {ui.progressBarVisible && <LoadingIndicatorBar />}
+      {ui.progressBarVisible && <LoadingIndicatorBar />}
 
-        <Container auto>
-          <MenuProvider>{sidebar}</MenuProvider>
+      <Container auto>
+        <MenuProvider>{sidebar}</MenuProvider>
 
-          <SkipNavContent />
-          <Content
-            auto
-            justify="center"
-            $isResizing={ui.sidebarIsResizing}
-            $sidebarCollapsed={sidebarCollapsed}
-            $hasSidebar={!!sidebar}
-            style={
-              sidebarCollapsed
-                ? undefined
-                : {
-                    marginLeft: `${ui.sidebarWidth}px`,
-                  }
-            }
-          >
-            {children}
-          </Content>
+        <SkipNavContent />
+        <Content
+          auto
+          justify="center"
+          $isResizing={ui.sidebarIsResizing}
+          $sidebarCollapsed={sidebarCollapsed}
+          $hasSidebar={!!sidebar}
+          style={
+            sidebarCollapsed
+              ? undefined
+              : {
+                  marginLeft: `${ui.sidebarWidth}px`,
+                }
+          }
+        >
+          {children}
+        </Content>
 
-          {sidebarRight}
-        </Container>
+        {sidebarRight}
       </Container>
-    </MenuProvider>
+    </Container>
   );
 });
 

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/List/Error.tsx

@@ -1,4 +1,5 @@
 import { DisconnectedIcon, WarningIcon } from "outline-icons";
+import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";

app/components/List/Item.tsx

@@ -33,7 +33,7 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   small?: boolean;
   /** Whether to enable keyboard navigation */
   keyboardNavigation?: boolean;
-  enableEllipsis?: boolean;
+  ellipsis?: boolean;
 };
 
 const ListItem = (
@@ -46,7 +46,7 @@ const ListItem = (
     border,
     to,
     keyboardNavigation,
-    enableEllipsis,
+    ellipsis,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -85,7 +85,7 @@ const ListItem = (
         column={!compact}
         $selected={selected}
       >
-        <Heading $small={small} $ellipsis={enableEllipsis}>
+        <Heading $small={small} $ellipsis={ellipsis}>
           {title}
         </Heading>
         {subtitle && (

app/components/List/Placeholder.tsx

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

app/components/LoadingIndicator/LoadingIndicator.ts

@@ -1,11 +1,11 @@
 import { observer } from "mobx-react";
-import { useEffect } from "react";
+import * as React from "react";
 import useStores from "~/hooks/useStores";
 
 function LoadingIndicator() {
   const { ui } = useStores();
 
-  useEffect(() => {
+  React.useEffect(() => {
     ui.enableProgressBar();
     return () => ui.disableProgressBar();
   }, [ui]);

app/components/LoadingIndicator/LoadingIndicatorBar.tsx

@@ -1,3 +1,4 @@
+import * as React from "react";
 import styled, { keyframes } from "styled-components";
 import { depths, s } from "@shared/styles";
 

app/components/Modal.tsx

@@ -1,9 +1,9 @@
-import * as Dialog from "@radix-ui/react-dialog";
 import { observer } from "mobx-react";
 import { CloseIcon, BackIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { Dialog, DialogBackdrop, useDialogState } from "reakit/Dialog";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
@@ -37,6 +37,9 @@ const Modal: React.FC<Props> = ({
   style,
   onRequestClose,
 }: Props) => {
+  const dialog = useDialogState({
+    animated: 250,
+  });
   const [depth, setDepth] = React.useState(0);
   const wasOpen = usePrevious(isOpen);
   const isMobile = useMobile();
@@ -45,12 +48,14 @@ const Modal: React.FC<Props> = ({
   React.useEffect(() => {
     if (!wasOpen && isOpen) {
       setDepth(openModals++);
+      dialog.show();
     }
 
     if (wasOpen && !isOpen) {
       setDepth(openModals--);
+      dialog.hide();
     }
-  }, [wasOpen, isOpen]);
+  }, [dialog, wasOpen, isOpen]);
 
   useUnmount(() => {
     if (isOpen) {
@@ -63,75 +68,76 @@ const Modal: React.FC<Props> = ({
   }
 
   return (
-    <Dialog.Root
-      open={isOpen}
-      onOpenChange={(open) => !open && onRequestClose()}
-    >
-      <Dialog.Portal>
-        <StyledOverlay $fullscreen={fullscreen}>
-          <StyledContent
-            onEscapeKeyDown={onRequestClose}
-            onPointerDownOutside={fullscreen ? undefined : onRequestClose}
-            aria-describedby={undefined}
+    <DialogBackdrop {...dialog}>
+      {(props) => (
+        <Backdrop $fullscreen={fullscreen} {...props}>
+          <Dialog
+            {...dialog}
+            aria-label={typeof title === "string" ? title : undefined}
+            preventBodyScroll
+            hideOnEsc
+            hideOnClickOutside={!fullscreen}
+            hide={onRequestClose}
           >
-            {fullscreen || isMobile ? (
-              <Fullscreen
-                $nested={!!depth}
-                style={
-                  isMobile
-                    ? undefined
-                    : {
-                        marginLeft: `${depth * 12}px`,
-                      }
-                }
-              >
-                <Content>
-                  <Centered onClick={(ev) => ev.stopPropagation()} column>
-                    {title && (
-                      <Text size="xlarge" weight="bold">
-                        {title}
-                      </Text>
-                    )}
-                    <ErrorBoundary>{children}</ErrorBoundary>
-                  </Centered>
-                </Content>
-                <Close onClick={onRequestClose}>
-                  <CloseIcon size={32} />
-                </Close>
-                <Back onClick={onRequestClose}>
-                  <BackIcon size={32} />
-                  <Text>{t("Back")} </Text>
-                </Back>
-              </Fullscreen>
-            ) : (
-              <Small>
-                <Centered
-                  onClick={(ev) => ev.stopPropagation()}
-                  // maxHeight needed for proper overflow behavior in Safari
-                  style={{ maxHeight: "65vh" }}
-                  column
-                  reverse
+            {(props) =>
+              fullscreen || isMobile ? (
+                <Fullscreen
+                  $nested={!!depth}
+                  style={
+                    isMobile
+                      ? undefined
+                      : {
+                          marginLeft: `${depth * 12}px`,
+                        }
+                  }
+                  {...props}
                 >
-                  <SmallContent style={style} shadow>
-                    <ErrorBoundary component="div">{children}</ErrorBoundary>
-                  </SmallContent>
-                  <Header>
-                    {title && <Text size="large">{title}</Text>}
-                    <NudeButton onClick={onRequestClose}>
-                      <CloseIcon />
-                    </NudeButton>
-                  </Header>
-                </Centered>
-              </Small>
-            )}
-          </StyledContent>
-        </StyledOverlay>
-      </Dialog.Portal>
-    </Dialog.Root>
+                  <Content>
+                    <Centered onClick={(ev) => ev.stopPropagation()} column>
+                      {title && (
+                        <Text size="xlarge" weight="bold">
+                          {title}
+                        </Text>
+                      )}
+                      <ErrorBoundary>{children}</ErrorBoundary>
+                    </Centered>
+                  </Content>
+                  <Close onClick={onRequestClose}>
+                    <CloseIcon size={32} />
+                  </Close>
+                  <Back onClick={onRequestClose}>
+                    <BackIcon size={32} />
+                    <Text>{t("Back")} </Text>
+                  </Back>
+                </Fullscreen>
+              ) : (
+                <Small {...props}>
+                  <Centered
+                    onClick={(ev) => ev.stopPropagation()}
+                    column
+                    reverse
+                  >
+                    <SmallContent style={style} shadow>
+                      <ErrorBoundary component="div">{children}</ErrorBoundary>
+                    </SmallContent>
+                    <Header>
+                      {title && <Text size="large">{title}</Text>}
+                      <NudeButton onClick={onRequestClose}>
+                        <CloseIcon />
+                      </NudeButton>
+                    </Header>
+                  </Centered>
+                </Small>
+              )
+            }
+          </Dialog>
+        </Backdrop>
+      )}
+    </DialogBackdrop>
   );
 };
 
-const StyledOverlay = styled(Dialog.Overlay)<{ $fullscreen?: boolean }>`
+const Backdrop = styled(Flex)<{ $fullscreen?: boolean }>`
   position: fixed;
   top: 0;
   left: 0;
@@ -145,24 +151,11 @@ const StyledOverlay = styled(Dialog.Overlay)<{ $fullscreen?: boolean }>`
   transition: opacity 50ms ease-in-out;
   opacity: 0;
 
-  &[data-state="open"] {
+  &[data-enter] {
     opacity: 1;
   }
 `;
 
-const StyledContent = styled(Dialog.Content)`
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  z-index: ${depths.modal};
-  display: flex;
-  justify-content: center;
-  align-items: flex-start;
-  outline: none;
-`;
-
 type FullscreenProps = {
   $nested: boolean;
   theme: DefaultTheme;
@@ -266,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/Notice.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import Flex from "./Flex";

app/components/Notifications/NotificationIcon.tsx

@@ -1,5 +1,6 @@
 import { observer } from "mobx-react";
 import { SubscribeIcon } from "outline-icons";
+import * as React from "react";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import useStores from "~/hooks/useStores";

app/components/Notifications/NotificationListItem.tsx

@@ -8,7 +8,7 @@ import { s, hover, truncateMultiline } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
-import { Avatar, AvatarSize, AvatarVariant } from "../Avatar";
+import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
 import Time from "../Time";
@@ -41,7 +41,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
   return (
     <StyledLink to={notification.path ?? ""} onClick={handleClick}>
       <Container gap={8} $unread={!notification.viewedAt}>
-        <StyledAvatar model={notification.actor} />
+        <StyledAvatar model={notification.actor} size={AvatarSize.Large} />
         <Flex column>
           <Text as="div" size="small">
             <Text weight="bold">
@@ -79,10 +79,7 @@ const StyledCommentEditor = styled(CommentEditor)`
   ${truncateMultiline(3)}
 `;
 
-const StyledAvatar = styled(Avatar).attrs({
-  variant: AvatarVariant.Round,
-  size: AvatarSize.Medium,
-})`
+const StyledAvatar = styled(Avatar)`
   margin-top: 4px;
 `;
 

app/components/Notifications/Notifications.tsx

@@ -23,13 +23,15 @@ import NotificationListItem from "./NotificationListItem";
 type Props = {
   /** Callback when the notification panel wants to close. */
   onRequestClose: () => void;
+  /** Whether the panel is open or not. */
+  isOpen: boolean;
 };
 
 /**
  * A panel containing a list of notifications and controls to manage them.
  */
 function Notifications(
-  { onRequestClose }: Props,
+  { onRequestClose, isOpen }: Props,
   ref: React.RefObject<HTMLDivElement>
 ) {
   const context = useActionContext();
@@ -77,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={notifications.orderedData}
-              renderItem={(item) => (
+              items={isOpen ? notifications.orderedData : undefined}
+              renderItem={(item: Notification) => (
                 <NotificationListItem
                   key={item.id}
                   notification={item}

app/components/Notifications/NotificationsPopover.tsx

@@ -1,11 +1,10 @@
-import * as Popover from "@radix-ui/react-popover";
-import { VisuallyHidden } from "@radix-ui/react-visually-hidden";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
+import { usePopoverState, PopoverDisclosure } from "reakit/Popover";
 import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import { fadeAndSlideUp } from "~/styles/animations";
+import { depths } from "@shared/styles";
+import Popover from "~/components/Popover";
 import Notifications from "./Notifications";
 
 type Props = {
@@ -15,71 +14,44 @@ type Props = {
 const NotificationsPopover: React.FC = ({ children }: Props) => {
   const { t } = useTranslation();
   const scrollableRef = React.useRef<HTMLDivElement>(null);
-  const closeRef = React.useRef<HTMLButtonElement>(null);
 
-  const handleRequestClose = React.useCallback(() => {
-    if (closeRef.current) {
-      closeRef.current.click();
-    }
-  }, []);
+  const popover = usePopoverState({
+    gutter: 0,
+    placement: "top-start",
+    unstable_fixed: true,
+  });
 
-  const handleAutoFocus = React.useCallback((event: Event) => {
-    // Prevent focus from moving to the popover content
-    event.preventDefault();
-
-    // Reset scroll position to the top when popover is opened
-    if (scrollableRef.current) {
+  // Reset scroll position to the top when popover is opened
+  React.useEffect(() => {
+    if (popover.visible && scrollableRef.current) {
       scrollableRef.current.scrollTop = 0;
-      scrollableRef.current.focus();
     }
-  }, []);
+  }, [popover.visible]);
 
   return (
-    <Popover.Root>
-      <Popover.Trigger asChild>{children}</Popover.Trigger>
-      <Popover.Portal>
-        <StyledContent
-          side="top"
-          align="start"
-          sideOffset={0}
-          avoidCollisions={true}
-          aria-label={t("Notifications")}
-          onOpenAutoFocus={handleAutoFocus}
-        >
-          <Notifications
-            onRequestClose={handleRequestClose}
-            ref={scrollableRef}
-          />
-          <VisuallyHidden>
-            <Popover.Close ref={closeRef} />
-          </VisuallyHidden>
-        </StyledContent>
-      </Popover.Portal>
-    </Popover.Root>
+    <>
+      <PopoverDisclosure {...popover}>{children}</PopoverDisclosure>
+      <StyledPopover
+        {...popover}
+        scrollable={false}
+        mobilePosition="bottom"
+        aria-label={t("Notifications")}
+        unstable_initialFocusRef={scrollableRef}
+        shrink
+        flex
+      >
+        <Notifications
+          onRequestClose={popover.hide}
+          isOpen={popover.visible}
+          ref={scrollableRef}
+        />
+      </StyledPopover>
+    </>
   );
 };
 
-const StyledContent = styled(Popover.Content)`
+const StyledPopover = styled(Popover)`
   z-index: ${depths.menu};
-  display: flex;
-  animation: ${fadeAndSlideUp} 200ms ease;
-  transform-origin: 75% 0;
-  background: ${s("menuBackground")};
-  border-radius: 6px;
-  padding: 6px 0;
-  max-height: 75vh;
-  box-shadow: ${s("menuShadow")};
-  width: 380px;
-  overflow: hidden;
-
-  @media (max-width: 768px) {
-    position: fixed;
-    z-index: ${depths.menu};
-    top: 50px;
-    left: 8px;
-    right: 8px;
-    width: auto;
-  }
 `;
 
 export default observer(NotificationsPopover);

app/components/OAuthClient/OAuthClientForm.tsx

@@ -1,149 +0,0 @@
-import { observer } from "mobx-react";
-import { useEffect } 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,
-    },
-  });
-
-  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 && (
-          <Controller
-            control={control}
-            name="published"
-            render={({ field }) => (
-              <Switch
-                label={t("Published")}
-                note={t("Allow this app to be installed by other workspaces")}
-                checked={field.value}
-                onChange={field.onChange}
-              />
-            )}
-          />
-        )}
-      </>
-
-      <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>
-  );
-});