fix: Members table always fades in

PeopleTable -> MemberTable
2026-06-13 11:25:03 +03:00 · 2025-03-01 11:14:03 -05:00 · 2025-03-01 10:53:25 -05:00
466 changed files with 7376 additions and 27345 deletions
@@ -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/
 #
@@ -151,10 +147,6 @@ DISCORD_SERVER_ID=
 # DISCORD_SERVER_ID and DISCORD_SERVER_ROLES must be set together.
 DISCORD_SERVER_ROLES=

-# –––––––––––––– IMPORTS ––––––––––––––
-NOTION_CLIENT_ID=
-NOTION_CLIENT_SECRET=
-
 # –––––––––––––––– OPTIONAL ––––––––––––––––

 # Base64 encoded private key and certificate for HTTPS termination. This is only
@@ -209,10 +201,14 @@ SENTRY_TUNNEL=

 # To support sending outgoing transactional emails such as "document updated" or
 # "you've been invited" you'll need to provide authentication for an SMTP server
-SMTP_SERVICE=
+SMTP_HOST=
+SMTP_PORT=
 SMTP_USERNAME=
 SMTP_PASSWORD=
 SMTP_FROM_EMAIL=
+SMTP_REPLY_EMAIL=
+SMTP_TLS_CIPHERS=
+SMTP_SECURE=true

 # The default interface language. See translate.getoutline.com for a list of
 # available language codes and their rough percentage translated.
@@ -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,
@@ -15,8 +15,6 @@ requestInfoDefaultTitles:

 requestInfoLabelToAdd: more information needed

-requestInfoUserstoExclude:
-  - tommoor

 # Configuration for new-pr-welcome - https://github.com/behaviorbot/new-pr-welcome

@@ -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
@@ -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 }}
@@ -1,30 +0,0 @@
-name: Lint
-
-on:
-  pull_request:
-    branches: [ main ]
-
-jobs:
-  run-linters:
-    if: startsWith(github.actor, 'codegen-sh')
-    name: Run linters
-    runs-on: ubuntu-latest
-
-    permissions:
-      # Give the default GITHUB_TOKEN write permission to commit and push the
-      # added or changed files to the repository.
-      contents: write
-
-    steps:
-      - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
-        with:
-          node-version: 20.x
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn lint --fix
-
-      - name: Commit changes
-        uses: stefanzweifel/git-auto-commit-action@v5
-        with:
-          commit_message: 'Applied automatic fixes'
@@ -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" && \
@@ -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

@@ -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

@@ -171,10 +171,6 @@
      "description": "smtp.example.com (optional)",
      "required": false
    },
-    "SMTP_SERVICE": {
-      "description": "Well-known SMTP service name for nodemailer (optional, e.g. 'gmail', 'SES')",
-      "required": false
-    },
    "SMTP_PORT": {
      "description": "1234 (optional)",
      "required": false
@@ -149,7 +149,7 @@ export const searchInCollection = createAction({
  },

  perform: ({ activeCollectionId }) => {
-    history.push(searchPath({ collectionId: activeCollectionId }));
+    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
  },
 });

