Fix: Pasting over inline code block breaks markdown conversion (#8825)

.env.sample

@@ -127,10 +127,6 @@ GITHUB_APP_NAME=
 GITHUB_APP_ID=
 GITHUB_APP_PRIVATE_KEY=
 
-# Linear
-LINEAR_CLIENT_ID=
-LINEAR_CLIENT_SECRET=
-
 # To configure Discord auth, you'll need to create a Discord Application at
 # => https://discord.com/developers/applications/
 #

.eslintrc

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

.github/workflows/ci.yml

@@ -11,7 +11,7 @@ env:
   DATABASE_URL: postgres://postgres:password@localhost:5432/outline_test
   REDIS_URL: redis://127.0.0.1:6379
   URL: http://localhost:3000
-  NODE_OPTIONS: --max-old-space-size=8192
+  NODE_OPTIONS: --max-old-space-size=8000
   SECRET_KEY: F0E5AD933D7F6FD8F4DBB3E038C501C052DC0593C686D21ACB30AE205D2F634B
   UTILS_SECRET: 123456
   SLACK_VERIFICATION_TOKEN: 123456
@@ -63,7 +63,6 @@ jobs:
     runs-on: ubuntu-latest
     outputs:
       server: ${{ steps.filter.outputs.server }}
-      app: ${{ steps.filter.outputs.app }}
     steps:
       - uses: actions/checkout@v4
       - uses: dorny/paths-filter@v2
@@ -82,7 +81,7 @@ jobs:
               - 'yarn.lock'
 
   test:
-    needs: [build, changes]
+    needs: build
     if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     strategy:
@@ -144,8 +143,8 @@ jobs:
         yarn test --maxWorkers=2 $TESTFILES
 
   bundle-size:
-    needs: [build, types, changes]
-    if: ${{ needs.changes.outputs.app == 'true' && github.repository == 'outline/outline' }}
+    needs: [build, types]
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
@@ -162,4 +161,3 @@ jobs:
       with:
         key: ${{ secrets.RELATIVE_CI_KEY }}
         token: ${{ secrets.GITHUB_TOKEN }}
-        webpackStatsFile: ./build/app/webpack-stats.json

.github/workflows/docker.yml

@@ -3,32 +3,25 @@ name: Docker
 on:
   push:
     tags:
-      - "v*"
+      - 'v*'
 
 env:
   IMAGE_NAME: outlinewiki/outline
   BASE_IMAGE_NAME: outlinewiki/outline-base
 
 jobs:
-  build-arm:
-    runs-on: ubicloud-standard-8-arm
+  build-and-push:
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout
         uses: actions/checkout@v4
 
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3
+
       - name: Set up Docker Buildx
         uses: docker/setup-buildx-action@v3
 
-      - name: Docker base meta
-        id: base_meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.BASE_IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
       - name: Login to Docker Hub
         uses: docker/login-action@v3
         with:
@@ -36,177 +29,24 @@ jobs:
           password: ${{ secrets.DOCKERHUB_TOKEN }}
 
       - name: Build and push base image
-        id: base_build
-        uses: docker/build-push-action@v6
+        uses: docker/build-push-action@v5
         with:
           context: .
           file: Dockerfile.base
-          labels: ${{ steps.base_meta.outputs.labels }}
-          tags: ${{ env.BASE_IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
+          push: true
+          tags: ${{ env.BASE_IMAGE_NAME }}:latest
+          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
 
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
+      - name: Extract version
+        id: version
+        run: echo "VERSION=${GITHUB_REF#refs/tags/v}" >> $GITHUB_OUTPUT
 
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v6
+      - name: Build and push main image
+        uses: docker/build-push-action@v5
         with:
           context: .
-          file: Dockerfile
-          labels: ${{ steps.meta.outputs.labels }}
-          tags: ${{ env.IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/arm64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-linux-arm64
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  build-amd:
-    runs-on: ubicloud-standard-8
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker base meta
-        id: base_meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.BASE_IMAGE_NAME }}
+          push: true
+          platforms: linux/amd64,linux/arm/v7,linux/arm64/v8,linux/ppc64le,linux/s390x
           tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Build and push base image
-        id: base_build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile.base
-          labels: ${{ steps.base_meta.outputs.labels }}
-          tags: ${{ env.BASE_IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: |
-            ${{ env.IMAGE_NAME }}
-          tags: |
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Build and push
-        id: build
-        uses: docker/build-push-action@v6
-        with:
-          context: .
-          file: Dockerfile
-          labels: ${{ steps.meta.outputs.labels }}
-          tags: ${{ env.IMAGE_NAME }}
-          outputs: type=image,push-by-digest=true,name-canonical=true,push=true
-          platforms: linux/amd64
-          cache-from: type=gha
-          cache-to: type=gha,mode=max
-          pull: false
-          build-args: |
-            BASE_IMAGE=${{ env.BASE_IMAGE_NAME }}@${{ steps.base_build.outputs.digest }}
-
-      - name: Export digest
-        run: |
-          mkdir -p ${{ runner.temp }}/digests
-          digest="${{ steps.build.outputs.digest }}"
-          touch "${{ runner.temp }}/digests/${digest#sha256:}"
-
-      - name: Upload digest
-        uses: actions/upload-artifact@v4
-        with:
-          name: digests-linux-amd64
-          path: ${{ runner.temp }}/digests/*
-          if-no-files-found: error
-          retention-days: 1
-
-  merge:
-    runs-on: ubicloud-standard-8
-    needs:
-      - build-amd
-      - build-arm
-    steps:
-      - name: Download digests
-        uses: actions/download-artifact@v4
-        with:
-          path: ${{ runner.temp }}/digests
-          pattern: digests-*
-          merge-multiple: true
-
-      - name: Login to Docker Hub
-        uses: docker/login-action@v3
-        with:
-          username: ${{ secrets.DOCKERHUB_USERNAME }}
-          password: ${{ secrets.DOCKERHUB_TOKEN }}
-
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v3
-
-      - name: Docker meta
-        id: meta
-        uses: docker/metadata-action@v5
-        with:
-          images: ${{ env.IMAGE_NAME }}
-          tags: |
-            type=ref,event=branch
-            type=ref,event=pr
-            type=semver,pattern={{version}}
-            type=semver,pattern={{major}}.{{minor}}
-
-      - name: Create manifest list and push
-        working-directory: ${{ runner.temp }}/digests
-        run: |
-          docker buildx imagetools create $(jq -cr '.tags | map("-t " + .) | join(" ")' <<< "$DOCKER_METADATA_OUTPUT_JSON") \
-            $(printf '${{ env.IMAGE_NAME }}@sha256:%s ' *)
-
-      - name: Inspect image
-        run: |
-          docker buildx imagetools inspect ${{ env.IMAGE_NAME }}:${{ steps.meta.outputs.version }}
+            ${{ env.IMAGE_NAME }}:latest
+            ${{ env.IMAGE_NAME }}:${{ steps.version.outputs.VERSION }}

Dockerfile

@@ -1,6 +1,5 @@
 ARG APP_PATH=/opt/outline
-ARG BASE_IMAGE=outlinewiki/outline-base
-FROM ${BASE_IMAGE} AS base
+FROM outlinewiki/outline-base AS base
 
 ARG APP_PATH
 WORKDIR $APP_PATH
@@ -31,7 +30,7 @@ RUN addgroup --gid 1001 nodejs && \
   adduser --uid 1001 --ingroup nodejs nodejs && \
   chown -R nodejs:nodejs $APP_PATH/build && \
   mkdir -p /var/lib/outline && \
-  chown -R nodejs:nodejs /var/lib/outline
+	chown -R nodejs:nodejs /var/lib/outline
 
 ENV FILE_STORAGE_LOCAL_ROOT_DIR=/var/lib/outline/data
 RUN mkdir -p "$FILE_STORAGE_LOCAL_ROOT_DIR" && \

Dockerfile.base

@@ -1,14 +1,11 @@
 ARG APP_PATH=/opt/outline
-FROM node:20 AS deps
+FROM node:20-slim AS deps
 
 ARG APP_PATH
 WORKDIR $APP_PATH
 COPY ./package.json ./yarn.lock ./
 COPY ./patches ./patches
 
-RUN apt-get update && apt-get install -y cmake
-ENV NODE_OPTIONS="--max-old-space-size=24000"
-
 RUN yarn install --no-optional --frozen-lockfile --network-timeout 1000000 && \
   yarn cache clean
 

LICENSE

@@ -3,7 +3,7 @@ Business Source License 1.1
 Parameters
 
 Licensor:             General Outline, Inc.
-Licensed Work:        Outline 0.83.0
+Licensed Work:        Outline 0.82.0
                       The Licensed Work is (c) 2025 General Outline, Inc.
 Additional Use Grant: You may make use of the Licensed Work, provided that
                       you may not use the Licensed Work for a Document
@@ -15,7 +15,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that
                       Licensed Work by creating teams and documents
                       controlled by such third parties.
 
-Change Date:          2029-04-11
+Change Date:          2029-02-15
 
 Change License:       Apache License, Version 2.0
 

app/actions/definitions/documents.tsx

@@ -29,7 +29,6 @@ import {
   PadlockIcon,
   GlobeIcon,
   LogoutIcon,
-  CaseSensitiveIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
@@ -511,25 +510,6 @@ export const copyDocumentAsMarkdown = createAction({
   },
 });
 
-export const copyDocumentAsPlainText = createAction({
-  name: ({ t }) => t("Copy as text"),
-  section: ActiveDocumentSection,
-  keywords: "clipboard",
-  icon: <CaseSensitiveIcon />,
-  iconInContextMenu: false,
-  visible: ({ activeDocumentId, stores }) =>
-    !!activeDocumentId && stores.policies.abilities(activeDocumentId).download,
-  perform: ({ stores, activeDocumentId, t }) => {
-    const document = activeDocumentId
-      ? stores.documents.get(activeDocumentId)
-      : undefined;
-    if (document) {
-      copy(document.toPlainText());
-      toast.success(t("Text copied to clipboard"));
-    }
-  },
-});
-
 export const copyDocumentShareLink = createAction({
   name: ({ t }) => t("Copy public link"),
   section: ActiveDocumentSection,
@@ -575,12 +555,7 @@ export const copyDocument = createAction({
   section: ActiveDocumentSection,
   icon: <CopyIcon />,
   keywords: "clipboard",
-  children: [
-    copyDocumentLink,
-    copyDocumentShareLink,
-    copyDocumentAsMarkdown,
-    copyDocumentAsPlainText,
-  ],
+  children: [copyDocumentLink, copyDocumentShareLink, copyDocumentAsMarkdown],
 });
 
 export const duplicateDocument = createAction({
@@ -1230,7 +1205,6 @@ export const rootDocumentActions = [
   copyDocumentLink,
   copyDocumentShareLink,
   copyDocumentAsMarkdown,
-  copyDocumentAsPlainText,
   starDocument,
   unstarDocument,
   publishDocument,

app/actions/definitions/oauthClients.tsx

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

app/actions/definitions/teams.tsx

@@ -11,7 +11,7 @@ import { ActionContext } from "~/types";
 import Desktop from "~/utils/Desktop";
 import { TeamSection } from "../sections";
 
-export const switchTeamsList = ({ stores }: { stores: RootStore }) =>
+export const createTeamsList = ({ stores }: { stores: RootStore }) =>
   stores.auth.availableTeams?.map((session) => ({
     id: `switch-${session.id}`,
     name: session.name,
@@ -44,7 +44,7 @@ export const switchTeam = createAction({
   section: TeamSection,
   visible: ({ stores }) =>
     !!stores.auth.availableTeams && stores.auth.availableTeams?.length > 1,
-  children: switchTeamsList,
+  children: createTeamsList,
 });
 
 export const createTeam = createAction({

app/components/Authenticated.tsx

@@ -5,6 +5,7 @@ import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
+import { logoutPath } from "~/utils/routeHelpers";
 import LoadingIndicator from "./LoadingIndicator";
 
 type Props = {
@@ -32,7 +33,7 @@ const Authenticated = ({ children }: Props) => {
   }
 
   void auth.logout(true);
-  return <Redirect to="/" />;
+  return <Redirect to={logoutPath()} />;
 };
 
 export default observer(Authenticated);

app/components/AuthenticatedLayout.tsx

@@ -1,13 +1,7 @@
 import { AnimatePresence } from "framer-motion";
 import { observer } from "mobx-react";
 import * as React from "react";
-import {
-  Switch,
-  Route,
-  useLocation,
-  matchPath,
-  Redirect,
-} from "react-router-dom";
+import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import { TeamPreference } from "@shared/types";
 import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
 import Layout from "~/components/Layout";
@@ -16,7 +10,6 @@ import Sidebar from "~/components/Sidebar";
 import SidebarRight from "~/components/Sidebar/Right";
 import SettingsSidebar from "~/components/Sidebar/Settings";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
-import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
@@ -55,7 +48,6 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
   const can = usePolicy(ui.activeDocumentId);
   const canCollection = usePolicy(ui.activeCollectionId);
   const team = useCurrentTeam();
-  const [spendPostLoginPath] = usePostLoginPath();
 
   const goToSearch = (ev: KeyboardEvent) => {
     if (!ev.metaKey && !ev.ctrlKey) {
@@ -80,11 +72,6 @@ const AuthenticatedLayout: React.FC = ({ children }: Props) => {
     return <ErrorSuspended />;
   }
 
-  const postLoginPath = spendPostLoginPath();
-  if (postLoginPath) {
-    return <Redirect to={postLoginPath} />;
-  }
-
   const sidebar = (
     <Fade>
       <Switch>

app/components/Avatar/Avatar.tsx

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

app/components/Avatar/Initials.tsx

@@ -13,6 +13,7 @@ const Initials = styled(Flex)<{
 }>`
   align-items: center;
   justify-content: center;
+  border-radius: 50%;
   width: 100%;
   height: 100%;
   color: ${(props) =>
@@ -22,6 +23,7 @@ const Initials = styled(Flex)<{
   background-color: ${(props) => props.color ?? props.theme.textTertiary};
   width: ${(props) => props.size}px;
   height: ${(props) => props.size}px;
+  border-radius: 50%;
   flex-shrink: 0;
 
   // adjust font size down for each additional character

app/components/CollectionDescription.tsx

@@ -69,6 +69,7 @@ function CollectionDescription({ collection }: Props) {
             readOnly={!can.update}
             userId={user.id}
             editorStyle={editorStyle}
+            embedsDisabled
           />
           <div ref={childRef} />
         </React.Suspense>

app/components/DocumentBreadcrumb.tsx

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

app/components/DocumentViews.tsx

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

app/components/Fade.tsx

@@ -2,11 +2,6 @@ import React from "react";
 import styled from "styled-components";
 import { fadeIn } from "~/styles/animations";
 
-/**
- * Fade in animation for a component.
- *
- * @param timing - The duration of the fade in animation, default is 250ms.
- */
 const Fade = styled.span<{ timing?: number | string }>`
   animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
 `;
@@ -22,6 +17,7 @@ type Props = {
  */
 export const ConditionalFade = ({ animate, children }: Props) => {
   const [isAnimated] = React.useState(animate);
+
   return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
 };
 

app/components/FilterOptions.tsx

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

app/components/HoverPreview/Components.tsx

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

app/components/HoverPreview/HoverPreview.tsx

@@ -1,5 +1,4 @@
 import { m } from "framer-motion";
-import { observer } from "mobx-react";
 import * as React from "react";
 import { Portal } from "react-portal";
 import styled from "styled-components";
@@ -9,7 +8,6 @@ import useEventListener from "~/hooks/useEventListener";
 import useKeyDown from "~/hooks/useKeyDown";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
-import useStores from "~/hooks/useStores";
 import LoadingIndicator from "../LoadingIndicator";
 import { CARD_MARGIN } from "./Components";
 import HoverPreviewDocument from "./HoverPreviewDocument";
@@ -25,9 +23,9 @@ const POINTER_WIDTH = 22;
 type Props = {
   /** The HTML element that is being hovered over, or null if none. */
   element: HTMLElement | null;
-  /** ID of the unfurl that will be shown in the hover preview. */
-  unfurlId: string | null;
-  /** Whether the preview data is being loaded. */
+  /** Data to be previewed */
+  data: Record<string, any> | null;
+  /** Whether the preview data is being loaded */
   dataLoading: boolean;
   /** A callback on close of the hover preview. */
   onClose: () => void;
@@ -38,155 +36,151 @@ enum Direction {
   DOWN,
 }
 
-const HoverPreviewDesktop = observer(
-  ({ element, unfurlId, dataLoading, onClose }: Props) => {
-    const { unfurls } = useStores();
-    const [isVisible, setVisible] = React.useState(false);
-    const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
-    const cardRef = React.useRef<HTMLDivElement | null>(null);
-    const { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir } =
-      useHoverPosition({
-        cardRef,
-        element,
-        isVisible,
-      });
-    const data = unfurlId ? unfurls.get(unfurlId)?.data : undefined;
+function HoverPreviewDesktop({ element, data, dataLoading, onClose }: Props) {
+  const [isVisible, setVisible] = React.useState(false);
+  const timerClose = React.useRef<ReturnType<typeof setTimeout>>();
+  const cardRef = React.useRef<HTMLDivElement | null>(null);
+  const { cardLeft, cardTop, pointerLeft, pointerTop, pointerDir } =
+    useHoverPosition({
+      cardRef,
+      element,
+      isVisible,
+    });
 
-    const closePreview = React.useCallback(() => {
-      setVisible(false);
-      onClose();
-    }, [onClose]);
+  const closePreview = React.useCallback(() => {
+    setVisible(false);
+    onClose();
+  }, [onClose]);
 
-    const stopCloseTimer = React.useCallback(() => {
-      if (timerClose.current) {
-        clearTimeout(timerClose.current);
-        timerClose.current = undefined;
+  const stopCloseTimer = React.useCallback(() => {
+    if (timerClose.current) {
+      clearTimeout(timerClose.current);
+      timerClose.current = undefined;
+    }
+  }, []);
+
+  const startCloseTimer = React.useCallback(() => {
+    timerClose.current = setTimeout(closePreview, DELAY_CLOSE);
+  }, [closePreview]);
+
+  // Open and close the preview when the element changes.
+  React.useEffect(() => {
+    if (element && data && !dataLoading) {
+      setVisible(true);
+    } else {
+      startCloseTimer();
+    }
+  }, [startCloseTimer, element, data, dataLoading]);
+
+  // Close the preview on Escape, scroll, or click outside.
+  useOnClickOutside(cardRef, closePreview);
+  useKeyDown("Escape", closePreview);
+  useEventListener("scroll", closePreview, window, { capture: true });
+
+  // Ensure that the preview stays open while the user is hovering over the card.
+  React.useEffect(() => {
+    const card = cardRef.current;
+
+    if (isVisible) {
+      if (card) {
+        card.addEventListener("mouseenter", stopCloseTimer);
+        card.addEventListener("mouseleave", startCloseTimer);
       }
-    }, []);
-
-    const startCloseTimer = React.useCallback(() => {
-      timerClose.current = setTimeout(closePreview, DELAY_CLOSE);
-    }, [closePreview]);
-
-    // Open and close the preview when the element changes.
-    React.useEffect(() => {
-      if (element && data && !dataLoading) {
-        setVisible(true);
-      } else {
-        startCloseTimer();
-      }
-    }, [startCloseTimer, element, data, dataLoading]);
-
-    // Close the preview on Escape, scroll, or click outside.
-    useOnClickOutside(cardRef, closePreview);
-    useKeyDown("Escape", closePreview);
-    useEventListener("scroll", closePreview, window, { capture: true });
-
-    // Ensure that the preview stays open while the user is hovering over the card.
-    React.useEffect(() => {
-      const card = cardRef.current;
-
-      if (isVisible) {
-        if (card) {
-          card.addEventListener("mouseenter", stopCloseTimer);
-          card.addEventListener("mouseleave", startCloseTimer);
-        }
-      }
-
-      return () => {
-        if (card) {
-          card.removeEventListener("mouseenter", stopCloseTimer);
-          card.removeEventListener("mouseleave", startCloseTimer);
-        }
-
-        stopCloseTimer();
-      };
-    }, [element, startCloseTimer, isVisible, stopCloseTimer]);
-
-    if (dataLoading) {
-      return <LoadingIndicator />;
     }
 
-    if (!data) {
-      return null;
-    }
+    return () => {
+      if (card) {
+        card.removeEventListener("mouseenter", stopCloseTimer);
+        card.removeEventListener("mouseleave", startCloseTimer);
+      }
 
-    return (
-      <Portal>
-        <Position top={cardTop} left={cardLeft} aria-hidden>
-          {isVisible ? (
-            <Animate
-              initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
-              animate={{
-                opacity: 1,
-                y: 0,
-                transitionEnd: { pointerEvents: "auto" },
-              }}
-            >
-              {data.type === UnfurlResourceType.Mention ? (
-                <HoverPreviewMention
-                  ref={cardRef}
-                  name={data.name}
-                  avatarUrl={data.avatarUrl}
-                  color={data.color}
-                  lastActive={data.lastActive}
-                  email={data.email}
-                />
-              ) : data.type === UnfurlResourceType.Document ? (
-                <HoverPreviewDocument
-                  ref={cardRef}
-                  url={data.url}
-                  id={data.id}
-                  title={data.title}
-                  summary={data.summary}
-                  lastActivityByViewer={data.lastActivityByViewer}
-                />
-              ) : data.type === UnfurlResourceType.Issue ? (
-                <HoverPreviewIssue
-                  ref={cardRef}
-                  url={data.url}
-                  id={data.id}
-                  title={data.title}
-                  description={data.description}
-                  author={data.author}
-                  labels={data.labels}
-                  state={data.state}
-                  createdAt={data.createdAt}
-                />
-              ) : data.type === UnfurlResourceType.PR ? (
-                <HoverPreviewPullRequest
-                  ref={cardRef}
-                  url={data.url}
-                  id={data.id}
-                  title={data.title}
-                  description={data.description}
-                  author={data.author}
-                  createdAt={data.createdAt}
-                  state={data.state}
-                />
-              ) : (
-                <HoverPreviewLink
-                  ref={cardRef}
-                  url={data.url}
-                  thumbnailUrl={data.thumbnailUrl}
-                  title={data.title}
-                  description={data.description}
-                />
-              )}
-              <Pointer
-                top={pointerTop}
-                left={pointerLeft}
-                direction={pointerDir}
-              />
-            </Animate>
-          ) : null}
-        </Position>
-      </Portal>
-    );
+      stopCloseTimer();
+    };
+  }, [element, startCloseTimer, isVisible, stopCloseTimer]);
+
+  if (dataLoading) {
+    return <LoadingIndicator />;
   }
-);
 
-function HoverPreview({ element, unfurlId, dataLoading, ...rest }: Props) {
+  if (!data) {
+    return null;
+  }
+
+  return (
+    <Portal>
+      <Position top={cardTop} left={cardLeft} aria-hidden>
+        {isVisible ? (
+          <Animate
+            initial={{ opacity: 0, y: -20, pointerEvents: "none" }}
+            animate={{
+              opacity: 1,
+              y: 0,
+              transitionEnd: { pointerEvents: "auto" },
+            }}
+          >
+            {data.type === UnfurlResourceType.Mention ? (
+              <HoverPreviewMention
+                ref={cardRef}
+                name={data.name}
+                avatarUrl={data.avatarUrl}
+                color={data.color}
+                lastActive={data.lastActive}
+                email={data.email}
+              />
+            ) : data.type === UnfurlResourceType.Document ? (
+              <HoverPreviewDocument
+                ref={cardRef}
+                url={data.url}
+                id={data.id}
+                title={data.title}
+                summary={data.summary}
+                lastActivityByViewer={data.lastActivityByViewer}
+              />
+            ) : data.type === UnfurlResourceType.Issue ? (
+              <HoverPreviewIssue
+                ref={cardRef}
+                url={data.url}
+                id={data.id}
+                title={data.title}
+                description={data.description}
+                author={data.author}
+                labels={data.labels}
+                state={data.state}
+                createdAt={data.createdAt}
+              />
+            ) : data.type === UnfurlResourceType.PR ? (
+              <HoverPreviewPullRequest
+                ref={cardRef}
+                url={data.url}
+                id={data.id}
+                title={data.title}
+                description={data.description}
+                author={data.author}
+                createdAt={data.createdAt}
+                state={data.state}
+              />
+            ) : (
+              <HoverPreviewLink
+                ref={cardRef}
+                url={data.url}
+                thumbnailUrl={data.thumbnailUrl}
+                title={data.title}
+                description={data.description}
+              />
+            )}
+            <Pointer
+              top={pointerTop}
+              left={pointerLeft}
+              direction={pointerDir}
+            />
+          </Animate>
+        ) : null}
+      </Position>
+    </Portal>
+  );
+}
+
+function HoverPreview({ element, data, dataLoading, ...rest }: Props) {
   const isMobile = useMobile();
   if (isMobile) {
     return null;
@@ -196,7 +190,7 @@ function HoverPreview({ element, unfurlId, dataLoading, ...rest }: Props) {
     <HoverPreviewDesktop
       {...rest}
       element={element}
-      unfurlId={unfurlId}
+      data={data}
       dataLoading={dataLoading}
     />
   );

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

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

app/components/Icons/PullRequestIcon.tsx

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

app/components/Input.tsx

@@ -45,10 +45,6 @@ export const NativeInput = styled.input<{
   ${ellipsis()}
   ${undraggableOnDesktop()}
 
-  &[readOnly] {
-    color: ${s("textSecondary")};
-  }
-
   &:disabled,
   &::placeholder {
     color: ${s("placeholder")};
@@ -130,14 +126,13 @@ export interface Props
     React.InputHTMLAttributes<HTMLInputElement | HTMLTextAreaElement>,
     "prefix"
   > {
-  type?: "text" | "email" | "checkbox" | "search" | "textarea" | "password";
+  type?: "text" | "email" | "checkbox" | "search" | "textarea";
   labelHidden?: boolean;
   label?: string;
   flex?: boolean;
   short?: boolean;
   margin?: string | number;
   error?: string;
-  rows?: number;
   /** Optional component that appears inside the input before the textarea and any icon */
   prefix?: React.ReactNode;
   /** Optional icon that appears inside the input before the textarea */

app/components/Labeled.tsx

@@ -0,0 +1,26 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+import Flex from "~/components/Flex";
+
+type Props = {
+  children?: React.ReactNode;
+  label: React.ReactNode | string;
+};
+
+const Labeled: React.FC<Props> = ({ label, children, ...props }: Props) => (
+  <Flex column {...props}>
+    <Label>{label}</Label>
+    {children}
+  </Flex>
+);
+
+export const Label = styled(Flex)`
+  font-weight: 500;
+  padding-bottom: 4px;
+  display: inline-block;
+  color: ${s("text")};
+`;
+
+export default observer(Labeled);

app/components/Modal.tsx

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

app/components/Notifications/Notifications.tsx

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

app/components/OAuthClient/OAuthClientForm.tsx

@@ -1,142 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { OAuthClientValidation } from "@shared/validations";
-import OAuthClient from "~/models/oauth/OAuthClient";
-import ImageInput from "~/scenes/Settings/components/ImageInput";
-import Button from "~/components/Button";
-import Flex from "~/components/Flex";
-import Input, { LabelText } from "~/components/Input";
-import isCloudHosted from "~/utils/isCloudHosted";
-import Switch from "../Switch";
-
-export interface FormData {
-  name: string;
-  developerName: string;
-  developerUrl: string;
-  description: string;
-  avatarUrl: string;
-  redirectUris: string[];
-  published: boolean;
-}
-
-export const OAuthClientForm = observer(function OAuthClientForm_({
-  handleSubmit,
-  oauthClient,
-}: {
-  handleSubmit: (data: FormData) => void;
-  oauthClient?: OAuthClient;
-}) {
-  const { t } = useTranslation();
-
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    getValues,
-    setFocus,
-    setError,
-    control,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: oauthClient?.name ?? "",
-      description: oauthClient?.description ?? "",
-      avatarUrl: oauthClient?.avatarUrl ?? "",
-      redirectUris: oauthClient?.redirectUris ?? [],
-      published: oauthClient?.published ?? false,
-    },
-  });
-
-  React.useEffect(() => {
-    setTimeout(() => setFocus("name", { shouldSelect: true }), 100);
-  }, [setFocus]);
-
-  return (
-    <form onSubmit={formHandleSubmit(handleSubmit)}>
-      <>
-        <label style={{ marginBottom: "1em" }}>
-          <LabelText>{t("Icon")}</LabelText>
-          <Controller
-            control={control}
-            name="avatarUrl"
-            render={({ field }) => (
-              <ImageInput
-                onSuccess={(url) => field.onChange(url)}
-                onError={(err) => setError("avatarUrl", { message: err })}
-                model={{
-                  id: oauthClient?.id,
-                  avatarUrl: field.value,
-                  initial: getValues().name[0],
-                }}
-                borderRadius={0}
-              />
-            )}
-          />
-        </label>
-        <Input
-          type="text"
-          label={t("Name")}
-          placeholder={t("My App")}
-          {...register("name", {
-            required: true,
-            maxLength: OAuthClientValidation.maxNameLength,
-          })}
-          autoComplete="off"
-          autoFocus
-          flex
-        />
-        <Input
-          type="text"
-          label={t("Tagline")}
-          placeholder={t("A short description")}
-          {...register("description", {
-            maxLength: OAuthClientValidation.maxDescriptionLength,
-          })}
-          flex
-        />
-        <Controller
-          control={control}
-          name="redirectUris"
-          render={({ field }) => (
-            <Input
-              type="textarea"
-              label={t("Callback URLs")}
-              placeholder="https://example.com/callback"
-              ref={field.ref}
-              value={field.value.join("\n")}
-              rows={Math.max(2, field.value.length + 1)}
-              onChange={(event) => {
-                field.onChange(event.target.value.split("\n"));
-              }}
-              required
-            />
-          )}
-        />
-        {isCloudHosted && (
-          <Switch
-            {...register("published")}
-            label={t("Published")}
-            note={t("Allow this app to be installed by other workspaces")}
-          />
-        )}
-      </>
-
-      <Flex justify="flex-end">
-        <Button
-          type="submit"
-          disabled={formState.isSubmitting || !formState.isValid}
-        >
-          {oauthClient
-            ? formState.isSubmitting
-              ? `${t("Saving")}…`
-              : t("Save")
-            : formState.isSubmitting
-            ? `${t("Creating")}…`
-            : t("Create")}
-        </Button>
-      </Flex>
-    </form>
-  );
-});

app/components/OAuthClient/OAuthClientNew.tsx

@@ -1,33 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useHistory } from "react-router-dom";
-import { toast } from "sonner";
-import useStores from "~/hooks/useStores";
-import { settingsPath } from "~/utils/routeHelpers";
-import { OAuthClientForm, FormData } from "./OAuthClientForm";
-
-type Props = {
-  onSubmit: () => void;
-};
-
-export const OAuthClientNew = observer(function OAuthClientNew_({
-  onSubmit,
-}: Props) {
-  const { oauthClients } = useStores();
-  const history = useHistory();
-
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        const oauthClient = await oauthClients.save(data);
-        onSubmit?.();
-        history.push(settingsPath("applications", oauthClient.id));
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [oauthClients, history, onSubmit]
-  );
-
-  return <OAuthClientForm handleSubmit={handleSubmit} />;
-});

app/components/PaginatedDocumentList.tsx

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

app/components/PaginatedEventList.tsx

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

app/components/PaginatedList.test.tsx

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

app/components/PaginatedList.tsx

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

app/components/SearchPopover.tsx

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

app/components/Sidebar/App.tsx

@@ -12,7 +12,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
-import TeamMenu from "~/menus/TeamMenu";
+import OrganizationMenu from "~/menus/OrganizationMenu";
 import { homePath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";
@@ -62,7 +62,7 @@ function AppSidebar() {
         <DndProvider backend={HTML5Backend} options={html5Options}>
           <DragPlaceholder />
 
-          <TeamMenu>
+          <OrganizationMenu>
             {(props: SidebarButtonProps) => (
               <SidebarButton
                 {...props}
@@ -91,7 +91,7 @@ function AppSidebar() {
                 </Tooltip>
               </SidebarButton>
             )}
-          </TeamMenu>
+          </OrganizationMenu>
           <Overflow>
             <Section>
               <SidebarLink

app/components/Sidebar/Sidebar.tsx

@@ -54,8 +54,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const [hasPointerMoved, setPointerMoved] = React.useState(false);
   const isSmallerThanMinimum = width < minWidth;
 
-  const hoverTimeoutRef = React.useRef<NodeJS.Timeout | null>(null);
-
   const handleDrag = React.useCallback(
     (event: MouseEvent) => {
       // suppresses text selection
@@ -116,10 +114,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
 
   const handlePointerActivity = React.useCallback(() => {
     if (ui.sidebarIsClosed) {
-      // clear the timeout when mouse exits
-      if (hoverTimeoutRef.current) {
-        clearTimeout(hoverTimeoutRef.current);
-      }
       setHovering(document.hasFocus());
       setPointerMoved(true);
     }
@@ -128,20 +122,12 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const handlePointerLeave = React.useCallback(
     (ev) => {
       if (hasPointerMoved) {
-        // clear any previous timeout
-        if (hoverTimeoutRef.current) {
-          clearTimeout(hoverTimeoutRef.current);
-        }
-
-        // add a short delay when mouse exits the sidebar before closing
-        hoverTimeoutRef.current = setTimeout(() => {
-          setHovering(
-            document.hasFocus() &&
-              ev.pageX < width &&
-              ev.pageY < window.innerHeight &&
-              ev.pageY > 0
-          );
-        }, 500);
+        setHovering(
+          document.hasFocus() &&
+            ev.pageX < width &&
+            ev.pageY < window.innerHeight &&
+            ev.pageY > 0
+        );
       }
     },
     [width, hasPointerMoved]

app/components/Sidebar/components/ArchiveLink.tsx

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

app/components/Sidebar/components/Collections.tsx

@@ -54,7 +54,7 @@ function Collections() {
       <Flex column>
         <Header id="collections" title={t("Collections")}>
           <Relative>
-            <PaginatedList<Collection>
+            <PaginatedList
               options={params}
               aria-label={t("Collections")}
               items={collections.allActive}
@@ -69,7 +69,7 @@ function Collections() {
                 ) : undefined
               }
               renderError={(props) => <StyledError {...props} />}
-              renderItem={(item, index) => (
+              renderItem={(item: Collection, index) => (
                 <DraggableCollectionLink
                   key={item.id}
                   collection={item}

app/components/Sidebar/components/DocumentLink.tsx

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

app/components/Sidebar/components/NavLink.tsx

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

app/components/Sidebar/hooks/useDragAndDrop.tsx

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

app/components/Table.tsx

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

app/components/TeamLogo.ts

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

app/components/Text.ts

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

app/editor/components/LinkEditor.tsx

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

app/editor/components/MentionMenu.tsx

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

app/editor/components/PasteMenu.tsx

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

app/editor/components/SelectionToolbar.tsx

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

app/editor/components/SuggestionsMenu.tsx

@@ -645,11 +645,12 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                     "section" in item ? item.section?.({ t }) : undefined;
 
                   const response = (
-                    <React.Fragment key={`${index}-${item.name}`}>
+                    <>
                       {currentHeading !== previousHeading && (
                         <Header key={currentHeading}>{currentHeading}</Header>
                       )}
                       <ListItem
+                        key={index}
                         onPointerMove={handlePointerMove}
                         onPointerDown={handlePointerDown}
                       >
@@ -658,7 +659,7 @@ function SuggestionsMenu<T extends MenuItem>(props: Props<T>) {
                           onClick: () => handleClickItem(item),
                         })}
                       </ListItem>
-                    </React.Fragment>
+                    </>
                   );
 
                   previousHeading = currentHeading;

app/editor/extensions/ClipboardTextSerializer.ts

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

app/editor/extensions/HoverPreviews.tsx

@@ -4,9 +4,9 @@ import { EditorView } from "prosemirror-view";
 import * as React from "react";
 import Extension from "@shared/editor/lib/Extension";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import stores from "~/stores";
 import HoverPreview from "~/components/HoverPreview";
 import env from "~/env";
+import { client } from "~/utils/ApiClient";
 
 interface HoverPreviewsOptions {
   /** Delay before the target is considered "hovered" and callback is triggered. */
@@ -16,11 +16,11 @@ interface HoverPreviewsOptions {
 export default class HoverPreviews extends Extension {
   state: {
     activeLinkElement: HTMLElement | null;
-    unfurlId: string | null;
+    data: Record<string, any> | null;
     dataLoading: boolean;
   } = observable({
     activeLinkElement: null,
-    unfurlId: null,
+    data: null,
     dataLoading: false,
   });
 
@@ -62,25 +62,19 @@ export default class HoverPreviews extends Extension {
                     );
 
                     if (url) {
-                      const transformedUrl = url.startsWith("/")
-                        ? env.URL + url
-                        : url;
-
                       this.state.dataLoading = true;
-
-                      const unfurl = await stores.unfurls.fetchUnfurl({
-                        url: transformedUrl,
-                        documentId,
-                      });
-
-                      if (unfurl) {
+                      try {
+                        const data = await client.post("/urls.unfurl", {
+                          url: url.startsWith("/") ? env.URL + url : url,
+                          documentId,
+                        });
                         this.state.activeLinkElement = element;
-                        this.state.unfurlId = transformedUrl;
-                      } else {
+                        this.state.data = data;
+                      } catch (err) {
                         this.state.activeLinkElement = null;
+                      } finally {
+                        this.state.dataLoading = false;
                       }
-
-                      this.state.dataLoading = false;
                     }
                   }),
                   this.options.delay
@@ -107,11 +101,10 @@ export default class HoverPreviews extends Extension {
   widget = () => (
     <HoverPreview
       element={this.state.activeLinkElement}
-      unfurlId={this.state.unfurlId}
+      data={this.state.data}
       dataLoading={this.state.dataLoading}
       onClose={action(() => {
         this.state.activeLinkElement = null;
-        this.state.unfurlId = null;
       })}
     />
   );

app/editor/extensions/PasteHandler.tsx

@@ -24,7 +24,7 @@ import parseCollectionSlug from "@shared/utils/parseCollectionSlug";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
 import { isCollectionUrl, isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
-import { PasteMenu } from "../components/PasteMenu";
+import PasteMenu from "../components/PasteMenu";
 
 export default class PasteHandler extends Extension {
   state: {
@@ -88,7 +88,7 @@ export default class PasteHandler extends Extension {
 
             // If the users selection is currently in a code block then paste
             // as plain text, ignore all formatting and HTML content.
-            if (isInCode(state, { inclusive: true })) {
+            if (isInCode(state)) {
               event.preventDefault();
               view.dispatch(state.tr.insertText(text));
               return true;
@@ -415,21 +415,6 @@ export default class PasteHandler extends Extension {
     });
   };
 
-  private insertMention = () => {
-    const { view } = this.editor;
-    const { state } = view;
-    const result = this.findPlaceholder(state, this.state.pastedText);
-
-    // Remove just the placeholder here.
-    // Mention node will be created by SuggestionsMenu.
-    if (result) {
-      const tr = state.tr.deleteRange(result[0], result[1]);
-      view.dispatch(
-        tr.setSelection(TextSelection.near(tr.doc.resolve(result[0])))
-      );
-    }
-  };
-
   private removePlaceholder = () => {
     const { view } = this.editor;
     const { state } = view;
@@ -465,11 +450,6 @@ export default class PasteHandler extends Extension {
         this.insertEmbed();
         break;
       }
-      case "mention": {
-        this.hidePasteMenu();
-        this.insertMention();
-        break;
-      }
       default:
         break;
     }

app/hooks/useIsMounted.ts

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

app/hooks/useLoggedInSessions.ts

@@ -1,14 +0,0 @@
-import { getCookie } from "tiny-cookie";
-
-export type Sessions = Record<
-  string,
-  {
-    name: string;
-    logoUrl: string;
-    url: string;
-  }
->;
-
-export function useLoggedInSessions(): Sessions {
-  return JSON.parse(getCookie("sessions") || "{}");
-}

app/hooks/useRequest.ts

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

app/hooks/useSettingsConfig.ts

@@ -8,12 +8,12 @@ import {
   GlobeIcon,
   TeamIcon,
   BeakerIcon,
+  BuildingBlocksIcon,
   SettingsIcon,
   ExportIcon,
   ImportIcon,
   ShapesIcon,
   Icon,
-  InternetIcon,
 } from "outline-icons";
 import React, { ComponentProps } from "react";
 import { useTranslation } from "react-i18next";
@@ -29,8 +29,7 @@ import useCurrentUser from "./useCurrentUser";
 import usePolicy from "./usePolicy";
 
 const ApiKeys = lazy(() => import("~/scenes/Settings/ApiKeys"));
-const Applications = lazy(() => import("~/scenes/Settings/Applications"));
-const APIAndApps = lazy(() => import("~/scenes/Settings/APIAndApps"));
+const PersonalApiKeys = lazy(() => import("~/scenes/Settings/PersonalApiKeys"));
 const Details = lazy(() => import("~/scenes/Settings/Details"));
 const Export = lazy(() => import("~/scenes/Settings/Export"));
 const Features = lazy(() => import("~/scenes/Settings/Features"));
@@ -41,6 +40,7 @@ const Notifications = lazy(() => import("~/scenes/Settings/Notifications"));
 const Preferences = lazy(() => import("~/scenes/Settings/Preferences"));
 const Profile = lazy(() => import("~/scenes/Settings/Profile"));
 const Security = lazy(() => import("~/scenes/Settings/Security"));
+const SelfHosted = lazy(() => import("~/scenes/Settings/SelfHosted"));
 const Shares = lazy(() => import("~/scenes/Settings/Shares"));
 const Templates = lazy(() => import("~/scenes/Settings/Templates"));
 const Zapier = lazy(() => import("~/scenes/Settings/Zapier"));
@@ -88,12 +88,12 @@ const useSettingsConfig = () => {
         icon: EmailIcon,
       },
       {
-        name: t("API & Apps"),
-        path: settingsPath("api-and-apps"),
-        component: APIAndApps,
-        enabled: true,
+        name: t("API Keys"),
+        path: settingsPath("personal-api-keys"),
+        component: PersonalApiKeys,
+        enabled: can.createApiKey && !can.listApiKeys,
         group: t("Account"),
-        icon: PadlockIcon,
+        icon: CodeIcon,
       },
       // Workspace
       {
@@ -152,14 +152,6 @@ const useSettingsConfig = () => {
         group: t("Workspace"),
         icon: CodeIcon,
       },
-      {
-        name: t("Applications"),
-        path: settingsPath("applications"),
-        component: Applications,
-        enabled: can.listOAuthClients,
-        group: t("Workspace"),
-        icon: InternetIcon,
-      },
       {
         name: t("Shared Links"),
         path: settingsPath("shares"),
@@ -185,6 +177,14 @@ const useSettingsConfig = () => {
         icon: ExportIcon,
       },
       // Integrations
+      {
+        name: t("Self Hosted"),
+        path: integrationSettingsPath("self-hosted"),
+        component: SelfHosted,
+        enabled: can.update && !isCloudHosted,
+        group: t("Integrations"),
+        icon: BuildingBlocksIcon,
+      },
       {
         name: "Zapier",
         path: integrationSettingsPath("zapier"),

app/menus/OAuthAuthenticationMenu.tsx

@@ -1,57 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useMenuState } from "reakit/Menu";
-import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import ContextMenu from "~/components/ContextMenu";
-import MenuItem from "~/components/ContextMenu/MenuItem";
-import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
-import useStores from "~/hooks/useStores";
-
-type Props = {
-  /** The OAuthAuthentication to associate with the menu */
-  oauthAuthentication: OAuthAuthentication;
-};
-
-function OAuthAuthenticationMenu({ oauthAuthentication }: Props) {
-  const menu = useMenuState({
-    modal: true,
-  });
-  const { dialogs } = useStores();
-  const { t } = useTranslation();
-
-  const handleRevoke = React.useCallback(() => {
-    dialogs.openModal({
-      title: t("Revoke {{ appName }}", {
-        appName: oauthAuthentication.oauthClient.name,
-      }),
-      content: (
-        <ConfirmationDialog
-          onSubmit={async () => {
-            await oauthAuthentication.deleteAll();
-            dialogs.closeAllModals();
-          }}
-          submitText={t("Revoke")}
-          savingText={`${t("Revoking")}…`}
-          danger
-        >
-          {t("Are you sure you want to revoke access?")}
-        </ConfirmationDialog>
-      ),
-    });
-  }, [t, dialogs, oauthAuthentication]);
-
-  return (
-    <>
-      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
-      <ContextMenu {...menu}>
-        <MenuItem {...menu} onClick={handleRevoke} dangerous>
-          {t("Revoke")}
-        </MenuItem>
-      </ContextMenu>
-    </>
-  );
-}
-
-export default observer(OAuthAuthenticationMenu);

app/menus/OAuthClientMenu.tsx

@@ -1,68 +0,0 @@
-import { observer } from "mobx-react";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useMenuState } from "reakit/Menu";
-import OAuthClient from "~/models/oauth/OAuthClient";
-import OAuthClientDeleteDialog from "~/scenes/Settings/components/OAuthClientDeleteDialog";
-import ContextMenu from "~/components/ContextMenu";
-import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
-import Template from "~/components/ContextMenu/Template";
-import useStores from "~/hooks/useStores";
-import { settingsPath } from "~/utils/routeHelpers";
-
-type Props = {
-  /** The oauthClient to associate with the menu */
-  oauthClient: OAuthClient;
-  /** Whether to show the edit button */
-  showEdit?: boolean;
-};
-
-function OAuthClientMenu({ oauthClient, showEdit }: Props) {
-  const menu = useMenuState({
-    modal: true,
-  });
-  const { dialogs } = useStores();
-  const { t } = useTranslation();
-
-  const handleDelete = React.useCallback(() => {
-    dialogs.openModal({
-      title: t("Delete app"),
-      content: (
-        <OAuthClientDeleteDialog
-          onSubmit={dialogs.closeAllModals}
-          oauthClient={oauthClient}
-        />
-      ),
-    });
-  }, [t, dialogs, oauthClient]);
-
-  return (
-    <>
-      <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
-      <ContextMenu {...menu}>
-        <Template
-          {...menu}
-          items={[
-            {
-              type: "route",
-              title: `${t("Edit")}…`,
-              visible: showEdit,
-              to: settingsPath("applications", oauthClient.id),
-            },
-            {
-              type: "separator",
-            },
-            {
-              type: "button",
-              dangerous: true,
-              title: `${t("Delete")}…`,
-              onClick: handleDelete,
-            },
-          ]}
-        />
-      </ContextMenu>
-    </>
-  );
-}
-
-export default observer(OAuthClientMenu);

app/menus/OrganizationMenu.tsx

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

app/models/Document.ts

@@ -17,7 +17,6 @@ import {
   NavigationNodeType,
   NotificationEventType,
 } from "@shared/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import Storage from "@shared/utils/Storage";
 import { isRTL } from "@shared/utils/rtl";
 import slugify from "@shared/utils/slugify";
@@ -664,24 +663,6 @@ export default class Document extends ArchivableModel implements Searchable {
     return markdown;
   };
 
-  /**
-   * Returns the plain text representation of the document derived from the ProseMirror data.
-   *
-   * @returns The plain text representation of the document as a string.
-   */
-  toPlainText = () => {
-    const extensionManager = new ExtensionManager(withComments(richExtensions));
-    const schema = new Schema({
-      nodes: extensionManager.nodes,
-      marks: extensionManager.marks,
-    });
-    const text = ProsemirrorHelper.toPlainText(
-      Node.fromJSON(schema, this.data),
-      schema
-    );
-    return text;
-  };
-
   download = (contentType: ExportContentType) =>
     client.post(
       `/documents.export`,

app/models/Import.ts

@@ -15,9 +15,6 @@ class Import extends Model {
   /** The name of the import. */
   name: string;
 
-  /** Descriptive error message when the import errors out. */
-  error: string | null;
-
   /** The current state of the import. */
   @Field
   @observable

app/models/Integration.ts

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

app/models/Unfurl.ts

@@ -1,18 +0,0 @@
-import { observable } from "mobx";
-import { UnfurlResourceType, UnfurlResponse } from "@shared/types";
-import Model from "./base/Model";
-
-class Unfurl<UnfurlType extends UnfurlResourceType> extends Model {
-  static modelName = "Unfurl";
-
-  @observable
-  type: UnfurlType;
-
-  @observable
-  data: UnfurlResponse[UnfurlType];
-
-  @observable
-  fetchedAt: string;
-}
-
-export default Unfurl;

app/models/oauth/OAuthAuthentication.ts

@@ -1,39 +0,0 @@
-import { action, observable } from "mobx";
-import { client } from "~/utils/ApiClient";
-import User from "../User";
-import ParanoidModel from "../base/ParanoidModel";
-import Field from "../decorators/Field";
-import Relation from "../decorators/Relation";
-import OAuthClient from "./OAuthClient";
-
-class OAuthAuthentication extends ParanoidModel {
-  static modelName = "OAuthAuthentication";
-
-  /** A list of scopes that this authentication has access to */
-  @Field
-  @observable
-  scope: string[];
-
-  @Relation(() => User)
-  user: User;
-
-  userId: string;
-
-  oauthClient: Pick<OAuthClient, "id" | "name" | "clientId" | "avatarUrl">;
-
-  oauthClientId: string;
-
-  lastActiveAt: string;
-
-  @action
-  public async deleteAll() {
-    await client.post(`/${this.store.apiEndpoint}.delete`, {
-      oauthClientId: this.oauthClientId,
-      scope: this.scope,
-    });
-
-    return this.store.remove(this.id);
-  }
-}
-
-export default OAuthAuthentication;

app/models/oauth/OAuthClient.ts

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

app/routes/authenticated.tsx

@@ -42,77 +42,55 @@ const RedirectDocument = ({
   />
 );
 
-/**
- * The authenticated routes are all the routes of the application that require
- * the user to be logged in.
- */
 function AuthenticatedRoutes() {
   const team = useCurrentTeam();
   const can = usePolicy(team);
 
   return (
-    <Switch>
-      <WebsocketProvider>
-        <AuthenticatedLayout>
-          <React.Suspense
-            fallback={
-              <CenteredContent>
-                <PlaceholderDocument />
-              </CenteredContent>
-            }
-          >
-            <Switch>
-              {can.createDocument && (
-                <Route exact path={draftsPath()} component={Drafts} />
-              )}
-              {can.createDocument && (
-                <Route exact path={archivePath()} component={Archive} />
-              )}
-              {can.createDocument && (
-                <Route exact path={trashPath()} component={Trash} />
-              )}
-              <Route path={`${homePath()}/:tab?`} component={Home} />
-              <Redirect from="/dashboard" to={homePath()} />
-              <Redirect exact from="/starred" to={homePath()} />
-              <Redirect
-                exact
-                from="/templates"
-                to={settingsPath("templates")}
-              />
-              <Redirect exact from="/collections/*" to="/collection/*" />
-              <Route exact path="/collection/:id/new" component={DocumentNew} />
-              <Route
-                exact
-                path="/collection/:id/:tab?"
-                component={Collection}
-              />
-              <Route exact path="/doc/new" component={DocumentNew} />
-              <Route exact path={`/d/${slug}`} component={RedirectDocument} />
-              <Route
-                exact
-                path={`/doc/${slug}/history/:revisionId?`}
-                component={Document}
-              />
-              <Route
-                exact
-                path={`/doc/${slug}/insights`}
-                component={Document}
-              />
-              <Route exact path={`/doc/${slug}/edit`} component={Document} />
-              <Route path={`/doc/${slug}`} component={Document} />
-              <Route
-                exact
-                path={`${searchPath()}/:query?`}
-                component={Search}
-              />
-              <Route path="/404" component={Error404} />
-              <SettingsRoutes />
-              <Route component={Error404} />
-            </Switch>
-          </React.Suspense>
-        </AuthenticatedLayout>
-      </WebsocketProvider>
-    </Switch>
+    <WebsocketProvider>
+      <AuthenticatedLayout>
+        <React.Suspense
+          fallback={
+            <CenteredContent>
+              <PlaceholderDocument />
+            </CenteredContent>
+          }
+        >
+          <Switch>
+            {can.createDocument && (
+              <Route exact path={draftsPath()} component={Drafts} />
+            )}
+            {can.createDocument && (
+              <Route exact path={archivePath()} component={Archive} />
+            )}
+            {can.createDocument && (
+              <Route exact path={trashPath()} component={Trash} />
+            )}
+            <Route path={`${homePath()}/:tab?`} component={Home} />
+            <Redirect from="/dashboard" to={homePath()} />
+            <Redirect exact from="/starred" to={homePath()} />
+            <Redirect exact from="/templates" to={settingsPath("templates")} />
+            <Redirect exact from="/collections/*" to="/collection/*" />
+            <Route exact path="/collection/:id/new" component={DocumentNew} />
+            <Route exact path="/collection/:id/:tab?" component={Collection} />
+            <Route exact path="/doc/new" component={DocumentNew} />
+            <Route exact path={`/d/${slug}`} component={RedirectDocument} />
+            <Route
+              exact
+              path={`/doc/${slug}/history/:revisionId?`}
+              component={Document}
+            />
+            <Route exact path={`/doc/${slug}/insights`} component={Document} />
+            <Route exact path={`/doc/${slug}/edit`} component={Document} />
+            <Route path={`/doc/${slug}`} component={Document} />
+            <Route exact path={`${searchPath()}/:query?`} component={Search} />
+            <Route path="/404" component={Error404} />
+            <SettingsRoutes />
+            <Route component={Error404} />
+          </Switch>
+        </React.Suspense>
+      </AuthenticatedLayout>
+    </WebsocketProvider>
   );
 }
 

app/routes/index.tsx

@@ -6,15 +6,14 @@ import FullscreenLoading from "~/components/FullscreenLoading";
 import Route from "~/components/ProfiledRoute";
 import env from "~/env";
 import useQueryNotices from "~/hooks/useQueryNotices";
-import lazy from "~/utils/lazyWithRetry";
+import lazyWithRetry from "~/utils/lazyWithRetry";
 import { matchDocumentSlug as slug } from "~/utils/routeHelpers";
 
-const Authenticated = lazy(() => import("~/components/Authenticated"));
-const AuthenticatedRoutes = lazy(() => import("./authenticated"));
-const SharedDocument = lazy(() => import("~/scenes/Document/Shared"));
-const Login = lazy(() => import("~/scenes/Login"));
-const Logout = lazy(() => import("~/scenes/Logout"));
-const OAuthAuthorize = lazy(() => import("~/scenes/Login/OAuthAuthorize"));
+const Authenticated = lazyWithRetry(() => import("~/components/Authenticated"));
+const AuthenticatedRoutes = lazyWithRetry(() => import("./authenticated"));
+const SharedDocument = lazyWithRetry(() => import("~/scenes/Document/Shared"));
+const Login = lazyWithRetry(() => import("~/scenes/Login"));
+const Logout = lazyWithRetry(() => import("~/scenes/Logout"));
 
 export default function Routes() {
   useQueryNotices();
@@ -44,7 +43,6 @@ export default function Routes() {
           <Route exact path="/create" component={Login} />
           <Route exact path="/logout" component={Logout} />
           <Route exact path="/desktop-redirect" component={DesktopRedirect} />
-          <Route exact path="/oauth/authorize" component={OAuthAuthorize} />
 
           <Redirect exact from="/share/:shareId" to="/s/:shareId" />
           <Route exact path="/s/:shareId" component={SharedDocument} />

app/routes/settings.tsx

@@ -7,7 +7,6 @@ import useSettingsConfig from "~/hooks/useSettingsConfig";
 import lazy from "~/utils/lazyWithRetry";
 import { matchDocumentSlug, settingsPath } from "~/utils/routeHelpers";
 
-const Application = lazy(() => import("~/scenes/Settings/Application"));
 const Document = lazy(() => import("~/scenes/Document"));
 
 export default function SettingsRoutes() {
@@ -23,12 +22,6 @@ export default function SettingsRoutes() {
           component={config.component}
         />
       ))}
-      {/* TODO: Refactor these exceptions into config? */}
-      <Route
-        exact
-        path={`${settingsPath("applications")}/:id`}
-        component={Application}
-      />
       <Route
         exact
         path={`${settingsPath("templates")}/${matchDocumentSlug}`}

app/scenes/Document/components/CommentThread.tsx

@@ -16,7 +16,6 @@ import { useDocumentContext } from "~/components/DocumentContext";
 import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
-import useBoolean from "~/hooks/useBoolean";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
@@ -64,7 +63,7 @@ function CommentThread({
   const history = useHistory();
   const location = useLocation();
   const sidebarContext = useLocationSidebarContext();
-  const [autoFocus, setAutoFocusOn, setAutoFocusOff] = useBoolean(thread.isNew);
+  const [autoFocus, setAutoFocus] = React.useState(thread.isNew);
 
   const can = usePolicy(document);
 
@@ -157,9 +156,9 @@ function CommentThread({
 
   React.useEffect(() => {
     if (!focused && autoFocus) {
-      setAutoFocusOff();
+      setAutoFocus(false);
     }
-  }, [focused, autoFocus, setAutoFocusOff]);
+  }, [focused, autoFocus]);
 
   React.useEffect(() => {
     if (focused) {
@@ -274,7 +273,7 @@ function CommentThread({
         )}
       </ResizingHeightContainer>
       {!focused && !recessed && !draft && canReply && (
-        <Reply onClick={setAutoFocusOn}>{t("Reply")}…</Reply>
+        <Reply onClick={() => setAutoFocus(true)}>{t("Reply")}…</Reply>
       )}
     </Thread>
   );

app/scenes/Document/components/Insights.tsx

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

app/scenes/Home.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import { HomeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, Redirect } from "react-router-dom";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { Action } from "~/components/Actions";
@@ -18,6 +18,7 @@ import Tab from "~/components/Tab";
 import Tabs from "~/components/Tabs";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import { usePostLoginPath } from "~/hooks/useLastVisitedPath";
 import { usePinnedDocuments } from "~/hooks/usePinnedDocuments";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
@@ -28,10 +29,16 @@ function Home() {
   const team = useCurrentTeam();
   const user = useCurrentUser();
   const { t } = useTranslation();
+  const [spendPostLoginPath] = usePostLoginPath();
   const userId = user?.id;
   const { pins, count } = usePinnedDocuments("home");
   const can = usePolicy(team);
 
+  const postLoginPath = spendPostLoginPath();
+  if (postLoginPath) {
+    return <Redirect to={postLoginPath} />;
+  }
+
   return (
     <Scene
       icon={<HomeIcon />}

app/scenes/Invite.tsx

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

app/scenes/Login/OAuthAuthorize.tsx

@@ -1,245 +0,0 @@
-import React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Flex from "@shared/components/Flex";
-import { s } from "@shared/styles";
-import { parseDomain } from "@shared/utils/domains";
-import ButtonLarge from "~/components/ButtonLarge";
-import ChangeLanguage from "~/components/ChangeLanguage";
-import Heading from "~/components/Heading";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import PageTitle from "~/components/PageTitle";
-import Text from "~/components/Text";
-import env from "~/env";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import { useLoggedInSessions } from "~/hooks/useLoggedInSessions";
-import useQuery from "~/hooks/useQuery";
-import useRequest from "~/hooks/useRequest";
-import { client } from "~/utils/ApiClient";
-import isCloudHosted from "~/utils/isCloudHosted";
-import { detectLanguage } from "~/utils/language";
-import Login from "./Login";
-import { OAuthScopeHelper } from "./OAuthScopeHelper";
-import { Background } from "./components/Background";
-import { Centered } from "./components/Centered";
-import { ConnectHeader } from "./components/ConnectHeader";
-import { TeamSwitcher } from "./components/TeamSwitcher";
-
-export default function OAuthAuthorize() {
-  const team = useCurrentTeam({ rejectOnEmpty: false });
-  const sessions = useLoggedInSessions();
-
-  // We're self-hosted or on a team subdomain already, just show the authorize screen.
-  if (team) {
-    return <Authorize />;
-  }
-
-  // Cloud hosted and on root domain – show the workspace switcher.
-  const isAppRoot =
-    parseDomain(window.location.hostname).host === parseDomain(env.URL).host;
-  const hasLoggedInSessions = Object.keys(sessions).length > 0;
-  if (isCloudHosted && hasLoggedInSessions && isAppRoot) {
-    return <TeamSwitcher sessions={sessions} />;
-  }
-
-  return <Login />;
-}
-
-/**
- * Authorize component is responsible for handling the OAuth authorization process.
- * It retrieves the OAuth client information, displays the authorization request,
- * and allows the user to either authorize or cancel the request.
- */
-function Authorize() {
-  const team = useCurrentTeam();
-  const params = useQuery();
-  const { t } = useTranslation();
-  const [isSubmitting, setIsSubmitting] = React.useState(false);
-  const timeoutRef = React.useRef<number>();
-  const {
-    client_id: clientId,
-    redirect_uri: redirectUri,
-    response_type: responseType,
-    code_challenge: codeChallenge,
-    code_challenge_method: codeChallengeMethod,
-    state,
-    scope,
-  } = Object.fromEntries(params);
-  const [scopes] = React.useState(() => scope?.split(" ") ?? []);
-  const { error: clientError, data: response } = useRequest(
-    () => client.post("/oauthClients.info", { clientId }),
-    true
-  );
-
-  const handleCancel = () => {
-    if (window.history.length) {
-      window.history.back();
-    } else {
-      window.location.href = "/";
-    }
-  };
-
-  const handleSubmit = () => {
-    setIsSubmitting(true);
-    timeoutRef.current = window.setTimeout(() => setIsSubmitting(false), 5000);
-  };
-
-  React.useEffect(
-    () => () => {
-      timeoutRef.current && window.clearTimeout(timeoutRef.current);
-    },
-    []
-  );
-
-  const missingParams = [
-    !clientId && "client_id",
-    !redirectUri && "redirect_uri",
-    !responseType && "response_type",
-    !scope && "scope",
-  ].filter(Boolean);
-
-  if (missingParams.length || clientError) {
-    return (
-      <Background>
-        <Centered>
-          <StyledHeading>{t("An error occurred")}</StyledHeading>
-          {clientError ? (
-            <Text as="p" type="secondary">
-              {t(
-                "The OAuth client could not be found, please check the provided client ID"
-              )}
-              <Pre>{clientId}</Pre>
-            </Text>
-          ) : (
-            <Text as="p" type="secondary">
-              {t("Required OAuth parameters are missing")}
-              <Pre>
-                {missingParams.map((param) => (
-                  <>
-                    {param}
-                    <br />
-                  </>
-                ))}
-              </Pre>
-            </Text>
-          )}
-        </Centered>
-      </Background>
-    );
-  }
-
-  if (!response) {
-    return <LoadingIndicator />;
-  }
-
-  const { name, developerName, developerUrl } = response.data;
-
-  return (
-    <Background>
-      <ChangeLanguage locale={detectLanguage()} />
-      <PageTitle title={t("Authorize")} />
-      <Centered gap={12}>
-        <ConnectHeader team={team} oauthClient={response.data} />
-        <StyledHeading>
-          {t(`{{ appName }} wants to access {{ teamName }}`, {
-            appName: name,
-            teamName: team.name,
-          })}
-        </StyledHeading>
-        {developerName && (
-          <Text type="secondary" as="p" style={{ marginTop: -12 }}>
-            <Trans
-              defaults="By <em>{{ developerName }}</em>"
-              values={{
-                developerName,
-              }}
-              components={{
-                em: developerUrl ? (
-                  <Text
-                    as="a"
-                    type="secondary"
-                    weight="bold"
-                    href={developerUrl}
-                    target="_blank"
-                    rel="noopener noreferrer"
-                  />
-                ) : (
-                  <strong />
-                ),
-              }}
-            />
-          </Text>
-        )}
-        <Text type="tertiary" as="p">
-          {t(
-            "{{ appName }} will be able to access your account and perform the following actions",
-            {
-              appName: name,
-            }
-          )}
-          :
-        </Text>
-        <ul style={{ width: "100%", paddingLeft: "1em", marginTop: 0 }}>
-          {OAuthScopeHelper.normalizeScopes(scopes, t).map((item) => (
-            <li key={item}>
-              <Text type="secondary">{item}</Text>
-            </li>
-          ))}
-        </ul>
-        <form
-          method="POST"
-          action="/oauth/authorize"
-          style={{ width: "100%" }}
-          onSubmit={handleSubmit}
-        >
-          <input type="hidden" name="client_id" value={clientId ?? ""} />
-          <input type="hidden" name="redirect_uri" value={redirectUri ?? ""} />
-          <input
-            type="hidden"
-            name="response_type"
-            value={responseType ?? ""}
-          />
-          <input type="hidden" name="state" value={state ?? ""} />
-          <input type="hidden" name="scope" value={scope ?? ""} />
-          {codeChallenge && (
-            <input type="hidden" name="code_challenge" value={codeChallenge} />
-          )}
-          {codeChallengeMethod && (
-            <input
-              type="hidden"
-              name="code_challenge_method"
-              value={codeChallengeMethod}
-            />
-          )}
-          <Flex gap={8} justify="space-between">
-            <Button type="button" onClick={handleCancel} neutral>
-              {t("Cancel")}
-            </Button>
-            <Button type="submit" disabled={isSubmitting}>
-              {t("Authorize")}
-            </Button>
-          </Flex>
-        </form>
-      </Centered>
-    </Background>
-  );
-}
-
-const Button = styled(ButtonLarge)`
-  width: calc(50% - 4px);
-`;
-
-const StyledHeading = styled(Heading).attrs({
-  as: "h2",
-  centered: true,
-})`
-  margin-top: 0;
-`;
-
-const Pre = styled.pre`
-  background: ${s("backgroundSecondary")};
-  padding: 16px;
-  border-radius: 4px;
-  font-size: 12px;
-  white-space: pre-wrap;
-`;

app/scenes/Login/OAuthScopeHelper.ts

@@ -1,56 +0,0 @@
-import type { TFunction } from "i18next";
-import capitalize from "lodash/capitalize";
-import uniq from "lodash/uniq";
-import { Scope } from "@shared/types";
-
-export class OAuthScopeHelper {
-  public static normalizeScopes(scopes: string[], t: TFunction): string[] {
-    const methodToReadable = {
-      list: t("read"),
-      info: t("read"),
-      read: t("read"),
-      write: t("write"),
-      create: t("write"),
-      update: t("write"),
-      delete: t("write"),
-      "*": t("read and write"),
-    };
-
-    const translatedNamespaces = {
-      apiKeys: t("API keys"),
-      attachments: t("attachments"),
-      collections: t("collections"),
-      comments: t("comments"),
-      documents: t("documents"),
-      events: t("events"),
-      groups: t("groups"),
-      integrations: t("integrations"),
-      notifications: t("notifications"),
-      reactions: t("reactions"),
-      pins: t("pins"),
-      shares: t("shares"),
-      users: t("users"),
-      teams: t("teams"),
-      "*": t("workspace"),
-    };
-
-    const normalizedScopes = scopes.map((scope) => {
-      if (scope === Scope.Read) {
-        return t("Read all data");
-      }
-      if (scope === Scope.Write) {
-        return t("Write all data");
-      }
-
-      const [namespace, method] = scope.replace("/api/", "").split(/[:\.]/g);
-      const readableMethod =
-        methodToReadable[method as keyof typeof methodToReadable] ?? method;
-      const translatedNamespace =
-        translatedNamespaces[namespace as keyof typeof translatedNamespaces] ??
-        namespace;
-      return capitalize(`${readableMethod} ${translatedNamespace}`);
-    });
-
-    return uniq(normalizedScopes);
-  }
-}

app/scenes/Login/components/BackButton.tsx

@@ -10,21 +10,12 @@ import isCloudHosted from "~/utils/isCloudHosted";
 
 type Props = {
   config?: Config;
-  onBack?: () => void;
 };
 
-export function BackButton({ onBack, config }: Props) {
+export default function BackButton({ config }: Props) {
   const { t } = useTranslation();
   const isSubdomain = !!config?.hostname;
 
-  if (onBack) {
-    return (
-      <Link onClick={onBack}>
-        <BackIcon /> {t("Back")}
-      </Link>
-    );
-  }
-
   if (!isCloudHosted || parseDomain(window.location.origin).custom) {
     return null;
   }

app/scenes/Login/components/Background.tsx

@@ -1,12 +0,0 @@
-import styled from "styled-components";
-import { s } from "@shared/styles";
-import Fade from "~/components/Fade";
-import { draggableOnDesktop } from "~/styles";
-
-export const Background = styled(Fade)`
-  width: 100vw;
-  height: 100%;
-  background: ${s("background")};
-  display: flex;
-  ${draggableOnDesktop()}
-`;

app/scenes/Login/components/Centered.tsx

@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import Flex from "@shared/components/Flex";
-
-export const Centered = styled(Flex).attrs({
-  align: "center",
-  justify: "center",
-  column: true,
-  auto: true,
-})`
-  user-select: none;
-  width: 90vw;
-  height: 100%;
-  max-width: 320px;
-  margin: 0 auto;
-`;

app/scenes/Login/components/ConnectHeader.tsx

@@ -1,40 +0,0 @@
-import { MoreIcon } from "outline-icons";
-import * as React from "react";
-import Flex from "@shared/components/Flex";
-import Text from "@shared/components/Text";
-import type Team from "~/models/Team";
-import type OAuthClient from "~/models/oauth/OAuthClient";
-import { Avatar } from "~/components/Avatar";
-import { AvatarSize, AvatarVariant } from "~/components/Avatar/Avatar";
-
-type Props = {
-  team: Team;
-  oauthClient: OAuthClient;
-};
-
-export function ConnectHeader({ team, oauthClient }: Props) {
-  return (
-    <Text type="tertiary">
-      <Flex gap={12} align="center">
-        <Avatar
-          variant={AvatarVariant.Square}
-          model={{
-            avatarUrl: oauthClient.avatarUrl,
-            initial: oauthClient.name[0],
-          }}
-          size={AvatarSize.XXLarge}
-          alt={oauthClient.name}
-        />
-
-        <MoreIcon />
-
-        <Avatar
-          variant={AvatarVariant.Square}
-          model={team}
-          size={AvatarSize.XXLarge}
-          alt={team.name}
-        />
-      </Flex>
-    </Text>
-  );
-}

app/scenes/Login/components/LoginDialog.tsx

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

app/scenes/Login/components/Notices.tsx

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

app/scenes/Login/components/TeamSwitcher.tsx

@@ -1,109 +0,0 @@
-import { ArrowIcon } from "outline-icons";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import styled from "styled-components";
-import Text from "@shared/components/Text";
-import { s } from "@shared/styles";
-import { AvatarSize } from "~/components/Avatar";
-import Avatar, { AvatarVariant } from "~/components/Avatar/Avatar";
-import ChangeLanguage from "~/components/ChangeLanguage";
-import Heading from "~/components/Heading";
-import OutlineIcon from "~/components/Icons/OutlineIcon";
-import env from "~/env";
-import type { Sessions } from "~/hooks/useLoggedInSessions";
-import { detectLanguage } from "~/utils/language";
-import Login from "../Login";
-import { Background } from "./Background";
-import { Centered } from "./Centered";
-
-type Props = { sessions: Sessions };
-
-export function TeamSwitcher({ sessions }: Props) {
-  const { t } = useTranslation();
-  const [showLogin, setShowLogin] = React.useState(false);
-  const url = new URL(window.location.href);
-  const appName = env.APP_NAME;
-
-  if (showLogin) {
-    return <Login onBack={() => setShowLogin(false)} />;
-  }
-
-  return (
-    <Background>
-      <ChangeLanguage locale={detectLanguage()} />
-      <Centered>
-        <OutlineIcon size={AvatarSize.XXLarge} />
-
-        <StyledHeading>{t("Choose a workspace")}</StyledHeading>
-        <Text type="tertiary" as="p">
-          {t(
-            "Choose an {{ appName }} workspace or login to continue connecting this app",
-            { appName }
-          )}
-          .
-        </Text>
-        {Object.keys(sessions)?.map((teamId) => {
-          const session = sessions[teamId];
-          const location = session.url + url.pathname + url.search;
-          return (
-            <TeamLink href={location} key={session.url}>
-              <Avatar
-                variant={AvatarVariant.Square}
-                model={{
-                  avatarUrl: session.logoUrl,
-                  initial: session.name[0],
-                }}
-                size={AvatarSize.Large}
-                alt={session.name}
-              />
-              {session.name}
-              <StyledArrowIcon />
-            </TeamLink>
-          );
-        })}
-        <TeamLink onClick={() => setShowLogin(true)}>
-          <ArrowIcon size={AvatarSize.Large} />
-          {t("Login to workspace")}
-        </TeamLink>
-      </Centered>
-    </Background>
-  );
-}
-
-const StyledArrowIcon = styled(ArrowIcon)`
-  position: absolute;
-  transition: all 0.2s ease-in-out;
-  opacity: 0;
-  right: 12px;
-`;
-
-const TeamLink = styled.a`
-  position: relative;
-  left: -8px;
-  right: -8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  padding: 8px;
-  margin: 4px;
-  border-radius: 8px;
-  width: 100%;
-  color: ${s("text")};
-  font-weight: ${s("fontWeightMedium")};
-
-  &:hover {
-    background: ${s("listItemHoverBackground")};
-
-    ${StyledArrowIcon} {
-      opacity: 1;
-      right: 8px;
-    }
-  }
-`;
-
-const StyledHeading = styled(Heading).attrs({
-  as: "h2",
-  centered: true,
-})`
-  margin-top: 0;
-`;

app/scenes/Login/index.ts

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

app/scenes/Login/index.tsx

@@ -13,6 +13,7 @@ import { Config } from "~/stores/AuthStore";
 import { AvatarSize } from "~/components/Avatar";
 import ButtonLarge from "~/components/ButtonLarge";
 import ChangeLanguage from "~/components/ChangeLanguage";
+import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
 import OutlineIcon from "~/components/Icons/OutlineIcon";
@@ -29,23 +30,21 @@ import {
 } from "~/hooks/useLastVisitedPath";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
+import { draggableOnDesktop } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import isCloudHosted from "~/utils/isCloudHosted";
 import { detectLanguage } from "~/utils/language";
 import { homePath } from "~/utils/routeHelpers";
 import AuthenticationProvider from "./components/AuthenticationProvider";
-import { BackButton } from "./components/BackButton";
-import { Background } from "./components/Background";
-import { Centered } from "./components/Centered";
-import { Notices } from "./components/Notices";
+import BackButton from "./components/BackButton";
+import Notices from "./components/Notices";
 import { getRedirectUrl, navigateToSubdomain } from "./urls";
 
 type Props = {
   children?: (config?: Config) => React.ReactNode;
-  onBack?: () => void;
 };
 
-function Login({ children, onBack }: Props) {
+function Login({ children }: Props) {
   const location = useLocation();
   const query = useQuery();
   const notice = query.get("notice");
@@ -111,9 +110,9 @@ function Login({ children, onBack }: Props) {
   if (error) {
     return (
       <Background>
-        <BackButton onBack={onBack} />
+        <BackButton />
         <ChangeLanguage locale={detectLanguage()} />
-        <Centered>
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Login")} />
           <Heading centered>{t("Error")}</Heading>
           <Note>
@@ -143,9 +142,9 @@ function Login({ children, onBack }: Props) {
   if (isCloudHosted && isCustomDomain && !config.name) {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
+        <BackButton config={config} />
         <ChangeLanguage locale={detectLanguage()} />
-        <Centered>
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Custom domain setup")} />
           <Heading centered>{t("Almost there")}…</Heading>
           <Note>
@@ -161,10 +160,17 @@ function Login({ children, onBack }: Props) {
   if (Desktop.isElectron() && notice === "domain-required") {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
+        <BackButton config={config} />
         <ChangeLanguage locale={detectLanguage()} />
 
-        <Centered as="form" onSubmit={handleGoSubdomain}>
+        <Centered
+          as="form"
+          onSubmit={handleGoSubdomain}
+          align="center"
+          justify="center"
+          column
+          auto
+        >
           <Heading centered>{t("Choose workspace")}</Heading>
           <Note>
             {t(
@@ -200,8 +206,8 @@ function Login({ children, onBack }: Props) {
   if (emailLinkSentTo) {
     return (
       <Background>
-        <BackButton onBack={onBack} config={config} />
-        <Centered>
+        <BackButton config={config} />
+        <Centered align="center" justify="center" column auto>
           <PageTitle title={t("Check your email")} />
           <CheckEmailIcon size={38} />
           <Heading centered>{t("Check your email")}</Heading>
@@ -235,10 +241,10 @@ function Login({ children, onBack }: Props) {
 
   return (
     <Background>
-      <BackButton onBack={onBack} config={config} />
+      <BackButton config={config} />
       <ChangeLanguage locale={detectLanguage()} />
 
-      <Centered gap={12}>
+      <Centered align="center" justify="center" gap={12} column auto>
         <PageTitle
           title={config.name ? `${config.name} – ${t("Login")}` : t("Login")}
         />
@@ -330,6 +336,14 @@ const CheckEmailIcon = styled(EmailIcon)`
   margin-bottom: -1.5em;
 `;
 
+const Background = styled(Fade)`
+  width: 100vw;
+  height: 100%;
+  background: ${s("background")};
+  display: flex;
+  ${draggableOnDesktop()}
+`;
+
 const Logo = styled.div`
   margin-bottom: -4px;
 `;
@@ -375,4 +389,12 @@ const Or = styled.hr`
   }
 `;
 
+const Centered = styled(Flex)`
+  user-select: none;
+  width: 90vw;
+  height: 100%;
+  max-width: 320px;
+  margin: 0 auto;
+`;
+
 export default observer(Login);

app/scenes/Login/urls.ts

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

app/scenes/Settings/APIAndApps.tsx

@@ -1,107 +0,0 @@
-import { observer } from "mobx-react";
-import { PadlockIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import ApiKey from "~/models/ApiKey";
-import OAuthAuthentication from "~/models/oauth/OAuthAuthentication";
-import { Action } from "~/components/Actions";
-import Button from "~/components/Button";
-import Heading from "~/components/Heading";
-import PaginatedList from "~/components/PaginatedList";
-import Scene from "~/components/Scene";
-import Text from "~/components/Text";
-import { createApiKey } from "~/actions/definitions/apiKeys";
-import env from "~/env";
-import useActionContext from "~/hooks/useActionContext";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-import ApiKeyListItem from "./components/ApiKeyListItem";
-import OAuthAuthenticationListItem from "./components/OAuthAuthenticationListItem";
-
-function APIAndApps() {
-  const team = useCurrentTeam();
-  const user = useCurrentUser();
-  const { t } = useTranslation();
-  const { apiKeys, oauthAuthentications } = useStores();
-  const can = usePolicy(team);
-  const context = useActionContext();
-  const appName = env.APP_NAME;
-
-  return (
-    <Scene
-      title={t("API & Apps")}
-      icon={<PadlockIcon />}
-      actions={
-        <>
-          {can.createApiKey && (
-            <Action>
-              <Button
-                type="submit"
-                value={`${t("New API key")}…`}
-                action={createApiKey}
-                context={context}
-              />
-            </Action>
-          )}
-        </>
-      }
-    >
-      <Heading>{t("API & Apps")}</Heading>
-      <h2>{t("API keys")}</h2>
-      {can.createApiKey ? (
-        <Text as="p" type="secondary">
-          <Trans
-            defaults="Create personal API keys to authenticate with the API and programatically control
-      your workspace's data. For more details see the <em>developer documentation</em>."
-            components={{
-              em: (
-                <a
-                  href="https://www.getoutline.com/developers"
-                  target="_blank"
-                  rel="noreferrer"
-                />
-              ),
-            }}
-          />
-        </Text>
-      ) : (
-        <Trans>
-          {t("API keys have been disabled by an admin for your account")}
-        </Trans>
-      )}
-      <PaginatedList<ApiKey>
-        fetch={apiKeys.fetchPage}
-        items={apiKeys.personalApiKeys}
-        options={{ userId: user.id }}
-        renderItem={(apiKey) => (
-          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
-        )}
-      />
-      <PaginatedList
-        fetch={oauthAuthentications.fetchPage}
-        items={oauthAuthentications.orderedData}
-        heading={
-          <>
-            <h2>{t("Application access")}</h2>
-            <Text as="p" type="secondary">
-              {t(
-                "Manage which third-party and internal applications have been granted access to your {{ appName }} account.",
-                { appName }
-              )}
-            </Text>
-          </>
-        }
-        renderItem={(oauthAuthentication: OAuthAuthentication) => (
-          <OAuthAuthenticationListItem
-            key={oauthAuthentication.id}
-            oauthAuthentication={oauthAuthentication}
-          />
-        )}
-      />
-    </Scene>
-  );
-}
-
-export default observer(APIAndApps);

app/scenes/Settings/ApiKeys.tsx

@@ -58,10 +58,11 @@ function ApiKeys() {
           }}
         />
       </Text>
-      <PaginatedList<ApiKey>
+      <PaginatedList
         fetch={apiKeys.fetchPage}
         items={apiKeys.orderedData}
-        renderItem={(apiKey) => (
+        heading={<h2>{t("All")}</h2>}
+        renderItem={(apiKey: ApiKey) => (
           <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
         )}
       />

app/scenes/Settings/Application.tsx

@@ -1,321 +0,0 @@
-import { observer } from "mobx-react";
-import { CopyIcon, InternetIcon, ReplaceIcon } from "outline-icons";
-import * as React from "react";
-import { Controller, useForm } from "react-hook-form";
-import { useTranslation } from "react-i18next";
-import { useParams } from "react-router-dom";
-import { toast } from "sonner";
-import { OAuthClientValidation } from "@shared/validations";
-import OAuthClient from "~/models/oauth/OAuthClient";
-import Breadcrumb from "~/components/Breadcrumb";
-import Button from "~/components/Button";
-import ConfirmationDialog from "~/components/ConfirmationDialog";
-import ContentEditable from "~/components/ContentEditable";
-import Heading from "~/components/Heading";
-import Input from "~/components/Input";
-import LoadingIndicator from "~/components/LoadingIndicator";
-import NudeButton from "~/components/NudeButton";
-import { FormData } from "~/components/OAuthClient/OAuthClientForm";
-import Scene from "~/components/Scene";
-import Switch from "~/components/Switch";
-import Tooltip from "~/components/Tooltip";
-import useRequest from "~/hooks/useRequest";
-import useStores from "~/hooks/useStores";
-import OAuthClientMenu from "~/menus/OAuthClientMenu";
-import isCloudHosted from "~/utils/isCloudHosted";
-import { settingsPath } from "~/utils/routeHelpers";
-import { ActionRow } from "./components/ActionRow";
-import { CopyButton } from "./components/CopyButton";
-import ImageInput from "./components/ImageInput";
-import SettingRow from "./components/SettingRow";
-
-type Props = {
-  oauthClient: OAuthClient;
-};
-
-const LoadingState = observer(function LoadingState() {
-  const { id } = useParams<{ id: string }>();
-  const { oauthClients } = useStores();
-  const oauthClient = oauthClients.get(id);
-  const { request } = useRequest(() => oauthClients.fetch(id));
-
-  React.useEffect(() => {
-    if (!oauthClient) {
-      void request();
-    }
-  }, [oauthClient]);
-
-  if (!oauthClient) {
-    return <LoadingIndicator />;
-  }
-
-  return <Application oauthClient={oauthClient} />;
-});
-
-const Application = observer(function Application({ oauthClient }: Props) {
-  const { t } = useTranslation();
-  const { dialogs } = useStores();
-
-  const {
-    register,
-    handleSubmit: formHandleSubmit,
-    formState,
-    getValues,
-    setError,
-    control,
-  } = useForm<FormData>({
-    mode: "all",
-    defaultValues: {
-      name: oauthClient.name ?? "",
-      developerName: oauthClient.developerName ?? "",
-      developerUrl: oauthClient.developerUrl ?? "",
-      description: oauthClient.description ?? "",
-      avatarUrl: oauthClient.avatarUrl ?? "",
-      redirectUris: oauthClient.redirectUris ?? [],
-      published: oauthClient.published ?? false,
-    },
-  });
-
-  const handleSubmit = React.useCallback(
-    async (data: FormData) => {
-      try {
-        await oauthClient.save(data);
-      } catch (error) {
-        toast.error(error.message);
-      }
-    },
-    [oauthClient]
-  );
-
-  const handleRotateSecret = React.useCallback(async () => {
-    const onDelete = async () => {
-      try {
-        await oauthClient.rotateClientSecret();
-        toast.success(t("Client secret rotated"));
-      } catch (err) {
-        toast.error(err.message);
-      }
-    };
-
-    dialogs.openModal({
-      title: t("Rotate secret"),
-      content: (
-        <ConfirmationDialog onSubmit={onDelete} danger>
-          {t(
-            "Rotating the client secret will invalidate the current secret. Make sure to update any applications using these credentials."
-          )}
-        </ConfirmationDialog>
-      ),
-    });
-  }, [t, dialogs, oauthClient]);
-
-  return (
-    <Scene
-      title={oauthClient.name}
-      left={
-        <Breadcrumb
-          items={[
-            {
-              type: "route",
-              title: t("Applications"),
-              to: settingsPath("applications"),
-              icon: <InternetIcon />,
-            },
-          ]}
-        />
-      }
-      actions={<OAuthClientMenu oauthClient={oauthClient} showEdit={false} />}
-    >
-      <form onSubmit={formHandleSubmit(handleSubmit)}>
-        <Heading>
-          <Controller
-            control={control}
-            name="name"
-            render={({ field }) => (
-              <ContentEditable
-                value={field.value}
-                placeholder={t("Name")}
-                onChange={field.onChange}
-                maxLength={OAuthClientValidation.maxNameLength}
-              />
-            )}
-          />
-        </Heading>
-
-        <SettingRow
-          label={t("Icon")}
-          name="avatarUrl"
-          description={t("Displayed to users when authorizing")}
-        >
-          <Controller
-            control={control}
-            name="avatarUrl"
-            render={({ field }) => (
-              <ImageInput
-                onSuccess={(url) => field.onChange(url)}
-                onError={(err) => setError("avatarUrl", { message: err })}
-                model={{
-                  id: oauthClient.id,
-                  avatarUrl: field.value,
-                  initial: getValues().name[0],
-                }}
-                borderRadius={0}
-              />
-            )}
-          />
-        </SettingRow>
-
-        <SettingRow
-          name="description"
-          label={t("Tagline")}
-          description={t("A short description")}
-        >
-          <Input
-            type="text"
-            {...register("description", {
-              required: true,
-              maxLength: OAuthClientValidation.maxDescriptionLength,
-            })}
-            flex
-          />
-        </SettingRow>
-
-        <SettingRow
-          name="details"
-          label={t("Details")}
-          description={t(
-            "Developer information shown to users when authorizing"
-          )}
-          border={isCloudHosted}
-        >
-          <Input
-            type="text"
-            label={t("Developer name")}
-            {...register("developerName", {
-              maxLength: OAuthClientValidation.maxDeveloperNameLength,
-            })}
-            flex
-          />
-          <Input
-            type="text"
-            label={t("Developer URL")}
-            {...register("developerUrl", {
-              maxLength: OAuthClientValidation.maxDeveloperUrlLength,
-            })}
-            flex
-          />
-        </SettingRow>
-        {isCloudHosted && (
-          <SettingRow
-            name="published"
-            label={t("Published")}
-            description={t(
-              "Allow users from other workspaces to authorize this app"
-            )}
-            border={false}
-          >
-            <Switch id="published" {...register("published")} />
-          </SettingRow>
-        )}
-
-        <h2>{t("Credentials")}</h2>
-        <SettingRow
-          name="clientId"
-          label={t("OAuth client ID")}
-          description={t("The public identifier for this app")}
-        >
-          <Input id="clientId" value={oauthClient.clientId} readOnly>
-            <CopyButton
-              value={oauthClient.clientId}
-              success={t("Copied to clipboard")}
-              tooltip={t("Copy")}
-              icon={<CopyIcon size={20} />}
-            />
-          </Input>
-        </SettingRow>
-        <SettingRow
-          name="clientSecret"
-          label={t("OAuth client secret")}
-          description={t(
-            "Store this value securely, do not expose it publicly"
-          )}
-        >
-          <Input
-            id="clientSecret"
-            type="password"
-            value={oauthClient.clientSecret}
-            readOnly
-          >
-            <Tooltip content={t("Rotate secret")} placement="top">
-              <NudeButton type="button" onClick={handleRotateSecret}>
-                <ReplaceIcon size={20} />
-              </NudeButton>
-            </Tooltip>
-
-            <CopyButton
-              value={oauthClient.clientSecret}
-              success={t("Copied to clipboard")}
-              tooltip={t("Copy")}
-              icon={<CopyIcon size={20} />}
-            />
-          </Input>
-        </SettingRow>
-        <SettingRow
-          name="redirectUris"
-          label={t("Callback URLs")}
-          description={t(
-            "Where users are redirected after authorizing this app"
-          )}
-        >
-          <Controller
-            control={control}
-            name="redirectUris"
-            render={({ field }) => (
-              <Input
-                id="redirectUris"
-                type="textarea"
-                placeholder="https://example.com/callback"
-                ref={field.ref}
-                value={field.value.join("\n")}
-                rows={Math.max(2, field.value.length + 1)}
-                onChange={(event) => {
-                  field.onChange(event.target.value.split("\n"));
-                }}
-                required
-              />
-            )}
-          />
-        </SettingRow>
-        <SettingRow
-          name="authorizationUrl"
-          label={t("Authorization URL")}
-          description={t("Where users are redirected to authorize this app")}
-          border={false}
-        >
-          <Input
-            id="authorizationUrl"
-            value={oauthClient.authorizationUrl}
-            readOnly
-          >
-            <CopyButton
-              value={oauthClient.authorizationUrl}
-              success={t("Copied to clipboard")}
-              tooltip={t("Copy link")}
-            />
-          </Input>
-        </SettingRow>
-
-        <ActionRow>
-          <Button
-            type="submit"
-            disabled={formState.isSubmitting || !formState.isValid}
-          >
-            {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
-          </Button>
-        </ActionRow>
-      </form>
-    </Scene>
-  );
-});
-
-export default LoadingState;

app/scenes/Settings/Details.tsx

@@ -108,16 +108,7 @@ function Details() {
         toast.error(err.message);
       }
     },
-    [
-      tocPosition,
-      team,
-      name,
-      subdomain,
-      defaultCollectionId,
-      publicBranding,
-      customTheme,
-      t,
-    ]
+    [team, name, subdomain, defaultCollectionId, publicBranding, customTheme, t]
   );
 
   const handleNameChange = React.useCallback(

app/scenes/Settings/Export.tsx

@@ -48,7 +48,7 @@ function Export() {
         {t("Export data")}…
       </Button>
       <br />
-      <PaginatedList<FileOperation>
+      <PaginatedList
         items={fileOperations.exports}
         fetch={fileOperations.fetchPage}
         options={{
@@ -59,7 +59,7 @@ function Export() {
             <Trans>Recent exports</Trans>
           </h2>
         }
-        renderItem={(item) => (
+        renderItem={(item: FileOperation) => (
           <FileOperationListItem key={item.id} fileOperation={item} />
         )}
       />

app/scenes/Settings/Import.tsx

@@ -183,7 +183,7 @@ function Import() {
         ))}
       </div>
       <br />
-      <PaginatedList<ImportModel | FileOperation>
+      <PaginatedList
         items={allImports}
         fetch={fetchImports}
         heading={
@@ -191,7 +191,7 @@ function Import() {
             <Trans>Recent imports</Trans>
           </h2>
         }
-        renderItem={(item) =>
+        renderItem={(item: ImportModel | FileOperation) =>
           item instanceof ImportModel ? (
             <ImportListItem key={item.id} importModel={item} />
           ) : (

app/scenes/Settings/PersonalApiKeys.tsx

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

app/scenes/Settings/SelfHosted.tsx

@@ -0,0 +1,140 @@
+import find from "lodash/find";
+import { observer } from "mobx-react";
+import { BuildingBlocksIcon } from "outline-icons";
+import * as React from "react";
+import { useForm } from "react-hook-form";
+import { useTranslation } from "react-i18next";
+import { toast } from "sonner";
+import { IntegrationService, IntegrationType } from "@shared/types";
+import Integration from "~/models/Integration";
+import Button from "~/components/Button";
+import Heading from "~/components/Heading";
+import Input from "~/components/Input";
+import Scene from "~/components/Scene";
+import useStores from "~/hooks/useStores";
+import SettingRow from "./components/SettingRow";
+
+type FormData = {
+  drawIoUrl: string;
+  gristUrl: string;
+};
+
+function SelfHosted() {
+  const { integrations } = useStores();
+  const { t } = useTranslation();
+
+  const integrationDiagrams = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: IntegrationService.Diagrams,
+  }) as Integration<IntegrationType.Embed> | undefined;
+
+  const integrationGrist = find(integrations.orderedData, {
+    type: IntegrationType.Embed,
+    service: IntegrationService.Grist,
+  }) as Integration<IntegrationType.Embed> | undefined;
+
+  const {
+    register,
+    reset,
+    handleSubmit: formHandleSubmit,
+    formState,
+  } = useForm<FormData>({
+    mode: "all",
+    defaultValues: {
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
+    },
+  });
+
+  React.useEffect(() => {
+    void integrations.fetchPage({
+      type: IntegrationType.Embed,
+    });
+  }, [integrations]);
+
+  React.useEffect(() => {
+    reset({
+      drawIoUrl: integrationDiagrams?.settings.url,
+      gristUrl: integrationGrist?.settings.url,
+    });
+  }, [integrationDiagrams, integrationGrist, reset]);
+
+  const handleSubmit = React.useCallback(
+    async (data: FormData) => {
+      try {
+        if (data.drawIoUrl) {
+          await integrations.save({
+            id: integrationDiagrams?.id,
+            type: IntegrationType.Embed,
+            service: IntegrationService.Diagrams,
+            settings: {
+              url: data.drawIoUrl,
+            },
+          });
+        } else {
+          await integrationDiagrams?.delete();
+        }
+
+        if (data.gristUrl) {
+          await integrations.save({
+            id: integrationGrist?.id,
+            type: IntegrationType.Embed,
+            service: IntegrationService.Grist,
+            settings: {
+              url: data.gristUrl,
+            },
+          });
+        } else {
+          await integrationGrist?.delete();
+        }
+
+        toast.success(t("Settings saved"));
+      } catch (err) {
+        toast.error(err.message);
+      }
+    },
+    [integrations, integrationDiagrams, integrationGrist, t]
+  );
+
+  return (
+    <Scene title={t("Self Hosted")} icon={<BuildingBlocksIcon />}>
+      <Heading>{t("Self Hosted")}</Heading>
+
+      <form onSubmit={formHandleSubmit(handleSubmit)}>
+        <SettingRow
+          label={t("Draw.io deployment")}
+          name="drawIoUrl"
+          description={t(
+            "Add your self-hosted draw.io installation url here to enable automatic embedding of diagrams within documents."
+          )}
+          border={false}
+        >
+          <Input
+            placeholder="https://app.diagrams.net/"
+            pattern="https?://.*"
+            {...register("drawIoUrl")}
+          />
+        </SettingRow>
+
+        <SettingRow
+          label={t("Grist deployment")}
+          name="gristUrl"
+          description={t("Add your self-hosted grist installation URL here.")}
+          border={false}
+        >
+          <Input
+            placeholder="https://docs.getgrist.com/"
+            pattern="https?://.*"
+            {...register("gristUrl")}
+          />
+        </SettingRow>
+
+        <Button type="submit" disabled={formState.isSubmitting}>
+          {formState.isSubmitting ? `${t("Saving")}…` : t("Save")}
+        </Button>
+      </form>
+    </Scene>
+  );
+}
+
+export default observer(SelfHosted);

app/scenes/Settings/components/CopyButton.tsx

@@ -1,50 +0,0 @@
-import { LinkIcon } from "outline-icons";
-import * as React from "react";
-import { toast } from "sonner";
-import CopyToClipboard from "~/components/CopyToClipboard";
-import NudeButton from "~/components/NudeButton";
-import Tooltip from "~/components/Tooltip";
-
-type Props = {
-  /** The value to be copied */
-  value: string;
-  /** The message to show when the value is copied */
-  success: string;
-  /** The tooltip message */
-  tooltip: string;
-  /** An optional icon */
-  icon?: React.ReactNode;
-};
-
-/**
- * A button that copies a value to the clipboard when clicked and shows a
- * single icon.
- */
-export function CopyButton({
-  value,
-  success,
-  tooltip,
-  icon = <LinkIcon size={20} />,
-}: Props) {
-  const timeout = React.useRef<ReturnType<typeof setTimeout>>();
-
-  const handleCopied = React.useCallback(() => {
-    timeout.current = setTimeout(() => {
-      toast.message(success);
-    }, 100);
-
-    return () => {
-      if (timeout.current) {
-        clearTimeout(timeout.current);
-      }
-    };
-  }, [success]);
-
-  return (
-    <Tooltip content={tooltip} placement="top">
-      <CopyToClipboard text={value} onCopy={handleCopied}>
-        <NudeButton type="button">{icon}</NudeButton>
-      </CopyToClipboard>
-    </Tooltip>
-  );
-}

app/scenes/Settings/components/FileOperationListItem.tsx

@@ -4,7 +4,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
-import Spinner from "@shared/components/Spinner";
 import {
   FileOperationFormat,
   FileOperationState,
@@ -14,6 +13,7 @@ import FileOperation from "~/models/FileOperation";
 import { Action } from "~/components/Actions";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import ListItem from "~/components/List/Item";
+import Spinner from "~/components/Spinner";
 import Time from "~/components/Time";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";

app/scenes/Settings/components/GroupDialogs.tsx

@@ -268,14 +268,14 @@ export const ViewGroupMembersDialog = observer(function ({
       <Subheading>
         <Trans>Members</Trans>
       </Subheading>
-      <PaginatedList<User>
+      <PaginatedList
         items={users.inGroup(group.id)}
         fetch={groupUsers.fetchPage}
         options={{
           id: group.id,
         }}
         empty={<Empty>{t("This group has no members.")}</Empty>}
-        renderItem={(user) => (
+        renderItem={(user: User) => (
           <GroupMemberListItem
             key={user.id}
             user={user}
@@ -382,7 +382,7 @@ const AddPeopleToGroupDialog = observer(function ({
           <PlaceholderList count={5} />
         </DelayedMount>
       ) : (
-        <PaginatedList<User>
+        <PaginatedList
           empty={
             query ? (
               <Empty>{t("No people matching your search")}</Empty>
@@ -392,7 +392,7 @@ const AddPeopleToGroupDialog = observer(function ({
           }
           items={users.notInGroup(group.id, query)}
           fetch={query ? undefined : users.fetchPage}
-          renderItem={(item) => (
+          renderItem={(item: User) => (
             <GroupMemberListItem
               key={item.id}
               user={item}

app/scenes/Settings/components/ImageInput.tsx

@@ -1,10 +1,8 @@
-import { EditIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { Avatar, AvatarSize, IAvatar } from "~/components/Avatar";
-import { AvatarVariant } from "~/components/Avatar/Avatar";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import ImageUpload, { Props as ImageUploadProps } from "./ImageUpload";
@@ -19,18 +17,10 @@ export default function ImageInput({ model, onSuccess, ...rest }: Props) {
   return (
     <Flex gap={8} justify="space-between">
       <ImageBox>
-        <ImageUpload
-          onSuccess={onSuccess}
-          submitText={t("Crop Image")}
-          {...rest}
-        >
-          <Avatar
-            model={model}
-            size={AvatarSize.Upload}
-            variant={AvatarVariant.Square}
-          />
+        <ImageUpload onSuccess={onSuccess} {...rest}>
+          <StyledAvatar model={model} size={AvatarSize.Upload} />
           <Flex auto align="center" justify="center" className="upload">
-            <EditIcon />
+            {t("Upload")}
           </Flex>
         </ImageUpload>
       </ImageBox>
@@ -48,6 +38,10 @@ const avatarStyles = `
   height: ${AvatarSize.Upload}px;
 `;
 
+const StyledAvatar = styled(Avatar)`
+  border-radius: 8px;
+`;
+
 const ImageBox = styled(Flex)`
   ${avatarStyles};
   position: relative;

app/scenes/Settings/components/ImageUpload.tsx

@@ -1,18 +1,19 @@
 import invariant from "invariant";
+import { observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
-import { useState, useRef } from "react";
 import AvatarEditor from "react-avatar-editor";
-import { useDropzone } from "react-dropzone";
-import { useTranslation } from "react-i18next";
+import Dropzone from "react-dropzone";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { AttachmentPreset } from "@shared/types";
 import { AttachmentValidation } from "@shared/validations";
-import ButtonLarge from "~/components/ButtonLarge";
+import RootStore from "~/stores/RootStore";
+import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
-import useStores from "~/hooks/useStores";
+import Modal from "~/components/Modal";
+import withStores from "~/components/withStores";
 import { compressImage } from "~/utils/compressImage";
 import { uploadFile, dataUrlToBlob } from "~/utils/files";
 
@@ -23,167 +24,132 @@ export type Props = {
   borderRadius?: number;
 };
 
-const ImageUpload: React.FC<Props> = ({
-  onSuccess,
-  onError,
-  submitText,
-  borderRadius,
-  children,
-}) => {
-  const { dialogs } = useStores();
-  const { t } = useTranslation();
+@observer
+class ImageUpload extends React.Component<RootStore & Props> {
+  @observable
+  isUploading = false;
 
-  const [isUploading, setIsUploading] = useState(false);
-  const [isCropping, setIsCropping] = useState(false);
+  @observable
+  isCropping = false;
 
-  const uploadImage = React.useCallback(
-    async (blob: Blob, file: File) => {
-      try {
-        const compressed = await compressImage(blob, {
-          maxHeight: 512,
-          maxWidth: 512,
-        });
-        const attachment = await uploadFile(compressed, {
-          name: file.name,
-          preset: AttachmentPreset.Avatar,
-        });
-        void onSuccess(attachment.url);
-      } catch (err) {
-        onError(err.message);
-      } finally {
-        setIsUploading(false);
-        setIsCropping(false);
-        dialogs.closeAllModals();
-      }
-    },
-    [dialogs, onSuccess, onError]
-  );
+  @observable
+  zoom = 1;
 
-  const handleUpload = React.useCallback(
-    (blob: Blob, file: File) => {
-      setIsUploading(true);
-      // allow the UI to update before converting the canvas to a Blob
-      // for large images this can cause the page rendering to hang.
-      setTimeout(() => uploadImage(blob, file), 0);
-    },
-    [uploadImage]
-  );
+  @observable
+  file: File;
 
-  const handleClose = React.useCallback(() => {
-    setIsUploading(false);
-    setIsCropping(false);
-  }, []);
+  avatarEditorRef = React.createRef<AvatarEditor>();
 
-  const onDropAccepted = React.useCallback(
-    async (files: File[]) => {
-      setIsCropping(true);
-      dialogs.openModal({
-        title: "",
-        content: (
-          <AvatarEditorDialog
-            file={files[0]}
-            onUpload={handleUpload}
-            isUploading={isUploading}
-            borderRadius={borderRadius ?? 150}
-            submitText={submitText || t("Crop image")}
-          />
-        ),
-        onClose: handleClose,
+  static defaultProps = {
+    submitText: "Crop Image",
+    borderRadius: 150,
+  };
+
+  onDropAccepted = async (files: File[]) => {
+    this.isCropping = true;
+    this.file = files[0];
+  };
+
+  handleCrop = () => {
+    this.isUploading = true;
+    // allow the UI to update before converting the canvas to a Blob
+    // for large images this can cause the page rendering to hang.
+    setTimeout(this.uploadImage, 0);
+  };
+
+  uploadImage = async () => {
+    const canvas = this.avatarEditorRef.current?.getImage();
+    invariant(canvas, "canvas is not defined");
+    const imageBlob = dataUrlToBlob(canvas.toDataURL());
+
+    try {
+      const compressed = await compressImage(imageBlob, {
+        maxHeight: 512,
+        maxWidth: 512,
       });
-    },
-    [
-      t,
-      dialogs,
-      handleUpload,
-      handleClose,
-      isUploading,
-      borderRadius,
-      submitText,
-    ]
-  );
+      const attachment = await uploadFile(compressed, {
+        name: this.file.name,
+        preset: AttachmentPreset.Avatar,
+      });
+      void this.props.onSuccess(attachment.url);
+    } catch (err) {
+      this.props.onError(err.message);
+    } finally {
+      this.isUploading = false;
+      this.isCropping = false;
+    }
+  };
 
-  const { getRootProps, getInputProps } = useDropzone({
-    accept: AttachmentValidation.avatarContentTypes.join(", "),
-    onDropAccepted,
-  });
+  handleClose = () => {
+    this.isUploading = false;
+    this.isCropping = false;
+  };
 
-  if (isCropping) {
-    return null; // onDropAccepted would have opened a modal for cropping the image.
+  handleZoom = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const target = event.target;
+
+    if (target instanceof HTMLInputElement) {
+      this.zoom = parseFloat(target.value);
+    }
+  };
+
+  renderCropping() {
+    const { ui, submitText } = this.props;
+    return (
+      <Modal isOpen onRequestClose={this.handleClose} title="">
+        <Flex auto column align="center" justify="center">
+          {this.isUploading && <LoadingIndicator />}
+          <AvatarEditorContainer>
+            <AvatarEditor
+              ref={this.avatarEditorRef}
+              image={this.file}
+              width={250}
+              height={250}
+              border={25}
+              borderRadius={this.props.borderRadius}
+              color={
+                ui.theme === "light" ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6]
+              } // RGBA
+              scale={this.zoom}
+              rotate={0}
+            />
+          </AvatarEditorContainer>
+          <RangeInput
+            type="range"
+            min="0.1"
+            max="2"
+            step="0.01"
+            defaultValue="1"
+            onChange={this.handleZoom}
+          />
+          <CropButton onClick={this.handleCrop} disabled={this.isUploading}>
+            {this.isUploading ? "Uploading…" : submitText}
+          </CropButton>
+        </Flex>
+      </Modal>
+    );
   }
 
-  return (
-    <div {...getRootProps()}>
-      <input {...getInputProps()} />
-      {children}
-    </div>
-  );
-};
-
-type AvatarEditorDialogProps = {
-  file: File;
-  onUpload: (blob: Blob, file: File) => void;
-  isUploading: boolean;
-  borderRadius: number;
-  submitText: string;
-};
-
-const AvatarEditorDialog: React.FC<AvatarEditorDialogProps> = observer(
-  ({ file, onUpload, isUploading, borderRadius, submitText }) => {
-    const { ui } = useStores();
-    const { t } = useTranslation();
-    const [zoom, setZoom] = useState(1);
-    const avatarEditorRef = useRef<AvatarEditor>(null);
-
-    const handleUpload = React.useCallback(() => {
-      const canvas = avatarEditorRef.current?.getImage();
-      invariant(canvas, "canvas is not defined");
-      const blob = dataUrlToBlob(canvas.toDataURL());
-      onUpload(blob, file);
-    }, [file, onUpload]);
-
-    const handleZoom = React.useCallback(
-      (event: React.ChangeEvent<HTMLInputElement>) => {
-        const target = event.target;
-
-        if (target instanceof HTMLInputElement) {
-          setZoom(parseFloat(target.value));
-        }
-      },
-      []
-    );
+  render() {
+    if (this.isCropping) {
+      return this.renderCropping();
+    }
 
     return (
-      <Flex auto column align="center" justify="center">
-        {isUploading && <LoadingIndicator />}
-        <AvatarEditorContainer>
-          <AvatarEditor
-            ref={avatarEditorRef}
-            image={file}
-            width={250}
-            height={250}
-            border={25}
-            borderRadius={borderRadius}
-            color={ui.theme === "light" ? [255, 255, 255, 0.6] : [0, 0, 0, 0.6]} // RGBA
-            scale={zoom}
-            rotate={0}
-          />
-        </AvatarEditorContainer>
-        <RangeInput
-          type="range"
-          min="0.1"
-          max="2"
-          step="0.01"
-          defaultValue="1"
-          onChange={handleZoom}
-        />
-        <br />
-        <ButtonLarge fullwidth onClick={handleUpload} disabled={isUploading}>
-          {isUploading ? `${t(`Uploading`)}…` : submitText}
-        </ButtonLarge>
-      </Flex>
+      <Dropzone
+        accept={AttachmentValidation.avatarContentTypes.join(", ")}
+        onDropAccepted={this.onDropAccepted}
+      >
+        {({ getRootProps, getInputProps }) => (
+          <div {...getRootProps()}>
+            <input {...getInputProps()} />
+            {this.props.children}
+          </div>
+        )}
+      </Dropzone>
     );
   }
-);
+}
 
 const AvatarEditorContainer = styled(Flex)`
   margin-bottom: 30px;
@@ -214,4 +180,8 @@ const RangeInput = styled.input`
   }
 `;
 
-export default observer(ImageUpload);
+const CropButton = styled(Button)`
+  width: 300px;
+`;
+
+export default withStores(ImageUpload);