@@ -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({
@@ -708,7 +683,6 @@ export const searchInDocument = createAction({
  name: ({ t }) => t("Search in document"),
  analyticsName: "Search document",
  section: ActiveDocumentSection,
-  shortcut: [`Meta+/`],
  icon: <SearchIcon />,
  visible: ({ stores, activeDocumentId }) => {
    if (!activeDocumentId) {
@@ -718,7 +692,7 @@ export const searchInDocument = createAction({
    return !!document?.isActive;
  },
  perform: ({ activeDocumentId }) => {
-    history.push(searchPath({ documentId: activeDocumentId }));
+    history.push(searchPath(undefined, { documentId: activeDocumentId }));
  },
 });

@@ -831,15 +805,15 @@ export const openRandomDocument = createAction({
  },
 });

-export const searchDocumentsForQuery = (query: string) =>
+export const searchDocumentsForQuery = (searchQuery: string) =>
  createAction({
    id: "search",
    name: ({ t }) =>
-      t(`Search documents for "{{searchQuery}}"`, { searchQuery: query }),
+      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
    analyticsName: "Search documents",
    section: DocumentSection,
    icon: <SearchIcon />,
-    perform: () => history.push(searchPath({ query })),
+    perform: () => history.push(searchPath(searchQuery)),
    visible: ({ location }) => location.pathname !== searchPath(),
  });

@@ -1230,14 +1204,12 @@ export const rootDocumentActions = [
  copyDocumentLink,
  copyDocumentShareLink,
  copyDocumentAsMarkdown,
-  copyDocumentAsPlainText,
  starDocument,
  unstarDocument,
  publishDocument,
  unpublishDocument,
  subscribeDocument,
  unsubscribeDocument,
-  searchInDocument,
  duplicateDocument,
  leaveDocument,
  moveTemplateToWorkspace,
@@ -50,7 +50,7 @@ export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
    name: searchQuery.query,
    analyticsName: "Navigate to recent search query",
    icon: <SearchIcon />,
-    perform: () => history.push(searchPath({ query: searchQuery.query })),
+    perform: () => history.push(searchPath(searchQuery.query)),
  });

 export const navigateToDrafts = createAction({
@@ -62,15 +62,6 @@ export const navigateToDrafts = createAction({
  visible: ({ location }) => location.pathname !== draftsPath(),
 });

-export const navigateToSearch = createAction({
-  name: ({ t }) => t("Search"),
-  analyticsName: "Navigate to search",
-  section: NavigationSection,
-  icon: <SearchIcon />,
-  perform: () => history.push(searchPath()),
-  visible: ({ location }) => location.pathname !== searchPath(),
-});
-
 export const navigateToArchive = createAction({
  name: ({ t }) => t("Archive"),
  analyticsName: "Navigate to archive",
@@ -2,8 +2,6 @@ import { ActionContext } from "~/types";

 export const CollectionSection = ({ t }: ActionContext) => t("Collection");

-export const CollectionsSection = ({ t }: ActionContext) => t("Collections");
-
 export const ActiveCollectionSection = ({ t, stores }: ActionContext) => {
  const activeCollection = stores.collections.active;
  return `${t("Collection")} · ${activeCollection?.name}`;
@@ -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);
@@ -1,22 +1,15 @@
 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 ErrorSuspended from "~/scenes/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 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>
@@ -7,43 +7,17 @@ import User from "~/models/User";
 import Tooltip from "~/components/Tooltip";
 import Avatar, { AvatarSize } from "./Avatar";

-/**
- * Props for the AvatarWithPresence component
- */
 type Props = {
-  /** The user to display the avatar for */
  user: User;
-  /** Whether the user is currently present in the document */
  isPresent: boolean;
-  /** Whether the user is currently editing the document */
  isEditing: boolean;
-  /** Whether the user is currently observing the document */
  isObserving: boolean;
-  /** Whether this avatar represents the current user */
  isCurrentUser: boolean;
-  /** Optional click handler for the avatar */
  onClick?: React.MouseEventHandler<HTMLImageElement>;
-  /** Size of the avatar, defaults to AvatarSize.Large */
  size?: AvatarSize;
-  /** Optional inline styles to apply to the avatar wrapper */
  style?: React.CSSProperties;
 };

-/**
- * AvatarWithPresence component displays a user's avatar with visual indicators
- * for their current status (present, editing, observing).
- *
- * The component shows different visual states:
- * - Present users have full opacity
- * - Non-present users have reduced opacity
- * - Observing users have a colored border matching their user color
- * - Hovering shows a colored border
- *
- * A tooltip displays the user's name and current status.
- *
- * @param props - Component properties
- * @returns React component
- */
 function AvatarWithPresence({
  onClick,
  user,
@@ -90,33 +64,16 @@ function AvatarWithPresence({
  );
 }

-/**
- * Centered container for tooltip content
- */
 const Centered = styled.div`
  text-align: center;
 `;

-/**
- * Props for the AvatarPresence styled component
- */
 type AvatarWrapperProps = {
-  /** Whether the user is currently present */
  $isPresent: boolean;
-  /** Whether the user is currently observing */
  $isObserving: boolean;
-  /** The user's color for border highlighting */
  $color: string;
 };

-/**
- * Styled component that wraps the Avatar and provides visual indicators
- * for the user's presence status.
- *
- * - Adjusts opacity based on presence
- * - Adds colored borders for observing users
- * - Handles hover effects
- */
 const AvatarPresence = styled.div<AvatarWrapperProps>`
  opacity: ${(props) => (props.$isPresent ? 1 : 0.5)};
  transition: opacity 250ms ease-in-out;
@@ -80,10 +80,6 @@ const RealButton = styled(ActionButton)<RealProps>`
      } 0 0 0 1px inset;
    }

-    &:focus-visible {
-      box-shadow: ${`rgba(0, 0, 0, 0.07) 0px 1px 2px, ${props.theme.inputBorderFocused} 0 0 0 1px inset`};
-    }
-
    &:disabled {
      color: ${props.theme.textTertiary};
      background: none;
@@ -49,7 +49,7 @@ function Collaborators(props: Props) {
    () =>
      orderBy(
        filter(
-          users.all,
+          users.orderedData,
          (u) =>
            (presentIds.includes(u.id) ||
              document.collaboratorIds.includes(u.id)) &&
@@ -58,7 +58,7 @@ function Collaborators(props: Props) {
        [(u) => presentIds.includes(u.id), "id"],
        ["asc", "asc"]
      ),
-    [document.collaboratorIds, users.all, presentIds]
+    [document.collaboratorIds, users.orderedData, presentIds]
  );

  // load any users we don't yet have in memory
@@ -11,7 +11,6 @@ import Collection from "~/models/Collection";
 import Editor from "~/components/Editor";
 import LoadingIndicator from "~/components/LoadingIndicator";
 import { withUIExtensions } from "~/editor/extensions";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import Text from "./Text";
@@ -25,7 +24,6 @@ type Props = {
 function CollectionDescription({ collection }: Props) {
  const { collections } = useStores();
  const { t } = useTranslation();
-  const user = useCurrentUser({ rejectOnEmpty: true });
  const can = usePolicy(collection);

  const handleSave = React.useMemo(
@@ -67,8 +65,8 @@ function CollectionDescription({ collection }: Props) {
            maxLength={CollectionValidation.maxDescriptionLength}
            canUpdate={can.update}
            readOnly={!can.update}
-            userId={user.id}
            editorStyle={editorStyle}
+            embedsDisabled
          />
          <div ref={childRef} />
        </React.Suspense>
@@ -3,7 +3,6 @@ import { ArrowIcon, BackIcon } from "outline-icons";
 import * as React from "react";
 import styled, { css, useTheme } from "styled-components";
 import { s, ellipsis } from "@shared/styles";
-import { normalizeKeyDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Key from "~/components/Key";
 import Text from "~/components/Text";
@@ -71,7 +70,7 @@ function CommandBarItem(
                ""
              )}
              {sc.split("+").map((key) => (
-                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
+                <Key key={key}>{key}</Key>
              ))}
            </React.Fragment>
          ))}
@@ -4,12 +4,6 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import {
-  AuthenticationFailed,
-  AuthorizationFailed,
-  DocumentTooLarge,
-  TooManyConnections,
-} from "@shared/collaboration/CloseEvents";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
@@ -20,21 +14,21 @@ function ConnectionStatus() {
  const { t } = useTranslation();

  const codeToMessage = {
-    [DocumentTooLarge.code]: {
+    1009: {
      title: t("Document is too large"),
      body: t(
        "This document has reached the maximum size and can no longer be edited"
      ),
    },
-    [AuthenticationFailed.code]: {
+    4401: {
      title: t("Authentication failed"),
      body: t("Please try logging out and back in again"),
    },
-    [AuthorizationFailed.code]: {
+    4403: {
      title: t("Authorization failed"),
      body: t("You may have lost access to this document, try reloading"),
    },
-    [TooManyConnections.code]: {
+    4503: {
      title: t("Too many users connected to document"),
      body: t("Your edits will sync once other users leave the document"),
    },
@@ -161,9 +161,6 @@ export const MenuAnchorCSS = css<MenuAnchorProps>`
    &:focus-visible {
      color: ${props.theme.accentText};
      background: ${props.dangerous ? props.theme.danger : props.theme.accent};
-      outline-color: ${
-        props.dangerous ? props.theme.danger : props.theme.accent
-      };
      box-shadow: none;
      cursor: var(--pointer);

@@ -2,11 +2,16 @@ import { HomeIcon } from "outline-icons";
 import React, { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
+import { Optional } from "utility-types";
+import Flex from "~/components/Flex";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { InputSelectNew, Option } from "~/components/InputSelectNew";
+import InputSelect from "~/components/InputSelect";
+import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
 import useStores from "~/hooks/useStores";

-type DefaultCollectionInputSelectProps = {
+type DefaultCollectionInputSelectProps = Optional<
+  React.ComponentProps<typeof InputSelect>
+> & {
  onSelectCollection: (collection: string) => void;
  defaultCollectionId: string | null;
 };
@@ -14,6 +19,7 @@ type DefaultCollectionInputSelectProps = {
 const DefaultCollectionInputSelect = ({
  onSelectCollection,
  defaultCollectionId,
+  ...rest
 }: DefaultCollectionInputSelectProps) => {
  const { t } = useTranslation();
  const { collections } = useStores();
@@ -41,26 +47,36 @@ const DefaultCollectionInputSelect = ({
    void fetchData();
  }, [fetchError, t, fetching, collections]);

-  const options: Option[] = React.useMemo(
+  const options = React.useMemo(
    () =>
      collections.nonPrivate.reduce(
        (acc, collection) => [
          ...acc,
          {
-            type: "item",
-            label: collection.name,
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <CollectionIcon collection={collection} />
+                </IconWrapper>
+                {collection.name}
+              </Flex>
+            ),
            value: collection.id,
-            icon: <CollectionIcon collection={collection} />,
          },
        ],
        [
          {
-            type: "item",
-            label: t("Home"),
+            label: (
+              <Flex align="center">
+                <IconWrapper>
+                  <HomeIcon />
+                </IconWrapper>
+                {t("Home")}
+              </Flex>
+            ),
            value: "home",
-            icon: <HomeIcon />,
          },
-        ] satisfies Option[]
+        ]
      ),
    [collections.nonPrivate, t]
  );
@@ -70,14 +86,13 @@ const DefaultCollectionInputSelect = ({
  }

  return (
-    <InputSelectNew
-      options={options}
+    <InputSelect
      value={defaultCollectionId ?? "home"}
+      options={options}
      onChange={onSelectCollection}
      ariaLabel={t("Default collection")}
-      label={t("Start view")}
-      hideLabel
      short
+      {...rest}
    />
  );
 };
@@ -23,10 +23,7 @@ function Dialogs() {
          key={id}
          isOpen={modal.isOpen}
          fullscreen={modal.fullscreen ?? false}
-          onRequestClose={() => {
-            modal.onClose?.();
-            dialogs.closeModal(id);
-          }}
+          onRequestClose={() => dialogs.closeModal(id)}
          title={modal.title}
          style={modal.style}
        >
@@ -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>
        ))}
      </>
@@ -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);
@@ -6,9 +6,7 @@ import * as React from "react";
 import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
-import EditorContainer from "@shared/editor/components/Styles";
 import { AttachmentPreset } from "@shared/types";
-import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { getDataTransferFiles } from "@shared/utils/files";
 import { AttachmentValidation } from "@shared/validations";
 import ClickablePadding from "~/components/ClickablePadding";
@@ -185,46 +183,22 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
    [updateComments]
  );

-  const paragraphs = React.useMemo(() => {
-    if (props.readOnly && typeof props.value === "object") {
-      return ProsemirrorHelper.getPlainParagraphs(props.value);
-    }
-    return undefined;
-  }, [props.readOnly, props.value]);
-
  return (
    <ErrorBoundary component="div" reloadOnChunkMissing>
      <>
-        {paragraphs ? (
-          <EditorContainer
-            rtl={props.dir === "rtl"}
-            grow={props.grow}
-            style={props.style}
-            editorStyle={props.editorStyle}
-          >
-            <div className="ProseMirror">
-              {paragraphs.map((paragraph, index) => (
-                <p key={index} dir="auto">
-                  {paragraph.content?.map((content) => content.text)}
-                </p>
-              ))}
-            </div>
-          </EditorContainer>
-        ) : (
-          <LazyLoadedEditor
-            key={props.extensions?.length || 0}
-            ref={mergeRefs([ref, localRef, handleRefChanged])}
-            uploadFile={handleUploadFile}
-            embeds={embeds}
-            userPreferences={preferences}
-            dictionary={dictionary}
-            {...props}
-            onClickLink={handleClickLink}
-            onChange={handleChange}
-            placeholder={props.placeholder || ""}
-            defaultValue={props.defaultValue || ""}
-          />
-        )}
+        <LazyLoadedEditor
+          key={props.extensions?.length || 0}
+          ref={mergeRefs([ref, localRef, handleRefChanged])}
+          uploadFile={handleUploadFile}
+          embeds={embeds}
+          userPreferences={preferences}
+          dictionary={dictionary}
+          {...props}
+          onClickLink={handleClickLink}
+          onChange={handleChange}
+          placeholder={props.placeholder || ""}
+          defaultValue={props.defaultValue || ""}
+        />
        {props.editorStyle?.paddingBottom && !props.readOnly && (
          <ClickablePadding
            onClick={props.readOnly ? undefined : focusAtEnd}
@@ -1,9 +1,9 @@
 import styled from "styled-components";
-import Text from "~/components/Text";
+import { s } from "@shared/styles";

-const Empty = styled(Text).attrs({
-  type: "tertiary",
-  selectable: false,
-})``;
+const Empty = styled.p`
+  color: ${s("textTertiary")};
+  user-select: none;
+`;

 export default Empty;
@@ -7,7 +7,6 @@ import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
 import Button from "~/components/Button";
 import CenteredContent from "~/components/CenteredContent";
-import Heading from "~/components/Heading";
 import PageTitle from "~/components/PageTitle";
 import Text from "~/components/Text";
 import env from "~/env";
@@ -78,9 +77,9 @@ class ErrorBoundary extends React.Component<Props> {
            {showTitle && (
              <>
                <PageTitle title={t("Module failed to load")} />
-                <Heading>
+                <h1>
                  <Trans>Loading Failed</Trans>
-                </Heading>
+                </h1>
              </>
            )}
            <Text as="p" type="secondary">
@@ -102,9 +101,9 @@ class ErrorBoundary extends React.Component<Props> {
          {showTitle && (
            <>
              <PageTitle title={t("Something Unexpected Happened")} />
-              <Heading>
+              <h1>
                <Trans>Something Unexpected Happened</Trans>
-              </Heading>
+              </h1>
            </>
          )}
          <Text as="p" type="secondary">
@@ -234,7 +234,7 @@ const lineStyle = css`
    width: 1px;
    height: calc(50% - 14px + 8px);
    background: ${s("divider")};
-    mix-blend-mode: ${(props) => (props.theme.isDark ? "lighten" : "multiply")};
+    mix-blend-mode: multiply;
    z-index: 1;
  }

@@ -255,7 +255,7 @@ const lineStyle = css`
    width: 1px;
    height: calc(50% - 14px);
    background: ${s("divider")};
-    mix-blend-mode: ${(props) => (props.theme.isDark ? "lighten" : "multiply")};
+    mix-blend-mode: multiply;
    z-index: 1;
  }

@@ -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}</>;
 };

@@ -23,6 +23,7 @@ type Props = {
  options: TFilterOption[];
  selectedKeys: (string | null | undefined)[];
  defaultLabel?: string;
+  selectedPrefix?: string;
  className?: string;
  onSelect: (key: string | null | undefined) => void;
  showFilter?: boolean;
@@ -34,6 +35,7 @@ const FilterOptions = ({
  options,
  selectedKeys = [],
  defaultLabel = "Filter options",
+  selectedPrefix = "",
  className,
  onSelect,
  showFilter,
@@ -52,11 +54,13 @@ const FilterOptions = ({
  const [query, setQuery] = React.useState("");

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

  const renderItem = React.useCallback(
-    (option) => (
+    (option: TFilterOption) => (
      <MenuItem
        key={option.key}
        onClick={() => {
@@ -66,7 +70,7 @@ const FilterOptions = ({
        selected={selectedKeys.includes(option.key)}
        {...menu}
      >
-        {option.icon}
+        {option.icon && <Icon>{option.icon}</Icon>}
        {option.note ? (
          <LabelWithNote>
            {option.label}
@@ -159,22 +163,16 @@ const FilterOptions = ({
  const showFilterInput = showFilter || options.length > 10;

  return (
-    <>
+    <div>
      <MenuButton {...menu}>
        {(props) => (
-          <StyledButton
-            {...props}
-            className={className}
-            icon={selectedItems[0]?.key && selectedItems[0]?.icon}
-            neutral
-            disclosure
-          >
+          <StyledButton {...props} className={className} neutral disclosure>
            {selectedItems.length ? selectedLabel : defaultLabel}
          </StyledButton>
        )}
      </MenuButton>
      <ContextMenu aria-label={defaultLabel} minHeight={66} {...menu}>
-        <PaginatedList<TFilterOption>
+        <PaginatedList
          listRef={listRef}
          options={{ query, ...fetchQueryOptions }}
          items={filteredOptions}
@@ -195,7 +193,7 @@ const FilterOptions = ({
          />
        )}
      </ContextMenu>
-    </>
+    </div>
  );
 };

@@ -233,7 +231,6 @@ const SearchInput = styled(Input)`
    border-radius: 0;
    border-bottom: 1px solid ${s("divider")};
    background: ${s("menuBackground")};
-    margin: 0;
  }

  ${NativeInput} {
@@ -270,9 +267,15 @@ export const StyledButton = styled(Button)`
  }

  ${Inner} {
-    line-height: 28px;
+    line-height: 24px;
    min-height: auto;
  }
 `;

+const Icon = styled.div`
+  margin-right: 8px;
+  width: 18px;
+  height: 18px;
+`;
+
 export default FilterOptions;
@@ -73,7 +73,7 @@ const Backdrop = styled.div`
  right: 0;
  bottom: 0;
  background-color: ${s("backdrop")} !important;
-  z-index: ${depths.overlay};
+  z-index: ${depths.modalOverlay};
  transition: opacity 200ms ease-in-out;
  opacity: 0;

@@ -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`
@@ -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}
    />
  );
@@ -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;
@@ -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;
@@ -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;
+  }
+}
@@ -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;
+  }
+}
@@ -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 */
@@ -60,8 +60,7 @@ function InputSearchPage({
      if (ev.key === "Enter") {
        ev.preventDefault();
        history.push(
-          searchPath({
-            query: ev.currentTarget.value,
+          searchPath(ev.currentTarget.value, {
            collectionId,
            ref: source,
          })
@@ -1,354 +0,0 @@
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import { transparentize } from "polished";
-import React from "react";
-import styled from "styled-components";
-import Text from "~/components/Text";
-import useMobile from "~/hooks/useMobile";
-import Separator from "./ContextMenu/Separator";
-import Flex from "./Flex";
-import { LabelText } from "./Input";
-import Scrollable from "./Scrollable";
-import { IconWrapper } from "./Sidebar/components/SidebarLink";
-import {
-  Drawer,
-  DrawerContent,
-  DrawerTitle,
-  DrawerTrigger,
-} from "./primitives/Drawer";
-import {
-  InputSelectRoot,
-  InputSelectContent,
-  InputSelectItem,
-  InputSelectSeparator,
-  InputSelectTrigger,
-  type TriggerButtonProps,
-} from "./primitives/InputSelect";
-import {
-  SelectItemIndicator,
-  SelectItem as SelectItemWrapper,
-  SelectButton,
-} from "./primitives/components/InputSelect";
-
-type Separator = {
-  /* Denotes a horizontal divider line to be rendered in the menu, */
-  type: "separator";
-};
-
-export type Item = {
-  /* Denotes a selectable option in the menu. */
-  type: "item";
-  /* Representative text shown in the menu for this option. */
-  label: string;
-  /* Actual value of this option. */
-  value: string;
-  /* Additional info shown alongside the label.  */
-  description?: string;
-  /* An icon shown alongside the label.  */
-  icon?: React.ReactElement;
-};
-
-export type Option = Item | Separator;
-
-type Props = {
-  /* Options to display in the select menu. */
-  options: Option[];
-  /* Current chosen value. */
-  value?: string;
-  /* Callback when an option is selected. */
-  onChange: (value: string) => void;
-  /* ARIA label for accessibility. */
-  ariaLabel: string;
-  /* Label for the select menu. */
-  label: string;
-  /* When true, label is hidden in an accessible manner. */
-  hideLabel?: boolean;
-  /* When true, menu is disabled. */
-  disabled?: boolean;
-  /* When true, width of the menu trigger is restricted. Otherwise, takes up the full width of parent. */
-  short?: boolean;
-} & TriggerButtonProps;
-
-export function InputSelectNew(props: Props) {
-  const {
-    options,
-    value,
-    onChange,
-    ariaLabel,
-    label,
-    hideLabel,
-    disabled,
-    short,
-    ...triggerProps
-  } = props;
-
-  const [localValue, setLocalValue] = React.useState(value);
-  const [open, setOpen] = React.useState(false);
-
-  const triggerRef =
-    React.useRef<React.ElementRef<typeof InputSelectTrigger>>(null);
-  const contentRef =
-    React.useRef<React.ElementRef<typeof InputSelectContent>>(null);
-
-  const isMobile = useMobile();
-
-  const placeholder = `Select a ${ariaLabel.toLowerCase()}`;
-  const optionsHaveIcon = options.some(
-    (opt) => opt.type === "item" && !!opt.icon
-  );
-
-  const renderOption = React.useCallback(
-    (option: Option) => {
-      if (option.type === "separator") {
-        return <InputSelectSeparator />;
-      }
-
-      return (
-        <InputSelectItem key={option.value} value={option.value}>
-          <Option option={option} optionsHaveIcon={optionsHaveIcon} />
-        </InputSelectItem>
-      );
-    },
-    [optionsHaveIcon]
-  );
-
-  const onValueChange = React.useCallback(
-    async (val: string) => {
-      setLocalValue(val);
-      onChange(val);
-    },
-    [onChange, setLocalValue]
-  );
-
-  const enablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "auto";
-    }
-  }, []);
-
-  const disablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "none";
-    }
-  }, []);
-
-  React.useEffect(() => {
-    setLocalValue(value);
-  }, [value]);
-
-  if (isMobile) {
-    return (
-      <MobileSelect
-        {...props}
-        value={localValue}
-        onChange={onValueChange}
-        placeholder={placeholder}
-        optionsHaveIcon={optionsHaveIcon}
-      />
-    );
-  }
-
-  return (
-    <Wrapper short={short}>
-      <Label text={label} hidden={hideLabel ?? false} />
-      <InputSelectRoot
-        open={open}
-        onOpenChange={setOpen}
-        value={localValue}
-        onValueChange={onValueChange}
-      >
-        <InputSelectTrigger
-          ref={triggerRef}
-          placeholder={placeholder}
-          {...triggerProps}
-        />
-        <InputSelectContent
-          ref={contentRef}
-          aria-label={ariaLabel}
-          onAnimationStart={disablePointerEvents}
-          onAnimationEnd={enablePointerEvents}
-        >
-          {options.map(renderOption)}
-        </InputSelectContent>
-      </InputSelectRoot>
-    </Wrapper>
-  );
-}
-
-type MobileSelectProps = Props & {
-  placeholder: string;
-  optionsHaveIcon: boolean;
-};
-
-function MobileSelect(props: MobileSelectProps) {
-  const {
-    options,
-    value,
-    onChange,
-    ariaLabel,
-    label,
-    hideLabel,
-    disabled,
-    short,
-    placeholder,
-    optionsHaveIcon,
-    ...triggerProps
-  } = props;
-
-  const [open, setOpen] = React.useState(false);
-  const contentRef = React.useRef<React.ElementRef<typeof DrawerContent>>(null);
-
-  const selectedOption = React.useMemo(
-    () =>
-      value
-        ? options.find((opt) => opt.type === "item" && opt.value === value)
-        : undefined,
-    [value, options]
-  );
-
-  const handleSelect = React.useCallback(
-    async (val: string) => {
-      setOpen(false);
-      onChange(val);
-    },
-    [onChange]
-  );
-
-  const renderOption = React.useCallback(
-    (option: Option) => {
-      if (option.type === "separator") {
-        return <Separator />;
-      }
-
-      const isSelected = option === selectedOption;
-
-      return (
-        <SelectItemWrapper
-          key={option.value}
-          onClick={() => handleSelect(option.value)}
-          data-state={isSelected ? "checked" : "unchecked"}
-        >
-          <Option option={option} optionsHaveIcon={optionsHaveIcon} />
-          {isSelected && <SelectItemIndicator />}
-        </SelectItemWrapper>
-      );
-    },
-    [handleSelect, selectedOption, optionsHaveIcon]
-  );
-
-  const enablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "auto";
-    }
-  }, []);
-
-  const disablePointerEvents = React.useCallback(() => {
-    if (contentRef.current) {
-      contentRef.current.style.pointerEvents = "none";
-    }
-  }, []);
-
-  return (
-    <Wrapper>
-      <Label text={label} hidden={hideLabel ?? false} />
-      <Drawer open={open} onOpenChange={setOpen}>
-        <DrawerTrigger asChild>
-          <SelectButton
-            {...triggerProps}
-            neutral
-            disclosure
-            data-placeholder={selectedOption ? false : ""}
-          >
-            {selectedOption ? (
-              <Option
-                option={selectedOption as Item}
-                optionsHaveIcon={optionsHaveIcon}
-              />
-            ) : (
-              <>{placeholder}</>
-            )}
-          </SelectButton>
-        </DrawerTrigger>
-        <DrawerContent
-          ref={contentRef}
-          aria-label={ariaLabel}
-          onAnimationStart={disablePointerEvents}
-          onAnimationEnd={enablePointerEvents}
-        >
-          <DrawerTitle hidden={!label}>{label ?? ariaLabel}</DrawerTitle>
-          <StyledScrollable hiddenScrollbars>
-            {options.map(renderOption)}
-          </StyledScrollable>
-        </DrawerContent>
-      </Drawer>
-    </Wrapper>
-  );
-}
-
-function Label({ text, hidden }: { text: string; hidden: boolean }) {
-  const labelText = <LabelText>{text}</LabelText>;
-
-  return hidden ? (
-    <VisuallyHidden.Root>{labelText}</VisuallyHidden.Root>
-  ) : (
-    labelText
-  );
-}
-
-function Option({
-  option,
-  optionsHaveIcon,
-}: {
-  option: Item;
-  optionsHaveIcon: boolean;
-}) {
-  const icon = optionsHaveIcon ? (
-    option.icon ? (
-      <IconWrapper>{option.icon}</IconWrapper>
-    ) : (
-      <IconSpacer />
-    )
-  ) : null;
-
-  return (
-    <OptionContainer align="center">
-      {icon}
-      {option.label}
-      {option.description && (
-        <>
-          &nbsp;
-          <Description type="tertiary" size="small" ellipsis>
-            – {option.description}
-          </Description>
-        </>
-      )}
-    </OptionContainer>
-  );
-}
-
-const Wrapper = styled.label<{ short?: boolean }>`
-  display: block;
-  max-width: ${(props) => (props.short ? "350px" : "100%")};
-`;
-
-const OptionContainer = styled(Flex)`
-  min-height: 24px;
-`;
-
-const Description = styled(Text)`
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      color: ${(props) => transparentize(0.5, props.theme.accentText)};
-    }
-  }
-`;
-
-const IconSpacer = styled.div`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
-const StyledScrollable = styled(Scrollable)`
-  max-height: 75vh;
-`;
@@ -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);
@@ -33,7 +33,6 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
  small?: boolean;
  /** Whether to enable keyboard navigation */
  keyboardNavigation?: boolean;
-  ellipsis?: boolean;
 };

 const ListItem = (
@@ -46,7 +45,6 @@ const ListItem = (
    border,
    to,
    keyboardNavigation,
-    ellipsis,
    ...rest
  }: Props,
  ref: React.RefObject<HTMLAnchorElement>
@@ -85,9 +83,7 @@ const ListItem = (
        column={!compact}
        $selected={selected}
      >
-        <Heading $small={small} $ellipsis={ellipsis}>
-          {title}
-        </Heading>
+        <Heading $small={small}>{title}</Heading>
        {subtitle && (
          <Subtitle $small={small} $selected={selected}>
            {subtitle}
@@ -109,7 +105,7 @@ const ListItem = (
        $border={border}
        $small={small}
        activeStyle={{
-          background: theme.sidebarActiveBackground,
+          background: theme.accent,
        }}
        {...rest}
        {...rovingTabIndex}
@@ -212,10 +208,10 @@ const Image = styled(Flex)`
  color: ${s("text")};
 `;

-const Heading = styled.p<{ $small?: boolean; $ellipsis?: boolean }>`
+const Heading = styled.p<{ $small?: boolean }>`
  font-size: ${(props) => (props.$small ? 14 : 16)}px;
  font-weight: 500;
-  ${(props) => (props.$ellipsis !== false ? ellipsis() : "")}
+  ${ellipsis()}
  line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
  margin: 0;
 `;
@@ -223,13 +219,14 @@ const Heading = styled.p<{ $small?: boolean; $ellipsis?: boolean }>`
 const Content = styled(Flex)<{ $selected: boolean }>`
  flex-direction: column;
  flex-grow: 1;
-  color: ${s("text")};
+  color: ${(props) => (props.$selected ? props.theme.white : props.theme.text)};
 `;

 const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
  margin: 0;
  font-size: ${(props) => (props.$small ? 13 : 14)}px;
-  color: ${s("textTertiary")};
+  color: ${(props) =>
+    props.$selected ? props.theme.white50 : props.theme.textTertiary};
  margin-top: -2px;
 `;

@@ -237,7 +234,8 @@ export const Actions = styled(Flex)<{ $selected?: boolean }>`
  align-self: center;
  justify-content: center;
  flex-shrink: 0;
-  color: ${s("textSecondary")};
+  color: ${(props) =>
+    props.$selected ? props.theme.white : props.theme.textSecondary};
 `;

 export default React.forwardRef(ListItem);
@@ -1,7 +1,24 @@
+import { format as formatDate } from "date-fns";
 import * as React from "react";
-import { locales } from "@shared/utils/date";
+import { dateLocale, dateToRelative, locales } from "@shared/utils/date";
 import Tooltip from "~/components/Tooltip";
-import { useLocaleTime } from "~/hooks/useLocaleTime";
+import useUserLocale from "~/hooks/useUserLocale";
+
+let callbacks: (() => void)[] = [];
+
+// This is a shared timer that fires every minute, used for
+// updating all Time components across the page all at once.
+setInterval(() => {
+  callbacks.forEach((cb) => cb());
+}, 1000 * 60);
+
+function eachMinute(fn: () => void) {
+  callbacks.push(fn);
+
+  return () => {
+    callbacks = callbacks.filter((cb) => cb !== fn);
+  };
+}

 export type Props = {
  children?: React.ReactNode;
@@ -12,12 +29,59 @@ export type Props = {
  format?: Partial<Record<keyof typeof locales, string>>;
 };

-const LocaleTime: React.FC<Props> = ({ children, ...rest }: Props) => {
-  const { tooltipContent, content } = useLocaleTime(rest);
+const LocaleTime: React.FC<Props> = ({
+  addSuffix,
+  children,
+  dateTime,
+  shorten,
+  format,
+  relative,
+}: Props) => {
+  const userLocale = useUserLocale();
+  const dateFormatLong: Record<string, string> = {
+    en_US: "MMMM do, yyyy h:mm a",
+    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
+  };
+  const formatLocaleLong =
+    (userLocale ? dateFormatLong[userLocale] : undefined) ??
+    "MMMM do, yyyy h:mm a";
+  // @ts-expect-error fallback to formatLocaleLong
+  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
+  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
+  const callback = React.useRef<() => void>();
+
+  React.useEffect(() => {
+    callback.current = eachMinute(() => {
+      setMinutesMounted((state) => ++state);
+    });
+    return () => {
+      if (callback.current) {
+        callback.current?.();
+      }
+    };
+  }, []);
+
+  const date = new Date(Date.parse(dateTime));
+  const locale = dateLocale(userLocale);
+  const relativeContent = dateToRelative(date, {
+    addSuffix,
+    locale,
+    shorten,
+  });
+
+  const tooltipContent = formatDate(date, formatLocaleLong, {
+    locale,
+  });
+  const content =
+    relative !== false
+      ? relativeContent
+      : formatDate(date, formatLocale, {
+          locale,
+        });

  return (
    <Tooltip content={tooltipContent} placement="bottom">
-      <time dateTime={rest.dateTime}>{children || content}</time>
+      <time dateTime={dateTime}>{children || content}</time>
    </Tooltip>
  );
 };
@@ -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
                  >
@@ -149,7 +147,7 @@ const Backdrop = styled(Flex)<{ $fullscreen?: boolean }>`
    props.$fullscreen
      ? transparentize(0.25, props.theme.background)
      : props.theme.modalBackdrop} !important;
-  z-index: ${depths.overlay};
+  z-index: ${depths.modalOverlay};
  transition: opacity 50ms ease-in-out;
  opacity: 0;

@@ -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;
@@ -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}
@@ -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}
@@ -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({
@@ -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,
@@ -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));
@@ -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}
@@ -96,7 +96,7 @@ export const Suggestions = observer(
          ? users.notInDocument(document.id, query)
          : collection
          ? users.notInCollection(collection.id, query)
-          : users.activeOrInvited
+          : users.orderedData
      ).filter((u) => !u.isSuspended && u.id !== user.id);

      if (isEmail(query)) {
@@ -114,7 +114,7 @@ export const Suggestions = observer(
    }, [
      getSuggestionForEmail,
      users,
-      users.activeOrInvited,
+      users.orderedData,
      groups,
      groups.orderedData,
      document?.id,
@@ -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]
@@ -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}
@@ -10,7 +10,6 @@ import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { CollectionValidation, DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import EditableTitle, { RefHandle } from "~/components/EditableTitle";
 import Fade from "~/components/Fade";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import NudeButton from "~/components/NudeButton";
@@ -22,6 +21,7 @@ import CollectionMenu from "~/menus/CollectionMenu";
 import { documentEditPath } from "~/utils/routeHelpers";
 import { useDropToChangeCollection } from "../hooks/useDragAndDrop";
 import DropToImport from "./DropToImport";
+import EditableTitle, { RefHandle } from "./EditableTitle";
 import Relative from "./Relative";
 import { SidebarContextType, useSidebarContext } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
@@ -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}
@@ -12,7 +12,6 @@ import { sortNavigationNodes } from "@shared/utils/collections";
 import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
-import EditableTitle, { RefHandle } from "~/components/EditableTitle";
 import Fade from "~/components/Fade";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
@@ -29,6 +28,7 @@ import {
 } from "../hooks/useDragAndDrop";
 import DropCursor from "./DropCursor";
 import DropToImport from "./DropToImport";
+import EditableTitle, { RefHandle } from "./EditableTitle";
 import Folder from "./Folder";
 import Relative from "./Relative";
 import { SidebarContextType, useSidebarContext } from "./SidebarContext";
@@ -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}
@@ -73,13 +73,15 @@ function EditableTitle(
        return;
      }

-      try {
-        await onSubmit(trimmedValue);
-        setOriginalValue(trimmedValue);
-      } catch (error) {
-        setValue(originalValue);
-        toast.error(error.message);
-        throw error;
+      if (document) {
+        try {
+          await onSubmit(trimmedValue);
+          setOriginalValue(trimmedValue);
+        } catch (error) {
+          setValue(originalValue);
+          toast.error(error.message);
+          throw error;
+        }
      }
    },
    [originalValue, value, onCancel, onSubmit]
@@ -125,10 +127,7 @@ function EditableTitle(
          />
        </form>
      ) : (
-        <span
-          onDoubleClick={canUpdate ? handleDoubleClick : undefined}
-          className={rest.className}
-        >
+        <span onDoubleClick={canUpdate ? handleDoubleClick : undefined}>
          {value}
        </span>
      )}
@@ -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}
@@ -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(),
    }),
@@ -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;
@@ -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;
@@ -1,16 +1,15 @@
 import invariant from "invariant";
 import find from "lodash/find";
+import isObject from "lodash/isObject";
 import { action, observable } from "mobx";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
+import semver from "semver";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
-import {
-  FileOperationState,
-  FileOperationType,
-  ImportState,
-} from "@shared/types";
+import EDITOR_VERSION from "@shared/editor/version";
+import { FileOperationState, FileOperationType } from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
 import Comment from "~/models/Comment";
@@ -19,7 +18,6 @@ import FileOperation from "~/models/FileOperation";
 import Group from "~/models/Group";
 import GroupMembership from "~/models/GroupMembership";
 import GroupUser from "~/models/GroupUser";
-import Import from "~/models/Import";
 import Membership from "~/models/Membership";
 import Notification from "~/models/Notification";
 import Pin from "~/models/Pin";
@@ -105,7 +103,6 @@ class WebsocketProvider extends React.Component<Props> {
      subscriptions,
      fileOperations,
      notifications,
-      imports,
    } = this.props;

    const currentUserId = auth?.user?.id;
@@ -120,10 +117,23 @@ class WebsocketProvider extends React.Component<Props> {
      }
    });

-    this.socket.on("authenticated", () => {
+    this.socket.on("authenticated", (data) => {
      if (this.socket) {
        this.socket.authenticated = true;
      }
+      if (isObject(data) && "editorVersion" in data) {
+        const parsedClientVersion = semver.parse(EDITOR_VERSION);
+        const parsedCurrentVersion = semver.parse(String(data.editorVersion));
+
+        if (
+          parsedClientVersion &&
+          parsedCurrentVersion &&
+          (parsedClientVersion.major < parsedCurrentVersion.major ||
+            parsedClientVersion.minor < parsedCurrentVersion.minor)
+        ) {
+          window.location.reload();
+        }
+      }
    });

    this.socket.on("unauthorized", (err: Error) => {
@@ -626,23 +636,6 @@ class WebsocketProvider extends React.Component<Props> {
      }
    );

-    this.socket.on("imports.create", (event: PartialExcept<Import, "id">) => {
-      imports.add(event);
-    });
-
-    this.socket.on("imports.update", (event: PartialExcept<Import, "id">) => {
-      imports.add(event);
-
-      if (
-        event.state === ImportState.Completed &&
-        event.createdBy?.id === auth.user?.id
-      ) {
-        toast.success(event.name, {
-          description: this.props.t("Your import completed"),
-        });
-      }
-    });
-
    this.socket.on(
      "subscriptions.create",
      (event: PartialExcept<Subscription, "id">) => {
@@ -668,10 +661,6 @@ class WebsocketProvider extends React.Component<Props> {
      }
    });

-    this.socket.on("users.delete", (event: WebsocketEntityDeletedEvent) => {
-      users.remove(event.modelId);
-    });
-
    this.socket.on(
      "userMemberships.update",
      async (event: PartialExcept<UserMembership, "id">) => {
@@ -1,88 +0,0 @@
-import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
-import React from "react";
-import styled from "styled-components";
-import { Drawer as DrawerPrimitive } from "vaul";
-import { depths, s } from "@shared/styles";
-import Flex from "../Flex";
-import Text from "../Text";
-import { Overlay } from "./components/Overlay";
-
-/** Root Drawer component - all the other components are rendered inside it. */
-const Drawer = (props: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
-  <DrawerPrimitive.Root {...props} />
-);
-Drawer.displayName = "Drawer";
-
-/** Drawer's trigger. */
-const DrawerTrigger = DrawerPrimitive.Trigger;
-
-/** Drawer's content - renders the overlay and the actual content. */
-const DrawerContent = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DrawerPrimitive.Portal>
-      <DrawerPrimitive.Overlay asChild>
-        <Overlay />
-      </DrawerPrimitive.Overlay>
-      <StyledContent ref={ref} {...rest}>
-        {children}
-      </StyledContent>
-    </DrawerPrimitive.Portal>
-  );
-});
-DrawerContent.displayName = DrawerPrimitive.Content.displayName;
-
-/** Drawer's title shown in the center. */
-const DrawerTitle = React.forwardRef<
-  React.ElementRef<typeof DrawerPrimitive.Title>,
-  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
->((props, ref) => {
-  const { hidden, children, ...rest } = props;
-
-  const title = (
-    <TitleWrapper justify="center">
-      <Text size="medium" weight="bold">
-        {children}
-      </Text>
-    </TitleWrapper>
-  );
-
-  return (
-    <DrawerPrimitive.Title ref={ref} {...rest} asChild>
-      {hidden ? (
-        <VisuallyHidden.Root>{title}</VisuallyHidden.Root>
-      ) : (
-        <>{title}</>
-      )}
-    </DrawerPrimitive.Title>
-  );
-});
-DrawerTitle.displayName = DrawerPrimitive.Title.displayName;
-
-/** Styled components. */
-const StyledContent = styled(DrawerPrimitive.Content)`
-  z-index: ${depths.menu};
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  min-width: 180px;
-  max-width: 100%;
-  min-height: 44px;
-  max-height: 90vh;
-
-  padding: 6px;
-  border-radius: 6px;
-
-  background: ${s("menuBackground")};
-`;
-
-const TitleWrapper = styled(Flex)`
-  padding: 8px 0;
-`;
-
-export { Drawer, DrawerTrigger, DrawerContent, DrawerTitle };
@@ -1,135 +0,0 @@
-import * as InputSelectPrimitive from "@radix-ui/react-select";
-import React from "react";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import { Props as ButtonProps } from "~/components/Button";
-import Separator from "~/components/ContextMenu/Separator";
-import { fadeAndSlideDown, fadeAndSlideUp } from "~/styles/animations";
-import {
-  SelectItemIndicator,
-  SelectItem as SelectItemWrapper,
-  SelectButton,
-} from "./components/InputSelect";
-
-/** Root InputSelect component - all the other components are rendered inside it. */
-const InputSelectRoot = InputSelectPrimitive.Root;
-
-/** InputSelect's trigger. */
-
-export type TriggerButtonProps = {
-  /** When true, "nude" variant of Button is rendered. */
-  nude?: boolean;
-  /** Optional css class names to pass to the trigger. */
-  className?: string;
-} & Pick<ButtonProps<unknown>, "borderOnHover">;
-
-type InputSelectTriggerProps = { placeholder: string } & TriggerButtonProps &
-  React.ComponentPropsWithoutRef<typeof InputSelectPrimitive.Trigger>;
-
-const InputSelectTrigger = React.forwardRef<
-  React.ElementRef<typeof InputSelectPrimitive.Trigger>,
-  InputSelectTriggerProps
->((props, ref) => {
-  const { placeholder, children, ...buttonProps } = props;
-
-  return (
-    <InputSelectPrimitive.Trigger ref={ref} asChild>
-      <SelectButton neutral disclosure {...buttonProps}>
-        <InputSelectPrimitive.Value placeholder={placeholder} />
-      </SelectButton>
-    </InputSelectPrimitive.Trigger>
-  );
-});
-InputSelectTrigger.displayName = InputSelectPrimitive.Trigger.displayName;
-
-/** InputSelect's content - renders the options in a scrollable element. */
-type ContentProps = Omit<
-  React.ComponentPropsWithoutRef<typeof InputSelectPrimitive.Content>,
-  "position"
->;
-
-const InputSelectContent = React.forwardRef<
-  React.ElementRef<typeof InputSelectPrimitive.Content>,
-  ContentProps
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <InputSelectPrimitive.Portal>
-      <StyledContent ref={ref} position={"popper"} {...rest}>
-        <InputSelectPrimitive.Viewport style={{ overscrollBehavior: "none" }}>
-          {children}
-        </InputSelectPrimitive.Viewport>
-      </StyledContent>
-    </InputSelectPrimitive.Portal>
-  );
-});
-InputSelectContent.displayName = InputSelectPrimitive.Content.displayName;
-
-/** Individual InputSelect option rendered in the menu. */
-const InputSelectItem = React.forwardRef<
-  React.ElementRef<typeof InputSelectPrimitive.Item>,
-  React.ComponentPropsWithoutRef<typeof InputSelectPrimitive.Item>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <InputSelectPrimitive.Item ref={ref} {...rest} asChild>
-      <SelectItemWrapper>
-        <InputSelectPrimitive.ItemText>
-          {children}
-        </InputSelectPrimitive.ItemText>
-        <InputSelectPrimitive.ItemIndicator asChild>
-          <SelectItemIndicator />
-        </InputSelectPrimitive.ItemIndicator>
-      </SelectItemWrapper>
-    </InputSelectPrimitive.Item>
-  );
-});
-InputSelectItem.displayName = InputSelectPrimitive.Item.displayName;
-
-/** Horizontal separator rendered between the options. */
-const InputSelectSeparator = React.forwardRef<
-  React.ElementRef<typeof InputSelectPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof InputSelectPrimitive.Separator>
->((props, ref) => (
-  <InputSelectPrimitive.Separator ref={ref} asChild>
-    <Separator {...props} />
-  </InputSelectPrimitive.Separator>
-));
-InputSelectSeparator.displayName = InputSelectPrimitive.Separator.displayName;
-
-/** Styled components. */
-const StyledContent = styled(InputSelectPrimitive.Content)`
-  z-index: ${depths.menu};
-  min-width: var(--radix-select-trigger-width);
-  max-width: 400px;
-  min-height: 44px;
-  max-height: 350px;
-
-  padding: 4px;
-  border-radius: 6px;
-  background: ${s("menuBackground")};
-  box-shadow: ${s("menuShadow")};
-  transform-origin: 50% 0;
-
-  &[data-side="bottom"] {
-    animation: ${fadeAndSlideDown} 200ms ease;
-  }
-
-  &[data-side="top"] {
-    animation: ${fadeAndSlideUp} 200ms ease;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-export {
-  InputSelectRoot,
-  InputSelectTrigger,
-  InputSelectContent,
-  InputSelectItem,
-  InputSelectSeparator,
-};
@@ -1,136 +0,0 @@
-/**
- * Reusable components for InputSelect abstraction.
- */
-
-import { CheckmarkIcon } from "outline-icons";
-import React from "react";
-import styled, { css } from "styled-components";
-import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
-import Button, { Inner } from "~/components/Button";
-import Flex from "~/components/Flex";
-
-export const SelectItem = React.forwardRef<
-  HTMLDivElement,
-  React.ComponentPropsWithoutRef<"div">
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <ItemContainer
-      ref={ref}
-      justify="space-between"
-      align="center"
-      gap={8}
-      {...rest}
-    >
-      {children}
-      <IconSpacer />
-    </ItemContainer>
-  );
-});
-SelectItem.displayName = "SelectItem";
-
-export const SelectItemIndicator = React.forwardRef<
-  HTMLSpanElement,
-  React.ComponentPropsWithoutRef<"span">
->((props, ref) => (
-  <IndicatorContainer ref={ref} {...props}>
-    <CheckmarkIcon />
-  </IndicatorContainer>
-));
-SelectItemIndicator.displayName = "SelectItemIndicator";
-
-const IconSpacer = styled.div`
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-`;
-
-export const SelectButton = styled(Button)<{ $nude?: boolean }>`
-  display: block;
-  font-weight: normal;
-  text-transform: none;
-  width: 100%;
-  cursor: var(--pointer);
-
-  &:hover:not(:disabled) {
-    background: ${s("buttonNeutralBackground")};
-  }
-
-  &:focus-visible {
-    outline: none;
-  }
-
-  ${(props) =>
-    props.$nude &&
-    css`
-      border-color: transparent;
-      box-shadow: none;
-    `}
-
-  ${Inner} {
-    line-height: 28px;
-    padding-left: 12px;
-    padding-right: 4px;
-  }
-
-  svg {
-    justify-self: flex-end;
-    margin-left: auto;
-  }
-
-  &[data-placeholder=""] {
-    color: ${s("placeholder")};
-  }
-`;
-
-const ItemContainer = styled(Flex)`
-  position: relative;
-  width: 100%;
-  font-size: 16px;
-  cursor: var(--pointer);
-  color: ${s("textSecondary")};
-  background: none;
-  margin: 0;
-  padding: 12px;
-  border: 0;
-  border-radius: 4px;
-  outline: 0;
-  user-select: none;
-  white-space: nowrap;
-
-  svg {
-    flex-shrink: 0;
-  }
-
-  @media (hover: hover) {
-    &:hover,
-    &:focus {
-      color: ${s("accentText")};
-      background: ${s("accent")};
-
-      svg {
-        color: ${s("accentText")};
-        fill: ${s("accentText")};
-      }
-    }
-  }
-
-  &[data-state="checked"] {
-    ${IconSpacer} {
-      display: none;
-    }
-  }
-
-  ${breakpoint("tablet")`
-    font-size: 14px;
-    padding: 4px;
-    padding-left: 8px;
-  `}
-`;
-
-const IndicatorContainer = styled.span`
-  width: 24px;
-  height: 24px;
-`;
@@ -1,15 +0,0 @@
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-
-export const Overlay = styled.div`
-  position: fixed;
-  inset: 0;
-  background: ${s("backdrop")};
-  z-index: ${depths.overlay};
-  transition: opacity 50ms ease-in-out;
-  opacity: 0;
-
-  &[data-state="open"] {
-    opacity: 1;
-  }
-`;
@@ -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 ? (
@@ -1,6 +1,6 @@
 import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
-import { DocumentIcon, PlusIcon, CollectionIcon } from "outline-icons";
+import { DocumentIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -11,13 +11,8 @@ 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,
-  UserSection,
-  CollectionsSection,
-} from "~/actions/sections";
+import { DocumentsSection, UserSection } from "~/actions/sections";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
@@ -45,7 +40,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
  const [loaded, setLoaded] = React.useState(false);
  const [items, setItems] = React.useState<MentionItem[]>([]);
  const { t } = useTranslation();
-  const { auth, documents, users, collections } = useStores();
+  const { auth, documents, users } = useStores();
  const actorId = auth.currentUserId;
  const location = useLocation();
  const documentId = parseDocumentSlug(location.pathname);
@@ -54,11 +49,9 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
  const { loading, request } = useRequest(
    React.useCallback(async () => {
      const res = await client.post("/suggestions.mention", { query: search });
-
      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 +62,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 +106,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: {
@@ -133,34 +119,6 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
                } as MentionItem)
            )
        )
-        .concat(
-          collections
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map(
-              (collection) =>
-                ({
-                  name: "mention",
-                  icon: collection.icon ? (
-                    <Icon
-                      value={collection.icon}
-                      color={collection.color ?? undefined}
-                    />
-                  ) : (
-                    <CollectionIcon />
-                  ),
-                  title: collection.name,
-                  section: CollectionsSection,
-                  appendSpace: true,
-                  attrs: {
-                    id: v4(),
-                    type: MentionType.Collection,
-                    modelId: collection.id,
-                    actorId,
-                    label: collection.name,
-                  },
-                } as MentionItem)
-            )
-        )
        .concat([
          {
            name: "link",
@@ -188,10 +146,7 @@ function MentionMenu({ search, isActive, ...rest }: Props) {

  const handleSelect = React.useCallback(
    async (item: MentionItem) => {
-      if (
-        item.attrs.type === MentionType.Document ||
-        item.attrs.type === MentionType.Collection
-      ) {
+      if (item.attrs.type === MentionType.Document) {
        return;
      }
      if (!documentId) {
@@ -1,16 +1,7 @@
-import { observer } from "mobx-react";
-import { EmailIcon, LinkIcon } from "outline-icons";
+import { LinkIcon } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { v4 } from "uuid";
 import { EmbedDescriptor } from "@shared/editor/embeds";
-import { MenuItem } from "@shared/editor/types";
-import { MentionType } from "@shared/types";
-import { isUrl } from "@shared/utils/urls";
-import Integration from "~/models/Integration";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import useStores from "~/hooks/useStores";
-import { determineMentionType, isURLMentionable } from "~/utils/mention";
 import SuggestionsMenu, {
  Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
@@ -24,65 +15,34 @@ type Props = Omit<
  embeds: EmbedDescriptor[];
 };

-export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
+const PasteMenu = ({ embeds, ...props }: Props) => {
  const { t } = useTranslation();
-  const { integrations } = useStores();
-  const user = useCurrentUser({ rejectOnEmpty: false });
-
-  let mentionType: MentionType | undefined;
-
-  if (pastedText && isUrl(pastedText)) {
-    const url = new URL(pastedText);
-    const integration = integrations.find((intg: Integration) =>
-      isURLMentionable({ url, integration: intg })
-    );
-
-    mentionType = integration
-      ? determineMentionType({ url, integration })
-      : undefined;
-  }

  const embed = React.useMemo(() => {
    for (const e of embeds) {
-      const matches = e.matcher(pastedText);
+      const matches = e.matcher(props.pastedText);
      if (matches) {
        return e;
      }
    }
    return;
-  }, [embeds, pastedText]);
+  }, [embeds, props.pastedText]);

  const items = React.useMemo(
-    () =>
-      [
-        {
-          name: "noop",
-          title: t("Keep as link"),
-          icon: <LinkIcon />,
-        },
-        {
-          name: "mention",
-          title: t("Mention"),
-          icon: <EmailIcon />,
-          visible: !!mentionType,
-          attrs: {
-            id: v4(),
-            type: mentionType,
-            label: pastedText,
-            href: pastedText,
-            modelId: v4(),
-            actorId: user?.id,
-          },
-          appendSpace: true,
-        },
-        {
-          name: "embed",
-          title: t("Embed"),
-          icon: embed?.icon,
-          keywords: embed?.keywords,
-        },
-      ] satisfies MenuItem[],
-    [t, embed, mentionType, pastedText, user]
+    () => [
+      {
+        name: "noop",
+        title: t("Keep as link"),
+        icon: <LinkIcon />,
+      },
+      {
+        name: "embed",
+        title: t("Embed"),
+        icon: embed?.icon,
+        keywords: embed?.keywords,
+      },
+    ],
+    [embed, t]
  );

  return (
@@ -92,7 +52,9 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
      filterable={false}
      renderMenuItem={(item, _index, options) => (
        <SuggestionsMenuItem
-          onClick={options.onClick}
+          onClick={() => {
+            props.onSelect?.(item);
+          }}
          selected={options.selected}
          title={item.title}
          icon={item.icon}
@@ -101,4 +63,6 @@ export const PasteMenu = observer(({ pastedText, embeds, ...props }: Props) => {
      items={items}
    />
  );
-});
+};
+
+export default PasteMenu;
@@ -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;
@@ -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;
@@ -1,4 +1,3 @@
-import { transparentize } from "polished";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
@@ -69,16 +68,12 @@ function SuggestionsMenuItem({

 const Subtitle = styled.span<{ $active?: boolean }>`
  color: ${(props) =>
-    props.$active
-      ? transparentize(0.35, props.theme.accentText)
-      : props.theme.textTertiary};
+    props.$active ? props.theme.white50 : props.theme.textTertiary};
 `;

 const Shortcut = styled.span<{ $active?: boolean }>`
  color: ${(props) =>
-    props.$active
-      ? transparentize(0.35, props.theme.accentText)
-      : props.theme.textTertiary};
+    props.$active ? props.theme.white50 : props.theme.textTertiary};
  flex-grow: 1;
  text-align: right;
 `;
@@ -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, {
@@ -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;
      })}
    />
  );
@@ -10,8 +10,8 @@ import {
 import { Decoration, DecorationSet } from "prosemirror-view";
 import * as React from "react";
 import { v4 } from "uuid";
+import { LANGUAGES } from "@shared/editor/extensions/Prism";
 import Extension, { WidgetProps } from "@shared/editor/lib/Extension";
-import { codeLanguages } from "@shared/editor/lib/code";
 import isMarkdown from "@shared/editor/lib/isMarkdown";
 import normalizePastedMarkdown from "@shared/editor/lib/markdown/normalize";
 import { isRemoteTransaction } from "@shared/editor/lib/multiplayer";
@@ -20,11 +20,10 @@ import { isInCode } from "@shared/editor/queries/isInCode";
 import { MenuItem } from "@shared/editor/types";
 import { IconType, MentionType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
-import parseCollectionSlug from "@shared/utils/parseCollectionSlug";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import { isCollectionUrl, isDocumentUrl, isUrl } from "@shared/utils/urls";
+import { 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 +87,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;
@@ -122,8 +121,6 @@ export default class PasteHandler extends Extension {
                }

                // Is the link a link to a document? If so, we can grab the title and insert it.
-                const containsHash = text.includes("#");
-
                if (isDocumentUrl(text)) {
                  const slug = parseDocumentSlug(text);

@@ -135,7 +132,7 @@ export default class PasteHandler extends Extension {
                          return;
                        }
                        if (document) {
-                          if (state.schema.nodes.mention && !containsHash) {
+                          if (state.schema.nodes.mention) {
                            view.dispatch(
                              view.state.tr.replaceWith(
                                state.selection.from,
@@ -169,51 +166,6 @@ export default class PasteHandler extends Extension {
                        this.insertLink(text);
                      });
                  }
-                } else if (isCollectionUrl(text)) {
-                  const slug = parseCollectionSlug(text);
-
-                  if (slug) {
-                    stores.collections
-                      .fetch(slug)
-                      .then((collection) => {
-                        if (view.isDestroyed) {
-                          return;
-                        }
-                        if (collection) {
-                          if (state.schema.nodes.mention && !containsHash) {
-                            view.dispatch(
-                              view.state.tr.replaceWith(
-                                state.selection.from,
-                                state.selection.to,
-                                state.schema.nodes.mention.create({
-                                  type: MentionType.Collection,
-                                  modelId: collection.id,
-                                  label: collection.name,
-                                  id: v4(),
-                                })
-                              )
-                            );
-                          } else {
-                            const { hash } = new URL(text);
-                            const hasEmoji =
-                              determineIconType(collection.icon) ===
-                              IconType.Emoji;
-
-                            const title = `${
-                              hasEmoji ? collection.icon + " " : ""
-                            }${collection.name}`;
-
-                            this.insertLink(`${collection.path}${hash}`, title);
-                          }
-                        }
-                      })
-                      .catch(() => {
-                        if (view.isDestroyed) {
-                          return;
-                        }
-                        this.insertLink(text);
-                      });
-                  }
                } else {
                  this.insertLink(text);
                }
@@ -228,7 +180,7 @@ export default class PasteHandler extends Extension {
                    state.tr
                      .replaceSelectionWith(
                        state.schema.nodes.code_block.create({
-                          language: Object.keys(codeLanguages).includes(
+                          language: Object.keys(LANGUAGES).includes(
                            vscodeMeta.mode
                          )
                            ? vscodeMeta.mode
@@ -415,21 +367,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 +402,6 @@ export default class PasteHandler extends Extension {
        this.insertEmbed();
        break;
      }
-      case "mention": {
-        this.hidePasteMenu();
-        this.insertMention();
-        break;
-      }
      default:
        break;
    }
@@ -23,7 +23,7 @@ export default class Suggestion extends Extension {
        this.options.trigger
      )}(${`[\\p{L}\/\\p{M}\\d${
        this.options.allowSpaces ? "\\s{1}" : ""
-      }\\.\\-–_]+`})${this.options.requireSearchTerm ? "" : "?"}$`,
+      }\\.]+`})${this.options.requireSearchTerm ? "" : "?"}$`,
      "u"
    );
  }
@@ -843,7 +843,7 @@ const EditorContainer = styled(Styles)<{
  ${(props) =>
    props.userId &&
    css`
-      .mention[data-id="${props.userId}"] {
+      .mention[data-id=${props.userId}] {
        color: ${props.theme.textHighlightForeground};
        background: ${props.theme.textHighlight};

@@ -2,11 +2,8 @@ import { CopyIcon, ExpandedIcon } from "outline-icons";
 import { Node as ProseMirrorNode } from "prosemirror-model";
 import { EditorState } from "prosemirror-state";
 import * as React from "react";
-import {
-  getFrequentCodeLanguages,
-  codeLanguages,
-  getLabelForLanguage,
-} from "@shared/editor/lib/code";
+import { LANGUAGES } from "@shared/editor/extensions/Prism";
+import { getFrequentCodeLanguages } from "@shared/editor/lib/code";
 import { MenuItem } from "@shared/editor/types";
 import { Dictionary } from "~/hooks/useDictionary";

@@ -17,19 +14,20 @@ export default function codeMenuItems(
 ): MenuItem[] {
  const node = state.selection.$from.node();

+  const allLanguages = Object.entries(LANGUAGES) as [
+    keyof typeof LANGUAGES,
+    string
+  ][];
  const frequentLanguages = getFrequentCodeLanguages();

  const frequentLangMenuItems = frequentLanguages.map((value) => {
-    const label = codeLanguages[value]?.label;
+    const label = LANGUAGES[value];
    return langToMenuItem({ node, value, label });
  });

-  const remainingLangMenuItems = Object.entries(codeLanguages)
-    .filter(
-      ([value]) =>
-        !frequentLanguages.includes(value as keyof typeof codeLanguages)
-    )
-    .map(([value, item]) => langToMenuItem({ node, value, label: item.label }));
+  const remainingLangMenuItems = allLanguages
+    .filter(([value]) => !frequentLanguages.includes(value))
+    .map(([value, label]) => langToMenuItem({ node, value, label }));

  const languageMenuItems = frequentLangMenuItems.length
    ? [
@@ -54,7 +52,8 @@ export default function codeMenuItems(
      visible: !readOnly,
      name: "code_block",
      icon: <ExpandedIcon />,
-      label: getLabelForLanguage(node.attrs.language ?? "none"),
+      // @ts-expect-error We have a fallback for incorrect mapping
+      label: LANGUAGES[node.attrs.language ?? "none"],
      children: languageMenuItems,
    },
  ];
@@ -1,11 +1,6 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";

-/**
- * Hook that provides a dictionary of translated UI strings.
- *
- * @returns An object containing all translated UI strings used throughout the application
- */
 export default function useDictionary() {
  const { t } = useTranslation();

@@ -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, []);
+}
@@ -1,83 +0,0 @@
-import { format as formatDate } from "date-fns";
-import * as React from "react";
-import { dateLocale, dateToRelative, locales } from "@shared/utils/date";
-import useUserLocale from "~/hooks/useUserLocale";
-
-let callbacks: (() => void)[] = [];
-
-// This is a shared timer that fires every minute, used for
-// updating all Time components across the page all at once.
-setInterval(() => {
-  callbacks.forEach((cb) => cb());
-}, 1000 * 60);
-
-function eachMinute(fn: () => void) {
-  callbacks.push(fn);
-
-  return () => {
-    callbacks = callbacks.filter((cb) => cb !== fn);
-  };
-}
-
-export type Props = {
-  dateTime: string;
-  addSuffix?: boolean;
-  shorten?: boolean;
-  relative?: boolean;
-  format?: Partial<Record<keyof typeof locales, string>>;
-};
-
-export const useLocaleTime = ({
-  addSuffix,
-  dateTime,
-  shorten,
-  format,
-  relative,
-}: Props) => {
-  const userLocale = useUserLocale();
-  const dateFormatLong: Record<string, string> = {
-    en_US: "MMMM do, yyyy h:mm a",
-    fr_FR: "'Le 'd MMMM yyyy 'à' H:mm",
-  };
-  const formatLocaleLong =
-    (userLocale ? dateFormatLong[userLocale] : undefined) ??
-    "MMMM do, yyyy h:mm a";
-  // @ts-expect-error fallback to formatLocaleLong
-  const formatLocale = format?.[userLocale] ?? formatLocaleLong;
-  const [_, setMinutesMounted] = React.useState(0); // eslint-disable-line @typescript-eslint/no-unused-vars
-  const callback = React.useRef<() => void>();
-
-  React.useEffect(() => {
-    callback.current = eachMinute(() => {
-      setMinutesMounted((state) => ++state);
-    });
-    return () => {
-      if (callback.current) {
-        callback.current?.();
-      }
-    };
-  }, []);
-
-  const date = new Date(Date.parse(dateTime));
-  const locale = dateLocale(userLocale);
-  const relativeContent = dateToRelative(date, {
-    addSuffix,
-    locale,
-    shorten,
-  });
-
-  const tooltipContent = formatDate(date, formatLocaleLong, {
-    locale,
-  });
-  const content =
-    relative !== false
-      ? relativeContent
-      : formatDate(date, formatLocale, {
-          locale,
-        });
-
-  return {
-    content,
-    tooltipContent,
-  };
-};
@@ -1,15 +1,6 @@
 import * as React from "react";
 import useWindowSize from "./useWindowSize";

-/**
- * Hook to calculate the maximum height for an element based on its position and viewport size.
- *
- * @param options Configuration options
- * @param options.elementRef A ref pointing to the element to calculate max height for
- * @param options.maxViewportPercentage The maximum height of the element as a percentage of the viewport
- * @param options.margin The margin to apply to the positioning
- * @returns Object containing the calculated maxHeight and a function to recalculate it
- */
 const useMaxHeight = ({
  elementRef,
  maxViewportPercentage = 90,
@@ -1,11 +1,5 @@
 import { useState, useEffect } from "react";

-/**
- * Hook to check if a media query matches the current viewport.
- *
- * @param query The CSS media query to check against
- * @returns boolean indicating whether the media query matches
- */
 export default function useMediaQuery(query: string): boolean {
  const [matches, setMatches] = useState<boolean>(false);

@@ -1,11 +1,6 @@
 import { breakpoints } from "@shared/styles";
 import useMediaQuery from "~/hooks/useMediaQuery";

-/**
- * Hook to detect if the current viewport is mobile-sized.
- *
- * @returns boolean indicating whether the current viewport is mobile-sized
- */
 export default function useMobile(): boolean {
  return useMediaQuery(`(max-width: ${breakpoints.tablet - 1}px)`);
 }
@@ -18,7 +18,6 @@ export default function usePolicy(entity?: string | Model | null) {
      ? entity
      : entity.id
    : "";
-  const policy = policies.get(entityId);

  React.useEffect(() => {
    if (
@@ -29,11 +28,11 @@ export default function usePolicy(entity?: string | Model | null) {
    ) {
      // The policy for this model is missing and we have an authenticated session, attempt to
      // reload relationships for this model.
-      if (!policy && user) {
+      if (!policies.get(entity.id) && user) {
        void entity.loadRelations();
      }
    }
-  }, [policies, policy, user, entity]);
+  }, [policies, user, entity]);

  return policies.abilities(entityId);
 }
@@ -1,11 +1,6 @@
 import React from "react";
 import { useLocation } from "react-router-dom";

-/**
- * Hook to access URL query parameters from the current location.
- *
- * @returns URLSearchParams object containing the current URL query parameters
- */
 export default function useQuery() {
  const location = useLocation();

@@ -24,14 +24,6 @@ export default function useQueryNotices() {
        );
        break;
      }
-      case QueryNotices.UnsubscribeCollection: {
-        toast.success(
-          t("Unsubscribed from collection", {
-            type: "success",
-          })
-        );
-        break;
-      }
      default:
    }
  }, [t, notice]);
@@ -8,6 +8,7 @@ import {
  GlobeIcon,
  TeamIcon,
  BeakerIcon,
+  BuildingBlocksIcon,
  SettingsIcon,
  ExportIcon,
  ImportIcon,
@@ -39,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"));
@@ -175,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"),
@@ -2,11 +2,6 @@ import { MobXProviderContext } from "mobx-react";
 import * as React from "react";
 import RootStore from "~/stores";

-/**
- * Hook to access the MobX stores from the React context.
- *
- * @returns The root store containing all application stores
- */
 export default function useStores() {
  return React.useContext(MobXProviderContext) as typeof RootStore;
 }
@@ -1,10 +1,5 @@
 import * as React from "react";

-/**
- * Hook that executes a callback when the component unmounts.
- *
- * @param callback Function to be called on component unmount
- */
 const useUnmount = (callback: (...args: Array<any>) => any) => {
  const ref = React.useRef(callback);
  ref.current = callback;
@@ -1,11 +1,5 @@
 import { useLayoutEffect, useState } from "react";

-/**
- * Hook to get the current viewport height, accounting for mobile virtual keyboards.
- * Uses the VisualViewport API when available, falling back to window.innerHeight.
- *
- * @returns The current viewport height in pixels
- */
 export default function useViewportHeight(): number | void {
  // https://developer.mozilla.org/en-US/docs/Web/API/VisualViewport#browser_compatibility
  // Note: No support in Firefox at time of writing, however this mainly exists
@@ -13,13 +13,6 @@ const defaultOptions = {
  throttle: 100,
 };

-/**
- * Hook to track the window's scroll position.
- *
- * @param options Configuration options
- * @param options.throttle Time in milliseconds to throttle the scroll event
- * @returns Object containing the current scroll position (x, y coordinates)
- */
 export default function useWindowScrollPosition(options: {
  throttle: number;
 }): {
@@ -1,62 +0,0 @@
-import { observer } from "mobx-react";
-import { CrossIcon, TrashIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation } from "react-i18next";
-import { useMenuState } from "reakit/Menu";
-import Import from "~/models/Import";
-import ContextMenu from "~/components/ContextMenu";
-import OverflowMenuButton from "~/components/ContextMenu/OverflowMenuButton";
-import Template from "~/components/ContextMenu/Template";
-import usePolicy from "~/hooks/usePolicy";
-import { MenuItem } from "~/types";
-
-type Props = {
-  /** Import to which actions will be applied. */
-  importModel: Import;
-  /** Callback to handle import cancellation. */
-  onCancel: () => Promise<void>;
-  /** Callback to handle import deletion. */
-  onDelete: () => Promise<void>;
-};
-
-export const ImportMenu = observer(
-  ({ importModel, onCancel, onDelete }: Props) => {
-    const { t } = useTranslation();
-    const can = usePolicy(importModel);
-    const menu = useMenuState({
-      modal: true,
-    });
-
-    const items = React.useMemo(
-      () =>
-        [
-          {
-            type: "button",
-            title: t("Cancel"),
-            visible: can.cancel,
-            icon: <CrossIcon />,
-            dangerous: true,
-            onClick: onCancel,
-          },
-          {
-            type: "button",
-            title: t("Delete"),
-            visible: can.delete,
-            icon: <TrashIcon />,
-            dangerous: true,
-            onClick: onDelete,
-          },
-        ] satisfies MenuItem[],
-      [t, can.delete, can.cancel, onCancel, onDelete]
-    );
-
-    return (
-      <>
-        <OverflowMenuButton aria-label={t("Show menu")} {...menu} />
-        <ContextMenu {...menu} aria-label={t("Import menu options")}>
-          <Template {...menu} items={items} />
-        </ContextMenu>
-      </>
-    );
-  }
-);
@@ -92,11 +92,6 @@ export default class Collection extends ParanoidModel {
  @observable
  archivedBy?: User;

-  @computed
-  get searchContent(): string {
-    return this.name;
-  }
-
  /** Returns whether the collection is empty, or undefined if not loaded. */
  @computed
  get isEmpty(): boolean | undefined {
@@ -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";
@@ -189,10 +188,9 @@ export default class Document extends ArchivableModel implements Searchable {
  @observable
  collaboratorIds: string[];

-  @Relation(() => User)
+  @observable
  createdBy: User | undefined;

-  @Relation(() => User)
  @observable
  updatedBy: User | undefined;

@@ -601,7 +599,7 @@ export default class Document extends ArchivableModel implements Searchable {
   */
  getSummary = (blocks = 4) => ({
    ...this.data,
-    content: this.data.content?.slice(0, blocks),
+    content: this.data.content.slice(0, blocks),
  });

  @computed
@@ -664,24 +662,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`,
@@ -7,7 +7,6 @@ import {
 import { bytesToHumanReadable } from "@shared/utils/files";
 import User from "./User";
 import Model from "./base/Model";
-import Relation from "./decorators/Relation";

 class FileOperation extends Model {
  static modelName = "FileOperation";
@@ -28,7 +27,6 @@ class FileOperation extends Model {

  format: FileOperationFormat;

-  @Relation(() => User)
  user: User;

  @computed
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	036b584184	fix: Members table always fades in	2025-03-01 11:14:03 -05:00
Tom Moor	575f1da115	PeopleTable -> MemberTable	2025-03-01 10:53:25 -05:00