fix: notifications.pixel requests hang

tests

.env.sample

@@ -147,6 +147,10 @@ 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

.github/workflows/ci.yml

@@ -59,8 +59,30 @@ jobs:
     - run: yarn install --frozen-lockfile
     - run: yarn tsc
 
+  changes:
+    runs-on: ubuntu-latest
+    outputs:
+      server: ${{ steps.filter.outputs.server }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dorny/paths-filter@v2
+        id: filter
+        with:
+          filters: |
+            server:
+              - 'server/**'
+              - 'shared/**'
+              - 'package.json'
+              - 'yarn.lock'
+            app:
+              - 'app/**'
+              - 'shared/**'
+              - 'package.json'
+              - 'yarn.lock'
+
   test:
     needs: build
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     strategy:
       matrix:
@@ -75,7 +97,8 @@ jobs:
     - run: yarn test:${{ matrix.test-group }}
 
   test-server:
-    needs: build
+    needs: [build, changes]
+    if: ${{ needs.changes.outputs.server == 'true' }}
     runs-on: ubuntu-latest
     services:
       postgres:
@@ -121,6 +144,7 @@ jobs:
 
   bundle-size:
     needs: [build, types]
+    if: ${{ needs.changes.outputs.app == 'true' }}
     runs-on: ubuntu-latest
     steps:
     - uses: actions/checkout@v4
@@ -133,4 +157,7 @@ jobs:
       run: echo "NODE_ENV=production" >> $GITHUB_ENV
     - run: yarn vite:build
     - name: Send bundle stats to RelativeCI
-      run: npx relative-ci-agent
+      uses: relative-ci/agent-action@v2
+      with:
+        key: ${{ secrets.RELATIVE_CI_KEY }}
+        token: ${{ secrets.GITHUB_TOKEN }}

app/actions/definitions/collections.tsx

@@ -15,7 +15,6 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import stores from "~/stores";
 import Collection from "~/models/Collection";
 import { CollectionEdit } from "~/components/Collection/CollectionEdit";
 import { CollectionNew } from "~/components/Collection/CollectionNew";
@@ -62,7 +61,7 @@ export const createCollection = createAction({
   keywords: "create",
   visible: ({ stores }) =>
     stores.policies.abilities(stores.auth.team?.id || "").createCollection,
-  perform: ({ t, event }) => {
+  perform: ({ t, event, stores }) => {
     event?.preventDefault();
     event?.stopPropagation();
     stores.dialogs.openModal({
@@ -78,10 +77,10 @@ export const editCollection = createAction({
   analyticsName: "Edit collection",
   section: ActiveCollectionSection,
   icon: <EditIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -104,10 +103,10 @@ export const editCollectionPermissions = createAction({
   analyticsName: "Collection permissions",
   section: ActiveCollectionSection,
   icon: <PadlockIcon />,
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!activeCollectionId &&
     stores.policies.abilities(activeCollectionId).update,
-  perform: ({ t, activeCollectionId }) => {
+  perform: ({ t, activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -135,7 +134,7 @@ export const searchInCollection = createAction({
   analyticsName: "Search collection",
   section: ActiveCollectionSection,
   icon: <SearchIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -150,7 +149,7 @@ export const searchInCollection = createAction({
   },
 
   perform: ({ activeCollectionId }) => {
-    history.push(searchPath(undefined, { collectionId: activeCollectionId }));
+    history.push(searchPath({ collectionId: activeCollectionId }));
   },
 });
 
@@ -160,7 +159,7 @@ export const starCollection = createAction({
   section: ActiveCollectionSection,
   icon: <StarredIcon />,
   keywords: "favorite bookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -170,7 +169,7 @@ export const starCollection = createAction({
       stores.policies.abilities(activeCollectionId).star
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -187,7 +186,7 @@ export const unstarCollection = createAction({
   section: ActiveCollectionSection,
   icon: <UnstarredIcon />,
   keywords: "unfavorite unbookmark",
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
@@ -197,7 +196,7 @@ export const unstarCollection = createAction({
       stores.policies.abilities(activeCollectionId).unstar
     );
   },
-  perform: async ({ activeCollectionId }) => {
+  perform: async ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -339,13 +338,13 @@ export const deleteCollection = createAction({
   section: ActiveCollectionSection,
   dangerous: true,
   icon: <TrashIcon />,
-  visible: ({ activeCollectionId }) => {
+  visible: ({ activeCollectionId, stores }) => {
     if (!activeCollectionId) {
       return false;
     }
     return stores.policies.abilities(activeCollectionId).delete;
   },
-  perform: ({ activeCollectionId, t }) => {
+  perform: ({ activeCollectionId, t, stores }) => {
     if (!activeCollectionId) {
       return;
     }
@@ -373,7 +372,7 @@ export const createTemplate = createAction({
   section: ActiveCollectionSection,
   icon: <ShapesIcon />,
   keywords: "new create template",
-  visible: ({ activeCollectionId }) =>
+  visible: ({ activeCollectionId, stores }) =>
     !!(
       !!activeCollectionId &&
       stores.policies.abilities(activeCollectionId).createDocument

app/actions/definitions/documents.tsx

@@ -683,6 +683,7 @@ export const searchInDocument = createAction({
   name: ({ t }) => t("Search in document"),
   analyticsName: "Search document",
   section: ActiveDocumentSection,
+  shortcut: [`Meta+/`],
   icon: <SearchIcon />,
   visible: ({ stores, activeDocumentId }) => {
     if (!activeDocumentId) {
@@ -692,7 +693,7 @@ export const searchInDocument = createAction({
     return !!document?.isActive;
   },
   perform: ({ activeDocumentId }) => {
-    history.push(searchPath(undefined, { documentId: activeDocumentId }));
+    history.push(searchPath({ documentId: activeDocumentId }));
   },
 });
 
@@ -805,15 +806,15 @@ export const openRandomDocument = createAction({
   },
 });
 
-export const searchDocumentsForQuery = (searchQuery: string) =>
+export const searchDocumentsForQuery = (query: string) =>
   createAction({
     id: "search",
     name: ({ t }) =>
-      t(`Search documents for "{{searchQuery}}"`, { searchQuery }),
+      t(`Search documents for "{{searchQuery}}"`, { searchQuery: query }),
     analyticsName: "Search documents",
     section: DocumentSection,
     icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery)),
+    perform: () => history.push(searchPath({ query })),
     visible: ({ location }) => location.pathname !== searchPath(),
   });
 
@@ -1210,6 +1211,7 @@ export const rootDocumentActions = [
   unpublishDocument,
   subscribeDocument,
   unsubscribeDocument,
+  searchInDocument,
   duplicateDocument,
   leaveDocument,
   moveTemplateToWorkspace,

app/actions/definitions/navigation.tsx

@@ -50,7 +50,7 @@ export const navigateToRecentSearchQuery = (searchQuery: SearchQuery) =>
     name: searchQuery.query,
     analyticsName: "Navigate to recent search query",
     icon: <SearchIcon />,
-    perform: () => history.push(searchPath(searchQuery.query)),
+    perform: () => history.push(searchPath({ query: searchQuery.query })),
   });
 
 export const navigateToDrafts = createAction({
@@ -62,6 +62,15 @@ 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",

app/actions/sections.ts

@@ -2,6 +2,8 @@ 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}`;

app/components/AuthenticatedLayout.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Switch, Route, useLocation, matchPath } from "react-router-dom";
 import { TeamPreference } from "@shared/types";
-import ErrorSuspended from "~/scenes/ErrorSuspended";
+import ErrorSuspended from "~/scenes/Errors/ErrorSuspended";
 import Layout from "~/components/Layout";
 import RegisterKeyDown from "~/components/RegisterKeyDown";
 import Sidebar from "~/components/Sidebar";

app/components/Button.tsx

@@ -80,6 +80,10 @@ 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;

app/components/Collaborators.tsx

@@ -49,7 +49,7 @@ function Collaborators(props: Props) {
     () =>
       orderBy(
         filter(
-          users.orderedData,
+          users.all,
           (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.orderedData, presentIds]
+    [document.collaboratorIds, users.all, presentIds]
   );
 
   // load any users we don't yet have in memory

app/components/CollectionDescription.tsx

@@ -11,6 +11,7 @@ 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";
@@ -24,6 +25,7 @@ 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(
@@ -65,6 +67,7 @@ function CollectionDescription({ collection }: Props) {
             maxLength={CollectionValidation.maxDescriptionLength}
             canUpdate={can.update}
             readOnly={!can.update}
+            userId={user.id}
             editorStyle={editorStyle}
             embedsDisabled
           />

app/components/CommandBar/CommandBarItem.tsx

@@ -3,6 +3,7 @@ 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";
@@ -70,7 +71,7 @@ function CommandBarItem(
                 ""
               )}
               {sc.split("+").map((key) => (
-                <Key key={key}>{key}</Key>
+                <Key key={key}>{normalizeKeyDisplay(key)}</Key>
               ))}
             </React.Fragment>
           ))}

app/components/ConnectionStatus.tsx

@@ -4,6 +4,12 @@ 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";
@@ -14,21 +20,21 @@ function ConnectionStatus() {
   const { t } = useTranslation();
 
   const codeToMessage = {
-    1009: {
+    [DocumentTooLarge.code]: {
       title: t("Document is too large"),
       body: t(
         "This document has reached the maximum size and can no longer be edited"
       ),
     },
-    4401: {
+    [AuthenticationFailed.code]: {
       title: t("Authentication failed"),
       body: t("Please try logging out and back in again"),
     },
-    4403: {
+    [AuthorizationFailed.code]: {
       title: t("Authorization failed"),
       body: t("You may have lost access to this document, try reloading"),
     },
-    4503: {
+    [TooManyConnections.code]: {
       title: t("Too many users connected to document"),
       body: t("Your edits will sync once other users leave the document"),
     },

app/components/ContextMenu/MenuItem.tsx

@@ -13,6 +13,7 @@ import MenuIconWrapper from "./MenuIconWrapper";
 type Props = {
   id?: string;
   onClick?: (event: React.MouseEvent) => void | Promise<void>;
+  onPointerMove?: (event: React.MouseEvent) => void | Promise<void>;
   active?: boolean;
   selected?: boolean;
   disabled?: boolean;
@@ -31,6 +32,7 @@ type Props = {
 const MenuItem = (
   {
     onClick,
+    onPointerMove,
     children,
     active,
     selected,
@@ -90,6 +92,7 @@ const MenuItem = (
   return (
     <BaseMenuItem
       onClick={disabled ? undefined : onClick}
+      onPointerMove={disabled ? undefined : onPointerMove}
       disabled={disabled}
       hide={hide}
       {...rest}
@@ -158,6 +161,9 @@ 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);
 

app/components/DefaultCollectionInputSelect.tsx

@@ -2,16 +2,11 @@ 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 InputSelect from "~/components/InputSelect";
-import { IconWrapper } from "~/components/Sidebar/components/SidebarLink";
+import { InputSelectNew, Option } from "~/components/InputSelectNew";
 import useStores from "~/hooks/useStores";
 
-type DefaultCollectionInputSelectProps = Optional<
-  React.ComponentProps<typeof InputSelect>
-> & {
+type DefaultCollectionInputSelectProps = {
   onSelectCollection: (collection: string) => void;
   defaultCollectionId: string | null;
 };
@@ -19,7 +14,6 @@ type DefaultCollectionInputSelectProps = Optional<
 const DefaultCollectionInputSelect = ({
   onSelectCollection,
   defaultCollectionId,
-  ...rest
 }: DefaultCollectionInputSelectProps) => {
   const { t } = useTranslation();
   const { collections } = useStores();
@@ -47,36 +41,26 @@ const DefaultCollectionInputSelect = ({
     void fetchData();
   }, [fetchError, t, fetching, collections]);
 
-  const options = React.useMemo(
+  const options: Option[] = React.useMemo(
     () =>
       collections.nonPrivate.reduce(
         (acc, collection) => [
           ...acc,
           {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <CollectionIcon collection={collection} />
-                </IconWrapper>
-                {collection.name}
-              </Flex>
-            ),
+            type: "item",
+            label: collection.name,
             value: collection.id,
+            icon: <CollectionIcon collection={collection} />,
           },
         ],
         [
           {
-            label: (
-              <Flex align="center">
-                <IconWrapper>
-                  <HomeIcon />
-                </IconWrapper>
-                {t("Home")}
-              </Flex>
-            ),
+            type: "item",
+            label: t("Home"),
             value: "home",
+            icon: <HomeIcon />,
           },
-        ]
+        ] satisfies Option[]
       ),
     [collections.nonPrivate, t]
   );
@@ -86,13 +70,14 @@ const DefaultCollectionInputSelect = ({
   }
 
   return (
-    <InputSelect
-      value={defaultCollectionId ?? "home"}
+    <InputSelectNew
       options={options}
+      value={defaultCollectionId ?? "home"}
       onChange={onSelectCollection}
       ariaLabel={t("Default collection")}
+      label={t("Start view")}
+      hideLabel
       short
-      {...rest}
     />
   );
 };

app/components/Dialogs.tsx

@@ -23,7 +23,10 @@ function Dialogs() {
           key={id}
           isOpen={modal.isOpen}
           fullscreen={modal.fullscreen ?? false}
-          onRequestClose={() => dialogs.closeModal(id)}
+          onRequestClose={() => {
+            modal.onClose?.();
+            dialogs.closeModal(id);
+          }}
           title={modal.title}
           style={modal.style}
         >

app/components/DocumentExplorer.tsx

@@ -15,7 +15,7 @@ import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import Icon from "@shared/components/Icon";
-import { NavigationNode } from "@shared/types";
+import { NavigationNode, NavigationNodeType } from "@shared/types";
 import { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
@@ -78,6 +78,10 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const VERTICAL_PADDING = 6;
   const HORIZONTAL_PADDING = 24;
 
+  const recentlyViewedItemIds = documents.recentlyViewed
+    .slice(0, 5)
+    .map((item) => item.id);
+
   const searchIndex = React.useMemo(
     () =>
       new FuzzySearch(items, ["title"], {
@@ -126,11 +130,18 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     return searchTerm
       ? searchIndex.search(searchTerm)
       : items
-          .filter((item) => item.type === "collection")
+          .filter((item) => recentlyViewedItemIds.includes(item.id))
+          .concat(
+            items.filter((item) => item.type === NavigationNodeType.Collection)
+          )
           .flatMap(includeDescendants);
   }
 
   const nodes = getNodes();
+  const baseDepth = nodes.reduce(
+    (min, node) => (node.depth ? Math.min(min, node.depth) : min),
+    Infinity
+  );
 
   const scrollNodeIntoView = React.useCallback(
     (node: number) => {
@@ -304,7 +315,7 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
           expanded={isExpanded(index)}
           icon={renderedIcon}
           title={title}
-          depth={node.depth as number}
+          depth={(node.depth ?? 0) - baseDepth}
           hasChildren={hasChildren(index)}
           ref={itemRefs[index]}
         />

app/components/DocumentExplorerNode.tsx

@@ -41,9 +41,9 @@ function DocumentExplorerNode(
 ) {
   const { t } = useTranslation();
   const OFFSET = 12;
-  const ICON_SIZE = 24;
+  const DISCLOSURE = 20;
 
-  const width = depth ? depth * ICON_SIZE + OFFSET : ICON_SIZE;
+  const width = depth ? depth * DISCLOSURE + OFFSET : DISCLOSURE;
 
   return (
     <Node

app/components/EditableTitle.tsx

@@ -73,15 +73,13 @@ function EditableTitle(
         return;
       }
 
-      if (document) {
-        try {
-          await onSubmit(trimmedValue);
-          setOriginalValue(trimmedValue);
-        } catch (error) {
-          setValue(originalValue);
-          toast.error(error.message);
-          throw error;
-        }
+      try {
+        await onSubmit(trimmedValue);
+        setOriginalValue(trimmedValue);
+      } catch (error) {
+        setValue(originalValue);
+        toast.error(error.message);
+        throw error;
       }
     },
     [originalValue, value, onCancel, onSubmit]
@@ -127,7 +125,10 @@ function EditableTitle(
           />
         </form>
       ) : (
-        <span onDoubleClick={canUpdate ? handleDoubleClick : undefined}>
+        <span
+          onDoubleClick={canUpdate ? handleDoubleClick : undefined}
+          className={rest.className}
+        >
           {value}
         </span>
       )}

app/components/Editor.tsx

@@ -6,7 +6,9 @@ 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";
@@ -183,22 +185,46 @@ 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>
       <>
-        <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 || ""}
-        />
+        {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 || ""}
+          />
+        )}
         {props.editorStyle?.paddingBottom && !props.readOnly && (
           <ClickablePadding
             onClick={props.readOnly ? undefined : focusAtEnd}

app/components/Empty.ts

@@ -1,9 +1,9 @@
 import styled from "styled-components";
-import { s } from "@shared/styles";
+import Text from "~/components/Text";
 
-const Empty = styled.p`
-  color: ${s("textTertiary")};
-  user-select: none;
-`;
+const Empty = styled(Text).attrs({
+  type: "tertiary",
+  selectable: false,
+})``;
 
 export default Empty;

app/components/ErrorBoundary.tsx

@@ -7,6 +7,7 @@ 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";
@@ -77,9 +78,9 @@ class ErrorBoundary extends React.Component<Props> {
             {showTitle && (
               <>
                 <PageTitle title={t("Module failed to load")} />
-                <h1>
+                <Heading>
                   <Trans>Loading Failed</Trans>
-                </h1>
+                </Heading>
               </>
             )}
             <Text as="p" type="secondary">
@@ -101,9 +102,9 @@ class ErrorBoundary extends React.Component<Props> {
           {showTitle && (
             <>
               <PageTitle title={t("Something Unexpected Happened")} />
-              <h1>
+              <Heading>
                 <Trans>Something Unexpected Happened</Trans>
-              </h1>
+              </Heading>
             </>
           )}
           <Text as="p" type="secondary">

app/components/EventListItem.tsx

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

app/components/Fade.ts

@@ -1,8 +0,0 @@
-import styled from "styled-components";
-import { fadeIn } from "~/styles/animations";
-
-const Fade = styled.span<{ timing?: number | string }>`
-  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
-`;
-
-export default Fade;

app/components/Fade.tsx

@@ -0,0 +1,24 @@
+import React from "react";
+import styled from "styled-components";
+import { fadeIn } from "~/styles/animations";
+
+const Fade = styled.span<{ timing?: number | string }>`
+  animation: ${fadeIn} ${(props) => props.timing || "250ms"} ease-in-out;
+`;
+
+type Props = {
+  children?: JSX.Element | null;
+  /** If true, children will be animated. */
+  animate: boolean;
+};
+
+/**
+ * Wraps children in a <Fade> if loading is true on mount.
+ */
+export const ConditionalFade = ({ animate, children }: Props) => {
+  const [isAnimated] = React.useState(animate);
+
+  return isAnimated ? <Fade>{children}</Fade> : <>{children}</>;
+};
+
+export default Fade;

app/components/FilterOptions.tsx

@@ -23,7 +23,6 @@ type Props = {
   options: TFilterOption[];
   selectedKeys: (string | null | undefined)[];
   defaultLabel?: string;
-  selectedPrefix?: string;
   className?: string;
   onSelect: (key: string | null | undefined) => void;
   showFilter?: boolean;
@@ -35,7 +34,6 @@ const FilterOptions = ({
   options,
   selectedKeys = [],
   defaultLabel = "Filter options",
-  selectedPrefix = "",
   className,
   onSelect,
   showFilter,
@@ -54,9 +52,7 @@ const FilterOptions = ({
   const [query, setQuery] = React.useState("");
 
   const selectedLabel = selectedItems.length
-    ? selectedItems
-        .map((selected) => `${selectedPrefix} ${selected.label}`)
-        .join(", ")
+    ? selectedItems.map((selected) => selected.label).join(", ")
     : "";
 
   const renderItem = React.useCallback(
@@ -70,7 +66,7 @@ const FilterOptions = ({
         selected={selectedKeys.includes(option.key)}
         {...menu}
       >
-        {option.icon && <Icon>{option.icon}</Icon>}
+        {option.icon}
         {option.note ? (
           <LabelWithNote>
             {option.label}
@@ -163,10 +159,16 @@ const FilterOptions = ({
   const showFilterInput = showFilter || options.length > 10;
 
   return (
-    <div>
+    <>
       <MenuButton {...menu}>
         {(props) => (
-          <StyledButton {...props} className={className} neutral disclosure>
+          <StyledButton
+            {...props}
+            className={className}
+            icon={selectedItems[0]?.key && selectedItems[0]?.icon}
+            neutral
+            disclosure
+          >
             {selectedItems.length ? selectedLabel : defaultLabel}
           </StyledButton>
         )}
@@ -193,7 +195,7 @@ const FilterOptions = ({
           />
         )}
       </ContextMenu>
-    </div>
+    </>
   );
 };
 
@@ -231,6 +233,7 @@ const SearchInput = styled(Input)`
     border-radius: 0;
     border-bottom: 1px solid ${s("divider")};
     background: ${s("menuBackground")};
+    margin: 0;
   }
 
   ${NativeInput} {
@@ -267,15 +270,9 @@ export const StyledButton = styled(Button)`
   }
 
   ${Inner} {
-    line-height: 24px;
+    line-height: 28px;
     min-height: auto;
   }
 `;
 
-const Icon = styled.div`
-  margin-right: 8px;
-  width: 18px;
-  height: 18px;
-`;
-
 export default FilterOptions;

app/components/Guide.tsx

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

app/components/Input.tsx

@@ -176,6 +176,7 @@ function Input(
     if (ev.key === "Enter" && ev.metaKey) {
       if (props.onRequestSubmit) {
         props.onRequestSubmit(ev);
+        return;
       }
     }
 
@@ -230,10 +231,11 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
-              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               {...rest}
+              // set it after "rest" to override "onKeyDown" from prop.
+              onKeyDown={handleKeyDown}
             />
           ) : (
             <NativeInput
@@ -243,11 +245,12 @@ function Input(
               ])}
               onBlur={handleBlur}
               onFocus={handleFocus}
-              onKeyDown={handleKeyDown}
               hasIcon={!!icon}
               hasPrefix={!!prefix}
               type={type}
               {...rest}
+              // set it after "rest" to override "onKeyDown" from prop.
+              onKeyDown={handleKeyDown}
             />
           )}
           {children}

app/components/InputSearchPage.tsx

@@ -60,7 +60,8 @@ function InputSearchPage({
       if (ev.key === "Enter") {
         ev.preventDefault();
         history.push(
-          searchPath(ev.currentTarget.value, {
+          searchPath({
+            query: ev.currentTarget.value,
             collectionId,
             ref: source,
           })

app/components/InputSelectNew.tsx

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

app/components/List/Item.tsx

@@ -33,6 +33,7 @@ export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   small?: boolean;
   /** Whether to enable keyboard navigation */
   keyboardNavigation?: boolean;
+  ellipsis?: boolean;
 };
 
 const ListItem = (
@@ -45,6 +46,7 @@ const ListItem = (
     border,
     to,
     keyboardNavigation,
+    ellipsis,
     ...rest
   }: Props,
   ref: React.RefObject<HTMLAnchorElement>
@@ -83,7 +85,9 @@ const ListItem = (
         column={!compact}
         $selected={selected}
       >
-        <Heading $small={small}>{title}</Heading>
+        <Heading $small={small} $ellipsis={ellipsis}>
+          {title}
+        </Heading>
         {subtitle && (
           <Subtitle $small={small} $selected={selected}>
             {subtitle}
@@ -105,7 +109,7 @@ const ListItem = (
         $border={border}
         $small={small}
         activeStyle={{
-          background: theme.accent,
+          background: theme.sidebarActiveBackground,
         }}
         {...rest}
         {...rovingTabIndex}
@@ -208,10 +212,10 @@ const Image = styled(Flex)`
   color: ${s("text")};
 `;
 
-const Heading = styled.p<{ $small?: boolean }>`
+const Heading = styled.p<{ $small?: boolean; $ellipsis?: boolean }>`
   font-size: ${(props) => (props.$small ? 14 : 16)}px;
   font-weight: 500;
-  ${ellipsis()}
+  ${(props) => (props.$ellipsis !== false ? ellipsis() : "")}
   line-height: ${(props) => (props.$small ? 1.3 : 1.2)};
   margin: 0;
 `;
@@ -219,14 +223,13 @@ const Heading = styled.p<{ $small?: boolean }>`
 const Content = styled(Flex)<{ $selected: boolean }>`
   flex-direction: column;
   flex-grow: 1;
-  color: ${(props) => (props.$selected ? props.theme.white : props.theme.text)};
+  color: ${s("text")};
 `;
 
 const Subtitle = styled.p<{ $small?: boolean; $selected?: boolean }>`
   margin: 0;
   font-size: ${(props) => (props.$small ? 13 : 14)}px;
-  color: ${(props) =>
-    props.$selected ? props.theme.white50 : props.theme.textTertiary};
+  color: ${s("textTertiary")};
   margin-top: -2px;
 `;
 
@@ -234,8 +237,7 @@ export const Actions = styled(Flex)<{ $selected?: boolean }>`
   align-self: center;
   justify-content: center;
   flex-shrink: 0;
-  color: ${(props) =>
-    props.$selected ? props.theme.white : props.theme.textSecondary};
+  color: ${s("textSecondary")};
 `;
 
 export default React.forwardRef(ListItem);

app/components/LocaleTime.tsx

@@ -1,24 +1,7 @@
-import { format as formatDate } from "date-fns";
 import * as React from "react";
-import { dateLocale, dateToRelative, locales } from "@shared/utils/date";
+import { locales } from "@shared/utils/date";
 import Tooltip from "~/components/Tooltip";
-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);
-  };
-}
+import { useLocaleTime } from "~/hooks/useLocaleTime";
 
 export type Props = {
   children?: React.ReactNode;
@@ -29,59 +12,12 @@ export type Props = {
   format?: Partial<Record<keyof typeof locales, string>>;
 };
 
-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,
-        });
+const LocaleTime: React.FC<Props> = ({ children, ...rest }: Props) => {
+  const { tooltipContent, content } = useLocaleTime(rest);
 
   return (
     <Tooltip content={tooltipContent} placement="bottom">
-      <time dateTime={dateTime}>{children || content}</time>
+      <time dateTime={rest.dateTime}>{children || content}</time>
     </Tooltip>
   );
 };

app/components/Modal.tsx

@@ -147,7 +147,7 @@ const Backdrop = styled(Flex)<{ $fullscreen?: boolean }>`
     props.$fullscreen
       ? transparentize(0.25, props.theme.background)
       : props.theme.modalBackdrop} !important;
-  z-index: ${depths.modalOverlay};
+  z-index: ${depths.overlay};
   transition: opacity 50ms ease-in-out;
   opacity: 0;
 

app/components/Notifications/Notifications.tsx

@@ -48,6 +48,15 @@ function Notifications(
         notifications.approximateUnreadCount
       );
     }
+
+    // PWA badging
+    if ("setAppBadge" in navigator) {
+      if (notifications.approximateUnreadCount) {
+        void navigator.setAppBadge(notifications.approximateUnreadCount);
+      } else {
+        void navigator.clearAppBadge();
+      }
+    }
   }, [notifications.approximateUnreadCount]);
 
   return (

app/components/Sharing/components/Suggestions.tsx

@@ -96,7 +96,7 @@ export const Suggestions = observer(
           ? users.notInDocument(document.id, query)
           : collection
           ? users.notInCollection(collection.id, query)
-          : users.orderedData
+          : users.activeOrInvited
       ).filter((u) => !u.isSuspended && u.id !== user.id);
 
       if (isEmail(query)) {
@@ -114,7 +114,7 @@ export const Suggestions = observer(
     }, [
       getSuggestionForEmail,
       users,
-      users.orderedData,
+      users.activeOrInvited,
       groups,
       groups.orderedData,
       document?.id,

app/components/Sidebar/components/CollectionLink.tsx

@@ -10,6 +10,7 @@ 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";
@@ -21,7 +22,6 @@ 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";

app/components/Sidebar/components/DocumentLink.tsx

@@ -12,6 +12,7 @@ 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";
@@ -28,7 +29,6 @@ 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";

app/components/WebsocketProvider.tsx

@@ -6,7 +6,11 @@ import * as React from "react";
 import { withTranslation, WithTranslation } from "react-i18next";
 import { io, Socket } from "socket.io-client";
 import { toast } from "sonner";
-import { FileOperationState, FileOperationType } from "@shared/types";
+import {
+  FileOperationState,
+  FileOperationType,
+  ImportState,
+} from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import Collection from "~/models/Collection";
 import Comment from "~/models/Comment";
@@ -15,6 +19,7 @@ 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";
@@ -100,6 +105,7 @@ class WebsocketProvider extends React.Component<Props> {
       subscriptions,
       fileOperations,
       notifications,
+      imports,
     } = this.props;
 
     const currentUserId = auth?.user?.id;
@@ -620,6 +626,23 @@ 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">) => {
@@ -645,6 +668,10 @@ 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">) => {

app/components/primitives/Drawer.tsx

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

app/components/primitives/InputSelect.tsx

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

app/components/primitives/components/InputSelect.tsx

@@ -0,0 +1,136 @@
+/**
+ * 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;
+`;

app/components/primitives/components/Overlay.tsx

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

app/editor/components/FindAndReplace.tsx

@@ -24,6 +24,54 @@ import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
 import { useEditor } from "./EditorContext";
 
+type KeyboardShortcutsProps = {
+  popover: ReturnType<typeof usePopoverState>;
+  handleOpen: ({ withReplace }: { withReplace: boolean }) => void;
+  handleCaseSensitive: () => void;
+  handleRegex: () => void;
+};
+
+function useKeyboardShortcuts({
+  popover,
+  handleOpen,
+  handleCaseSensitive,
+  handleRegex,
+}: KeyboardShortcutsProps) {
+  // Open popover
+  useKeyDown(
+    (ev) =>
+      isModKey(ev) &&
+      ev.code === "KeyF" &&
+      // Keyboard handler is through the AppMenu on Desktop v1.2.0+
+      !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
+    (ev) => {
+      ev.preventDefault();
+      handleOpen({ withReplace: ev.altKey });
+    },
+    { allowInInput: true }
+  );
+
+  // Enable/disable case sensitive search
+  useKeyDown(
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && popover.visible,
+    (ev) => {
+      ev.preventDefault();
+      handleCaseSensitive();
+    },
+    { allowInInput: true }
+  );
+
+  // Enable/disable regex search
+  useKeyDown(
+    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && popover.visible,
+    (ev) => {
+      ev.preventDefault();
+      handleRegex();
+    },
+    { allowInInput: true }
+  );
+}
+
 type Props = {
   /** Whether the find and replace popover is open */
   open: boolean;
@@ -89,42 +137,48 @@ export default function FindAndReplace({
     }
   }, [show]);
 
-  useOnClickOutside(popover.unstable_referenceRef, popover.hide);
+  // Callbacks
+  const selectInputText = React.useCallback(() => {
+    inputRef.current?.focus();
+    inputRef.current?.setSelectionRange(0, inputRef.current?.value.length);
+  }, []);
+
+  const selectInputReplaceText = React.useCallback(() => {
+    setTimeout(() => {
+      inputReplaceRef.current?.focus();
+      inputReplaceRef.current?.setSelectionRange(
+        0,
+        inputReplaceRef.current?.value.length
+      );
+    }, 100);
+  }, []);
+
+  const handleOpen = React.useCallback(
+    ({ withReplace }: { withReplace: boolean }) => {
+      const shouldShowReplace = !readOnly && withReplace;
+
+      // If already open, switch focus to corresponding input text.
+      if (popover.visible) {
+        if (shouldShowReplace) {
+          setShowReplace(true);
+          selectInputReplaceText();
+        } else {
+          selectInputText();
+        }
+
+        return;
+      }
 
-  // Keyboard shortcuts
-  useKeyDown(
-    (ev) =>
-      isModKey(ev) &&
-      !popover.visible &&
-      ev.code === "KeyF" &&
-      // Keyboard handler is through the AppMenu on Desktop v1.2.0+
-      !(Desktop.bridge && "onFindInPage" in Desktop.bridge),
-    (ev) => {
-      ev.preventDefault();
       selectionRef.current = window.getSelection()?.toString();
       popover.show();
-    }
-  );
 
-  useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyR" && popover.visible,
-    (ev) => {
-      ev.preventDefault();
-      setRegex((state) => !state);
+      if (shouldShowReplace) {
+        setShowReplace(true);
+      }
     },
-    { allowInInput: true }
+    [popover, readOnly, selectInputText, selectInputReplaceText]
   );
 
-  useKeyDown(
-    (ev) => isModKey(ev) && ev.altKey && ev.code === "KeyC" && popover.visible,
-    (ev) => {
-      ev.preventDefault();
-      setCaseSensitive((state) => !state);
-    },
-    { allowInInput: true }
-  );
-
-  // Callbacks
   const handleMore = React.useCallback(() => {
     setShowReplace((state) => !state);
     setTimeout(() => inputReplaceRef.current?.focus(), 100);
@@ -132,68 +186,65 @@ export default function FindAndReplace({
 
   const handleCaseSensitive = React.useCallback(() => {
     setCaseSensitive((state) => {
-      const caseSensitive = !state;
+      const isCaseSensitive = !state;
 
       editor.commands.find({
         text: searchTerm,
-        caseSensitive,
+        caseSensitive: isCaseSensitive,
         regexEnabled,
       });
 
-      return caseSensitive;
+      return isCaseSensitive;
     });
   }, [regexEnabled, editor.commands, searchTerm]);
 
   const handleRegex = React.useCallback(() => {
     setRegex((state) => {
-      const regexEnabled = !state;
+      const isRegexEnabled = !state;
 
       editor.commands.find({
         text: searchTerm,
         caseSensitive,
-        regexEnabled,
+        regexEnabled: isRegexEnabled,
       });
 
-      return regexEnabled;
+      return isRegexEnabled;
     });
   }, [caseSensitive, editor.commands, searchTerm]);
 
   const handleKeyDown = React.useCallback(
     (ev: React.KeyboardEvent<HTMLInputElement>) => {
-      function nextPrevious(ev: React.KeyboardEvent<HTMLInputElement>) {
+      function nextPrevious() {
         if (ev.shiftKey) {
           editor.commands.prevSearchMatch();
         } else {
           editor.commands.nextSearchMatch();
         }
       }
-      function selectInputText() {
-        inputRef.current?.setSelectionRange(0, inputRef.current?.value.length);
-      }
 
       switch (ev.key) {
         case "Enter": {
           ev.preventDefault();
-          nextPrevious(ev);
+          nextPrevious();
           return;
         }
         case "g": {
           if (ev.metaKey) {
             ev.preventDefault();
-            nextPrevious(ev);
+            nextPrevious();
             selectInputText();
           }
           return;
         }
         case "F3": {
           ev.preventDefault();
-          nextPrevious(ev);
+          nextPrevious();
           selectInputText();
           return;
         }
       }
     },
-    [editor.commands]
+    [editor.commands, selectInputText]
   );
 
   const handleReplace = React.useCallback(
@@ -243,6 +294,15 @@ export default function FindAndReplace({
     [handleReplace]
   );
 
+  useOnClickOutside(popover.unstable_referenceRef, popover.hide);
+
+  useKeyboardShortcuts({
+    popover,
+    handleOpen,
+    handleCaseSensitive,
+    handleRegex,
+  });
+
   const style: React.CSSProperties = React.useMemo(
     () => ({
       position: "fixed",
@@ -285,7 +345,7 @@ export default function FindAndReplace({
     <>
       <Tooltip
         content={t("Previous match")}
-        shortcut="shift+enter"
+        shortcut="Shift+Enter"
         placement="bottom"
       >
         <ButtonLarge
@@ -295,7 +355,7 @@ export default function FindAndReplace({
           <CaretUpIcon />
         </ButtonLarge>
       </Tooltip>
-      <Tooltip content={t("Next match")} shortcut="enter" placement="bottom">
+      <Tooltip content={t("Next match")} shortcut="Enter" placement="bottom">
         <ButtonLarge
           disabled={disabled}
           onClick={() => editor.commands.nextSearchMatch()}
@@ -354,7 +414,11 @@ export default function FindAndReplace({
             </StyledInput>
             {navigation}
             {!readOnly && (
-              <Tooltip content={t("Replace options")} placement="bottom">
+              <Tooltip
+                content={t("Replace options")}
+                shortcut={`${altDisplay}+${metaDisplay}+f`}
+                placement="bottom"
+              >
                 <ButtonLarge onClick={handleMore}>
                   <ReplaceIcon color={theme.textSecondary} />
                 </ButtonLarge>
@@ -376,12 +440,28 @@ export default function FindAndReplace({
                   onRequestSubmit={handleReplaceAll}
                   onChange={(ev) => setReplaceTerm(ev.currentTarget.value)}
                 />
-                <Button onClick={handleReplace} disabled={disabled} neutral>
-                  {t("Replace")}
-                </Button>
-                <Button onClick={handleReplaceAll} disabled={disabled} neutral>
-                  {t("Replace all")}
-                </Button>
+                <Tooltip
+                  content={t("Replace")}
+                  shortcut="Enter"
+                  placement="bottom"
+                >
+                  <Button onClick={handleReplace} disabled={disabled} neutral>
+                    {t("Replace")}
+                  </Button>
+                </Tooltip>
+                <Tooltip
+                  content={t("Replace all")}
+                  shortcut={`${metaDisplay}+Enter`}
+                  placement="bottom"
+                >
+                  <Button
+                    onClick={handleReplaceAll}
+                    disabled={disabled}
+                    neutral
+                  >
+                    {t("Replace all")}
+                  </Button>
+                </Tooltip>
               </Flex>
             )}
           </ResizingHeightContainer>

app/editor/components/FloatingToolbar.tsx

@@ -6,7 +6,6 @@ import styled, { css } from "styled-components";
 import { isCode } from "@shared/editor/lib/isCode";
 import { findParentNode } from "@shared/editor/queries/findParentNode";
 import { EditorStyleHelper } from "@shared/editor/styles/EditorStyleHelper";
-import { useComponentSize } from "@shared/hooks/useComponentSize";
 import { depths, s } from "@shared/styles";
 import { HEADER_HEIGHT } from "~/components/Header";
 import { Portal } from "~/components/Portal";
@@ -41,7 +40,8 @@ function usePosition({
 }) {
   const { view } = useEditor();
   const { selection } = view.state;
-  const { width: menuWidth, height: menuHeight } = useComponentSize(menuRef);
+  const menuWidth = menuRef.current?.offsetWidth;
+  const menuHeight = menuRef.current?.offsetHeight;
 
   if (!active || !menuWidth || !menuHeight || !menuRef.current) {
     return defaultPosition;
@@ -78,13 +78,24 @@ function usePosition({
 
   // position at the top right of code blocks
   const codeBlock = findParentNode(isCode)(view.state.selection);
+  const noticeBlock = findParentNode(
+    (node) => node.type.name === "container_notice"
+  )(view.state.selection);
 
-  if (codeBlock && view.state.selection.empty) {
-    const element = view.nodeDOM(codeBlock.pos);
-    const bounds = (element as HTMLElement).getBoundingClientRect();
-    selectionBounds.top = bounds.top;
-    selectionBounds.left = bounds.right - menuWidth;
-    selectionBounds.right = bounds.right;
+  if ((codeBlock || noticeBlock) && view.state.selection.empty) {
+    const position = codeBlock
+      ? codeBlock.pos
+      : noticeBlock
+      ? noticeBlock.pos
+      : null;
+
+    if (position !== null) {
+      const element = view.nodeDOM(position);
+      const bounds = (element as HTMLElement).getBoundingClientRect();
+      selectionBounds.top = bounds.top;
+      selectionBounds.left = bounds.right - menuWidth;
+      selectionBounds.right = bounds.right;
+    }
   }
 
   // tables are an oddity, and need their own positioning logic
@@ -188,7 +199,8 @@ function usePosition({
     top: Math.round(top - offsetParent.top),
     offset: Math.round(offset),
     maxWidth: Math.min(window.innerWidth, offsetParent.width) - margin * 2,
-    blockSelection: codeBlock || isColSelection || isRowSelection,
+    blockSelection:
+      codeBlock || isColSelection || isRowSelection || noticeBlock,
     visible: true,
   };
 }

app/editor/components/Input.tsx

@@ -1,3 +1,4 @@
+import { transparentize } from "polished";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 
@@ -13,6 +14,10 @@ const Input = styled.input`
   flex-grow: 1;
   min-width: 0;
 
+  &::placeholder {
+    color: ${(props) => transparentize(0.5, props.theme.text)};
+  }
+
   @media (hover: none) and (pointer: coarse) {
     font-size: 16px;
   }

app/editor/components/LinkEditor.tsx

@@ -1,15 +1,24 @@
-import { ArrowIcon, CloseIcon, OpenIcon } from "outline-icons";
+import { observer } from "mobx-react";
+import { ArrowIcon, CloseIcon, DocumentIcon, OpenIcon } from "outline-icons";
 import { Mark } from "prosemirror-model";
 import { Selection } from "prosemirror-state";
 import { EditorView } from "prosemirror-view";
 import * as React from "react";
+import { useEffect, useRef, useState } from "react";
 import { toast } from "sonner";
 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 Flex from "~/components/Flex";
+import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
+import Scrollable from "~/components/Scrollable";
 import { Dictionary } from "~/hooks/useDictionary";
-import Logger from "~/utils/Logger";
+import useRequest from "~/hooks/useRequest";
+import useStores from "~/hooks/useStores";
+import { client } from "~/utils/ApiClient";
 import Input from "./Input";
+import SuggestionsMenuItem from "./SuggestionsMenuItem";
 import ToolbarButton from "./ToolbarButton";
 import Tooltip from "./Tooltip";
 
@@ -32,152 +41,87 @@ type Props = {
   view: EditorView;
 };
 
-type State = {
-  value: string;
-  previousValue: string;
-};
+const LinkEditor: React.FC<Props> = ({
+  mark,
+  from,
+  to,
+  dictionary,
+  onRemoveLink,
+  onSelectLink,
+  onClickLink,
+  view,
+}) => {
+  const getHref = () => sanitizeUrl(mark?.attrs.href) ?? "";
+  const initialValue = getHref();
+  const initialSelectionLength = to - from;
+  const inputRef = useRef<HTMLInputElement>(null);
+  const discardRef = useRef(false);
+  const [query, setQuery] = useState(initialValue);
+  const [selectedIndex, setSelectedIndex] = useState(-1);
+  const { documents } = useStores();
 
-class LinkEditor extends React.Component<Props, State> {
-  discardInputValue = false;
-  initialValue = this.href;
-  initialSelectionLength = this.props.to - this.props.from;
-  inputRef = React.createRef<HTMLInputElement>();
+  const trimmedQuery = query.trim();
+  const results = trimmedQuery
+    ? documents.findByQuery(trimmedQuery, { maxResults: 25 })
+    : [];
 
-  state: State = {
-    value: this.href,
-    previousValue: "",
-  };
+  const { request } = useRequest(
+    React.useCallback(async () => {
+      const res = await client.post("/suggestions.mention", { query });
+      res.data.documents.map(documents.add);
+    }, [query])
+  );
 
-  get href(): string {
-    return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
-  }
-
-  componentDidMount(): void {
-    window.addEventListener("keydown", this.handleGlobalKeyDown);
-  }
-
-  componentWillUnmount = () => {
-    window.removeEventListener("keydown", this.handleGlobalKeyDown);
-
-    // If we discarded the changes then nothing to do
-    if (this.discardInputValue) {
-      return;
+  useEffect(() => {
+    if (trimmedQuery) {
+      void request();
     }
+  }, [trimmedQuery, request]);
 
-    // If the link is the same as it was when the editor opened, nothing to do
-    if (this.state.value === this.initialValue) {
-      return;
-    }
+  useEffect(() => {
+    const handleGlobalKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "k" && event.metaKey) {
+        inputRef.current?.select();
+      }
+    };
 
-    // If the link is totally empty or only spaces then remove the mark
-    const href = (this.state.value || "").trim();
-    if (!href) {
-      return this.handleRemoveLink();
-    }
+    window.addEventListener("keydown", handleGlobalKeyDown);
+    return () => {
+      window.removeEventListener("keydown", handleGlobalKeyDown);
 
-    this.save(href, href);
-  };
+      // If we discarded the changes then nothing to do
+      if (discardRef.current) {
+        return;
+      }
 
-  handleGlobalKeyDown = (event: KeyboardEvent): void => {
-    if (event.key === "k" && event.metaKey) {
-      this.inputRef.current?.select();
-    }
-  };
+      // If the link is the same as it was when the editor opened, nothing to do
+      if (trimmedQuery === initialValue) {
+        return;
+      }
 
-  save = (href: string, title?: string): void => {
+      // If the link is totally empty or only spaces then remove the mark
+      if (!trimmedQuery) {
+        return handleRemoveLink();
+      }
+
+      save(trimmedQuery, trimmedQuery);
+    };
+  }, [trimmedQuery, initialValue]);
+
+  const save = (href: string, title?: string) => {
     href = href.trim();
 
     if (href.length === 0) {
       return;
     }
 
-    this.discardInputValue = true;
-    const { from, to } = this.props;
+    discardRef.current = true;
     href = sanitizeUrl(href) ?? "";
 
-    this.props.onSelectLink({ href, title, from, to });
+    onSelectLink({ href, title, from, to });
   };
 
-  handleKeyDown = (event: React.KeyboardEvent): void => {
-    switch (event.key) {
-      case "Enter": {
-        event.preventDefault();
-        const { value } = this.state;
-
-        this.save(value, value);
-
-        if (this.initialSelectionLength) {
-          this.moveSelectionToEnd();
-        }
-
-        return;
-      }
-
-      case "Escape": {
-        event.preventDefault();
-
-        if (this.initialValue) {
-          this.setState({ value: this.initialValue }, this.moveSelectionToEnd);
-        } else {
-          this.handleRemoveLink();
-        }
-        return;
-      }
-    }
-  };
-
-  handleSearch = async (
-    event: React.ChangeEvent<HTMLInputElement>
-  ): Promise<void> => {
-    const value = event.target.value;
-
-    this.setState({
-      value,
-    });
-
-    const trimmedValue = value.trim();
-
-    if (trimmedValue) {
-      try {
-        this.setState({
-          previousValue: trimmedValue,
-        });
-      } catch (err) {
-        Logger.error("Error searching for link", err);
-      }
-    }
-  };
-
-  handlePaste = (): void => {
-    setTimeout(() => this.save(this.state.value, this.state.value), 0);
-  };
-
-  handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>): void => {
-    event.preventDefault();
-
-    try {
-      this.props.onClickLink(this.href, event);
-    } catch (err) {
-      toast.error(this.props.dictionary.openLinkError);
-    }
-  };
-
-  handleRemoveLink = (): void => {
-    this.discardInputValue = true;
-
-    const { from, to, mark, view, onRemoveLink } = this.props;
-    const { state, dispatch } = this.props.view;
-
-    if (mark) {
-      dispatch(state.tr.removeMark(from, to, mark));
-    }
-
-    onRemoveLink?.();
-    view.focus();
-  };
-
-  moveSelectionToEnd = () => {
-    const { to, view } = this.props;
+  const moveSelectionToEnd = () => {
     const { state, dispatch } = view;
     const nextSelection = Selection.findFrom(state.tr.doc.resolve(to), 1, true);
     if (nextSelection) {
@@ -186,47 +130,178 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
-  render() {
-    const { view, dictionary } = this.props;
-    const { value } = this.state;
-    const isInternal = isInternalUrl(value);
+  const handleKeyDown = (event: React.KeyboardEvent) => {
+    switch (event.key) {
+      case "ArrowDown": {
+        event.preventDefault();
+        const maxIndex = results.length - 1;
+        setSelectedIndex((current) => (current >= maxIndex ? 0 : current + 1));
+        return;
+      }
+      case "ArrowUp": {
+        event.preventDefault();
+        const maxIndex = results.length - 1;
+        setSelectedIndex((current) => (current <= 0 ? maxIndex : current - 1));
+        return;
+      }
+      case "Enter": {
+        event.preventDefault();
 
-    return (
+        if (selectedIndex >= 0 && results[selectedIndex]) {
+          const selectedDoc = results[selectedIndex];
+          const href = selectedDoc.url;
+          save(href, selectedDoc.title);
+        } else {
+          save(trimmedQuery, trimmedQuery);
+        }
+
+        if (initialSelectionLength) {
+          moveSelectionToEnd();
+        }
+        return;
+      }
+      case "Escape": {
+        event.preventDefault();
+
+        if (initialValue) {
+          setQuery(initialValue);
+          moveSelectionToEnd();
+        } else {
+          handleRemoveLink();
+        }
+        return;
+      }
+    }
+  };
+
+  const handleSearch = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const newValue = event.target.value;
+    setQuery(newValue);
+    setSelectedIndex(-1);
+  };
+
+  const handlePaste = () => {
+    setTimeout(() => save(query, query), 0);
+  };
+
+  const handleOpenLink = (event: React.MouseEvent<HTMLButtonElement>) => {
+    event.preventDefault();
+
+    try {
+      onClickLink(getHref(), event);
+    } catch (err) {
+      toast.error(dictionary.openLinkError);
+    }
+  };
+
+  const handleRemoveLink = () => {
+    discardRef.current = true;
+
+    const { state, dispatch } = view;
+    if (mark) {
+      dispatch(state.tr.removeMark(from, to, mark));
+    }
+
+    onRemoveLink?.();
+    view.focus();
+  };
+
+  const isInternal = isInternalUrl(query);
+  const hasResults = !!results.length;
+
+  return (
+    <>
       <Wrapper>
         <Input
-          ref={this.inputRef}
-          value={value}
-          placeholder={dictionary.enterLink}
-          onKeyDown={this.handleKeyDown}
-          onPaste={this.handlePaste}
-          onChange={this.handleSearch}
-          onFocus={this.handleSearch}
-          autoFocus={this.href === ""}
+          ref={inputRef}
+          value={query}
+          placeholder={dictionary.searchOrPasteLink}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onChange={handleSearch}
+          onFocus={handleSearch}
+          autoFocus={getHref() === ""}
           readOnly={!view.editable}
         />
-
         <Tooltip
           content={isInternal ? dictionary.goToLink : dictionary.openLink}
         >
-          <ToolbarButton onClick={this.handleOpenLink} disabled={!value}>
+          <ToolbarButton onClick={handleOpenLink} disabled={!query}>
             {isInternal ? <ArrowIcon /> : <OpenIcon />}
           </ToolbarButton>
         </Tooltip>
         {view.editable && (
           <Tooltip content={dictionary.removeLink}>
-            <ToolbarButton onClick={this.handleRemoveLink}>
+            <ToolbarButton onClick={handleRemoveLink}>
               <CloseIcon />
             </ToolbarButton>
           </Tooltip>
         )}
       </Wrapper>
-    );
-  }
-}
+      <SearchResults $hasResults={hasResults}>
+        <ResizingHeightContainer>
+          {hasResults && (
+            <>
+              {results.map((doc, index) => (
+                <SuggestionsMenuItem
+                  onClick={() => {
+                    save(doc.url, doc.title);
+                    if (initialSelectionLength) {
+                      moveSelectionToEnd();
+                    }
+                  }}
+                  onPointerMove={() => setSelectedIndex(index)}
+                  selected={index === selectedIndex}
+                  key={doc.id}
+                  subtitle={doc.collection?.name}
+                  title={doc.title}
+                  icon={
+                    doc.icon ? (
+                      <Icon value={doc.icon} color={doc.color ?? undefined} />
+                    ) : (
+                      <DocumentIcon />
+                    )
+                  }
+                />
+              ))}
+            </>
+          )}
+        </ResizingHeightContainer>
+      </SearchResults>
+    </>
+  );
+};
 
 const Wrapper = styled(Flex)`
   pointer-events: all;
   gap: 8px;
 `;
 
-export default LinkEditor;
+const SearchResults = styled(Scrollable)<{ $hasResults: boolean }>`
+  background: ${s("menuBackground")};
+  box-shadow: ${(props) => (props.$hasResults ? s("menuShadow") : "none")};
+  clip-path: inset(0px -100px -100px -100px);
+  position: absolute;
+  top: 100%;
+  width: 100%;
+  height: auto;
+  left: 0;
+  margin-top: -6px;
+  border-radius: 0 0 4px 4px;
+  padding: ${(props) => (props.$hasResults ? "6px" : "0")};
+  max-height: 240px;
+  pointer-events: all;
+
+  ${hideScrollbars()}
+
+  @media (hover: none) and (pointer: coarse) {
+    position: fixed;
+    top: auto;
+    bottom: 40px;
+    border-radius: 0;
+    max-height: 50vh;
+    padding: 8px 8px 4px;
+  }
+`;
+
+export default observer(LinkEditor);

app/editor/components/MentionMenu.tsx

@@ -1,6 +1,6 @@
 import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
-import { DocumentIcon, PlusIcon } from "outline-icons";
+import { DocumentIcon, PlusIcon, CollectionIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
@@ -10,11 +10,13 @@ import Icon from "@shared/components/Icon";
 import { MenuItem } from "@shared/editor/types";
 import { MentionType } from "@shared/types";
 import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
-import Document from "~/models/Document";
-import User from "~/models/User";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import Flex from "~/components/Flex";
-import { DocumentsSection, UserSection } from "~/actions/sections";
+import {
+  DocumentsSection,
+  UserSection,
+  CollectionsSection,
+} from "~/actions/sections";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
@@ -42,23 +44,19 @@ 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 } = useStores();
+  const { auth, documents, users, collections } = useStores();
   const actorId = auth.currentUserId;
   const location = useLocation();
   const documentId = parseDocumentSlug(location.pathname);
   const maxResultsInSection = search ? 25 : 5;
 
-  const { loading, request } = useRequest<{
-    documents: Document[];
-    users: User[];
-  }>(
+  const { loading, request } = useRequest(
     React.useCallback(async () => {
       const res = await client.post("/suggestions.mention", { query: search });
 
-      return {
-        documents: res.data.documents.map(documents.add),
-        users: res.data.users.map(users.add),
-      };
+      res.data.documents.map(documents.add);
+      res.data.users.map(users.add);
+      res.data.collections.map(collections.add);
     }, [search, documents, users])
   );
 
@@ -127,6 +125,34 @@ 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",
@@ -154,7 +180,10 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
 
   const handleSelect = React.useCallback(
     async (item: MentionItem) => {
-      if (item.attrs.type === MentionType.Document) {
+      if (
+        item.attrs.type === MentionType.Document ||
+        item.attrs.type === MentionType.Collection
+      ) {
         return;
       }
       if (!documentId) {

app/editor/components/SelectionToolbar.tsx

@@ -4,6 +4,7 @@ import * as React from "react";
 import filterExcessSeparators from "@shared/editor/lib/filterExcessSeparators";
 import { getMarkRange } from "@shared/editor/queries/getMarkRange";
 import { isInCode } from "@shared/editor/queries/isInCode";
+import { isInNotice } from "@shared/editor/queries/isInNotice";
 import { isMarkActive } from "@shared/editor/queries/isMarkActive";
 import { isNodeActive } from "@shared/editor/queries/isNodeActive";
 import { getColumnIndex, getRowIndex } from "@shared/editor/queries/table";
@@ -18,6 +19,7 @@ import getCodeMenuItems from "../menus/code";
 import getDividerMenuItems from "../menus/divider";
 import getFormattingMenuItems from "../menus/formatting";
 import getImageMenuItems from "../menus/image";
+import getNoticeMenuItems from "../menus/notice";
 import getReadOnlyMenuItems from "../menus/readOnly";
 import getTableMenuItems from "../menus/table";
 import getTableColMenuItems from "../menus/tableCol";
@@ -55,6 +57,10 @@ function useIsActive(state: EditorState) {
     return true;
   }
 
+  if (isInNotice(state) && selection.from > 0) {
+    return true;
+  }
+
   if (!selection || selection.empty) {
     return false;
   }
@@ -184,6 +190,7 @@ export default function SelectionToolbar(props: Props) {
     selection instanceof NodeSelection &&
     selection.node.type.name === "attachment";
   const isCodeSelection = isInCode(state, { onlyBlock: true });
+  const isNoticeSelection = isInNotice(state);
 
   let items: MenuItem[] = [];
 
@@ -203,6 +210,8 @@ export default function SelectionToolbar(props: Props) {
     items = getDividerMenuItems(state, dictionary);
   } else if (readOnly) {
     items = getReadOnlyMenuItems(state, !!canUpdate, dictionary);
+  } else if (isNoticeSelection && selection.empty) {
+    items = getNoticeMenuItems(state, readOnly, dictionary);
   } else {
     items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
   }

app/editor/components/SuggestionsMenuItem.tsx

@@ -1,3 +1,4 @@
+import { transparentize } from "polished";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled from "styled-components";
@@ -11,6 +12,8 @@ export type Props = {
   disabled?: boolean;
   /** Callback when the item is clicked */
   onClick: (event: React.SyntheticEvent) => void;
+  /** Callback when the item is hovered */
+  onPointerMove?: (event: React.SyntheticEvent) => void;
   /** An optional icon for the item */
   icon?: React.ReactNode;
   /** The title of the item */
@@ -25,6 +28,7 @@ function SuggestionsMenuItem({
   selected,
   disabled,
   onClick,
+  onPointerMove,
   title,
   subtitle,
   shortcut,
@@ -53,6 +57,7 @@ function SuggestionsMenuItem({
       ref={ref}
       active={selected}
       onClick={disabled ? undefined : onClick}
+      onPointerMove={disabled ? undefined : onPointerMove}
       icon={icon}
     >
       {title}
@@ -64,12 +69,16 @@ function SuggestionsMenuItem({
 
 const Subtitle = styled.span<{ $active?: boolean }>`
   color: ${(props) =>
-    props.$active ? props.theme.white50 : props.theme.textTertiary};
+    props.$active
+      ? transparentize(0.35, props.theme.accentText)
+      : props.theme.textTertiary};
 `;
 
 const Shortcut = styled.span<{ $active?: boolean }>`
   color: ${(props) =>
-    props.$active ? props.theme.white50 : props.theme.textTertiary};
+    props.$active
+      ? transparentize(0.35, props.theme.accentText)
+      : props.theme.textTertiary};
   flex-grow: 1;
   text-align: right;
 `;

app/editor/extensions/PasteHandler.tsx

@@ -20,8 +20,9 @@ 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 { isDocumentUrl, isUrl } from "@shared/utils/urls";
+import { isCollectionUrl, isDocumentUrl, isUrl } from "@shared/utils/urls";
 import stores from "~/stores";
 import PasteMenu from "../components/PasteMenu";
 
@@ -121,6 +122,8 @@ 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);
 
@@ -132,7 +135,7 @@ export default class PasteHandler extends Extension {
                           return;
                         }
                         if (document) {
-                          if (state.schema.nodes.mention) {
+                          if (state.schema.nodes.mention && !containsHash) {
                             view.dispatch(
                               view.state.tr.replaceWith(
                                 state.selection.from,
@@ -166,6 +169,51 @@ 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);
                 }

app/editor/extensions/SmartText.ts

@@ -3,8 +3,8 @@ import { InputRule } from "@shared/editor/lib/InputRule";
 
 const rightArrow = new InputRule(/->$/, "→");
 const emdash = new InputRule(/--$/, "—");
-const oneHalf = new InputRule(/(?:^|\s)1\/2$/, "½");
-const threeQuarters = new InputRule(/(?:^|\s)3\/4$/, "¾");
+const oneHalf = new InputRule(/(?:^|\s)(1\/2)$/, "½");
+const threeQuarters = new InputRule(/(?:^|\s)(3\/4)$/, "¾");
 const copyright = new InputRule(/\(c\)$/, "©️");
 const registered = new InputRule(/\(r\)$/, "®️");
 const trademarked = new InputRule(/\(tm\)$/, "™️");

app/editor/extensions/Suggestion.ts

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

app/editor/index.tsx

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

app/editor/menus/attachment.tsx

@@ -13,13 +13,11 @@ export default function attachmentMenuItems(
       name: "replaceAttachment",
       tooltip: dictionary.replaceAttachment,
       icon: <ReplaceIcon />,
-      visible: true,
     },
     {
       name: "deleteAttachment",
       tooltip: dictionary.deleteAttachment,
       icon: <TrashIcon />,
-      visible: true,
     },
     {
       name: "separator",

app/editor/menus/image.tsx

@@ -33,14 +33,12 @@ export default function imageMenuItems(
       name: "alignLeft",
       tooltip: dictionary.alignLeft,
       icon: <AlignImageLeftIcon />,
-      visible: true,
       active: isLeftAligned,
     },
     {
       name: "alignCenter",
       tooltip: dictionary.alignCenter,
       icon: <AlignImageCenterIcon />,
-      visible: true,
       active: (state) =>
         isNodeActive(schema.nodes.image)(state) &&
         !isLeftAligned(state) &&
@@ -51,19 +49,16 @@ export default function imageMenuItems(
       name: "alignRight",
       tooltip: dictionary.alignRight,
       icon: <AlignImageRightIcon />,
-      visible: true,
       active: isRightAligned,
     },
     {
       name: "alignFullWidth",
       tooltip: dictionary.alignFullWidth,
       icon: <AlignFullWidthIcon />,
-      visible: true,
       active: isFullWidthAligned,
     },
     {
       name: "separator",
-      visible: true,
     },
     {
       name: "downloadImage",
@@ -75,13 +70,11 @@ export default function imageMenuItems(
       name: "replaceImage",
       tooltip: dictionary.replaceImage,
       icon: <ReplaceIcon />,
-      visible: true,
     },
     {
       name: "deleteImage",
       tooltip: dictionary.deleteImage,
       icon: <TrashIcon />,
-      visible: true,
     },
   ];
 }

app/editor/menus/notice.tsx

@@ -0,0 +1,63 @@
+import {
+  DoneIcon,
+  ExpandedIcon,
+  InfoIcon,
+  StarredIcon,
+  WarningIcon,
+} from "outline-icons";
+import { EditorState } from "prosemirror-state";
+import * as React from "react";
+import { NoticeTypes } from "@shared/editor/nodes/Notice";
+import { MenuItem } from "@shared/editor/types";
+import { Dictionary } from "~/hooks/useDictionary";
+
+export default function noticeMenuItems(
+  state: EditorState,
+  readOnly: boolean | undefined,
+  dictionary: Dictionary
+): MenuItem[] {
+  const node = state.selection.$from.node(-1);
+  const currentStyle = node?.attrs.style as NoticeTypes;
+
+  const mapping = {
+    [NoticeTypes.Info]: dictionary.infoNotice,
+    [NoticeTypes.Warning]: dictionary.warningNotice,
+    [NoticeTypes.Success]: dictionary.successNotice,
+    [NoticeTypes.Tip]: dictionary.tipNotice,
+  };
+
+  return [
+    {
+      name: "container_notice",
+      visible: !readOnly,
+      label: mapping[currentStyle],
+      icon: <ExpandedIcon />,
+      children: [
+        {
+          name: NoticeTypes.Info,
+          icon: <InfoIcon />,
+          label: dictionary.infoNotice,
+          active: () => currentStyle === NoticeTypes.Info,
+        },
+        {
+          name: NoticeTypes.Success,
+          icon: <DoneIcon />,
+          label: dictionary.successNotice,
+          active: () => currentStyle === NoticeTypes.Success,
+        },
+        {
+          name: NoticeTypes.Warning,
+          icon: <WarningIcon />,
+          label: dictionary.warningNotice,
+          active: () => currentStyle === NoticeTypes.Warning,
+        },
+        {
+          name: NoticeTypes.Tip,
+          icon: <StarredIcon />,
+          label: dictionary.tipNotice,
+          active: () => currentStyle === NoticeTypes.Tip,
+        },
+      ],
+    },
+  ];
+}

app/hooks/useLocaleTime.ts

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

app/hooks/usePolicy.ts

@@ -18,6 +18,7 @@ export default function usePolicy(entity?: string | Model | null) {
       ? entity
       : entity.id
     : "";
+  const policy = policies.get(entityId);
 
   React.useEffect(() => {
     if (
@@ -28,11 +29,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 (!policies.get(entity.id) && user) {
+      if (!policy && user) {
         void entity.loadRelations();
       }
     }
-  }, [policies, user, entity]);
+  }, [policies, policy, user, entity]);
 
   return policies.abilities(entityId);
 }

app/hooks/useQueryNotices.ts

@@ -24,6 +24,14 @@ export default function useQueryNotices() {
         );
         break;
       }
+      case QueryNotices.UnsubscribeCollection: {
+        toast.success(
+          t("Unsubscribed from collection", {
+            type: "success",
+          })
+        );
+        break;
+      }
       default:
     }
   }, [t, notice]);

app/menus/ImportMenu.tsx

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

app/menus/NotificationMenu.tsx

@@ -24,7 +24,6 @@ const NotificationMenu: React.FC = () => {
       {
         type: "button",
         title: t("Notification settings"),
-        visible: true,
         onClick: () => performAction(navigateToNotificationSettings, context),
       },
     ],

app/menus/TableOfContentsMenu.tsx

@@ -28,7 +28,6 @@ function TableOfContentsMenu() {
     const i = [
       {
         type: "heading",
-        visible: true,
         title: t("Contents"),
       },
       ...headings.map((heading) => ({

app/models/Collection.ts

@@ -92,6 +92,11 @@ 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 {

app/models/Document.ts

@@ -188,9 +188,10 @@ export default class Document extends ArchivableModel implements Searchable {
   @observable
   collaboratorIds: string[];
 
-  @observable
+  @Relation(() => User)
   createdBy: User | undefined;
 
+  @Relation(() => User)
   @observable
   updatedBy: User | undefined;
 
@@ -599,7 +600,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

app/models/FileOperation.ts

@@ -7,6 +7,7 @@ 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";
@@ -27,6 +28,7 @@ class FileOperation extends Model {
 
   format: FileOperationFormat;
 
+  @Relation(() => User)
   user: User;
 
   @computed

app/models/Import.ts

@@ -0,0 +1,54 @@
+import { observable } from "mobx";
+import { ImportableIntegrationService, ImportState } from "@shared/types";
+import ImportsStore from "~/stores/ImportsStore";
+import User from "./User";
+import Model from "./base/Model";
+import Field from "./decorators/Field";
+import { AfterChange } from "./decorators/Lifecycle";
+import Relation from "./decorators/Relation";
+
+class Import extends Model {
+  static modelName = "Import";
+
+  store: ImportsStore;
+
+  /** The name of the import. */
+  name: string;
+
+  /** The current state of the import. */
+  @Field
+  @observable
+  state: ImportState;
+
+  /** The external service from which the import is created. */
+  service: ImportableIntegrationService;
+
+  /** The count of documents created in the import. */
+  @observable
+  documentCount: number;
+
+  /** The user who created the import. */
+  @Relation(() => User, {})
+  createdBy: User;
+
+  /** The ID of the user who created the import. */
+  createdById: string;
+
+  /**
+   * Cancel the import – this will stop the import process and mark it as
+   * cancelled at the first opportunity.
+   */
+  cancel = async () => this.store.cancel(this);
+
+  // hooks
+
+  @AfterChange
+  static removePolicies(model: Import, previousAttributes: Partial<Import>) {
+    if (previousAttributes.state && previousAttributes.state !== model.state) {
+      const { policies } = model.store.rootStore;
+      policies.remove(model.id);
+    }
+  }
+}
+
+export default Import;

app/models/Revision.ts

@@ -4,6 +4,7 @@ import { isRTL } from "@shared/utils/rtl";
 import Document from "./Document";
 import User from "./User";
 import Model from "./base/Model";
+import Field from "./decorators/Field";
 import Relation from "./decorators/Relation";
 
 class Revision extends Model {
@@ -19,6 +20,10 @@ class Revision extends Model {
   /** The document title when the revision was created */
   title: string;
 
+  /** An optional name for the revision */
+  @Field
+  name: string | null;
+
   /** Prosemirror data of the content when revision was created */
   data: ProsemirrorData;
 

app/models/Share.ts

@@ -1,12 +1,13 @@
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import Collection from "./Collection";
 import Document from "./Document";
 import User from "./User";
 import Model from "./base/Model";
 import Field from "./decorators/Field";
 import Relation from "./decorators/Relation";
+import { Searchable } from "./interfaces/Searchable";
 
-class Share extends Model {
+class Share extends Model implements Searchable {
   static modelName = "Share";
 
   @Field
@@ -65,6 +66,11 @@ class Share extends Model {
   /** The user that shared the document. */
   @Relation(() => User, { onDelete: "null" })
   createdBy: User;
+
+  @computed
+  get searchContent(): string[] {
+    return [this.document?.title ?? this.documentTitle];
+  }
 }
 
 export default Share;

app/models/base/Model.ts

@@ -43,12 +43,6 @@ export default abstract class Model {
     this: Model,
     options: { withoutPolicies?: boolean } = {}
   ): Promise<any> {
-    const relations = getRelationsForModelClass(
-      this.constructor as typeof Model
-    );
-    if (!relations) {
-      return;
-    }
     // this is to ensure that multiple loads don’t happen in parallel
     if (this.loadingRelations) {
       return this.loadingRelations;
@@ -56,14 +50,20 @@ export default abstract class Model {
 
     const promises = [];
 
-    for (const properties of relations.values()) {
-      const store = this.store.rootStore.getStoreForModelName(
-        properties.relationClassResolver().modelName
-      );
-      if ("fetch" in store) {
-        const id = this[properties.idKey];
-        if (id) {
-          promises.push(store.fetch(id as string));
+    const relations = getRelationsForModelClass(
+      this.constructor as typeof Model
+    );
+
+    if (relations) {
+      for (const properties of relations.values()) {
+        const store = this.store.rootStore.getStoreForModelName(
+          properties.relationClassResolver().modelName
+        );
+        if ("fetch" in store) {
+          const id = this[properties.idKey];
+          if (id) {
+            promises.push(store.fetch(id as string));
+          }
         }
       }
     }

app/models/base/ParanoidModel.ts

@@ -1,7 +1,12 @@
-import { observable } from "mobx";
+import { computed, observable } from "mobx";
 import Model from "./Model";
 
 export default abstract class ParanoidModel extends Model {
   @observable
   deletedAt: string | undefined;
+
+  @computed
+  get isDeleted(): boolean {
+    return !!this.deletedAt;
+  }
 }

app/routes/authenticated.tsx

@@ -2,7 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { Switch, Redirect, RouteComponentProps } from "react-router-dom";
 import DocumentNew from "~/scenes/DocumentNew";
-import Error404 from "~/scenes/Error404";
+import Error404 from "~/scenes/Errors/Error404";
 import AuthenticatedLayout from "~/components/AuthenticatedLayout";
 import CenteredContent from "~/components/CenteredContent";
 import PlaceholderDocument from "~/components/PlaceholderDocument";
@@ -83,7 +83,7 @@ function AuthenticatedRoutes() {
             <Route exact path={`/doc/${slug}/insights`} component={Document} />
             <Route exact path={`/doc/${slug}/edit`} component={Document} />
             <Route path={`/doc/${slug}`} component={Document} />
-            <Route exact path={`${searchPath()}/:term?`} component={Search} />
+            <Route exact path={`${searchPath()}/:query?`} component={Search} />
             <Route path="/404" component={Error404} />
             <SettingsRoutes />
             <Route component={Error404} />

app/routes/settings.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { RouteComponentProps, Switch } from "react-router-dom";
 import DocumentNew from "~/scenes/DocumentNew";
-import Error404 from "~/scenes/Error404";
+import Error404 from "~/scenes/Errors/Error404";
 import Route from "~/components/ProfiledRoute";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
 import lazy from "~/utils/lazyWithRetry";

app/scenes/Collection/index.tsx

@@ -17,7 +17,6 @@ import { s } from "@shared/styles";
 import { StatusFilter } from "@shared/types";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
-import Search from "~/scenes/Search";
 import { Action } from "~/components/Actions";
 import CenteredContent from "~/components/CenteredContent";
 import { CollectionBreadcrumb } from "~/components/CollectionBreadcrumb";
@@ -41,6 +40,7 @@ import { usePinnedDocuments } from "~/hooks/usePinnedDocuments";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { collectionPath, updateCollectionPath } from "~/utils/routeHelpers";
+import Error404 from "../Errors/Error404";
 import Actions from "./components/Actions";
 import DropToImport from "./components/DropToImport";
 import Empty from "./components/Empty";
@@ -139,7 +139,7 @@ const CollectionScene = observer(function _CollectionScene() {
   useCommandBarActions([editCollection], [ui.activeCollectionId ?? "none"]);
 
   if (!collection && error) {
-    return <Search notFound />;
+    return <Error404 />;
   }
 
   const hasOverview = can.update || collection?.hasDescription;

app/scenes/Document/Shared.tsx

@@ -9,8 +9,8 @@ import { s } from "@shared/styles";
 import { NavigationNode, PublicTeam, TOCPosition } from "@shared/types";
 import type { Theme } from "~/stores/UiStore";
 import DocumentModel from "~/models/Document";
-import Error404 from "~/scenes/Error404";
-import ErrorOffline from "~/scenes/ErrorOffline";
+import Error404 from "~/scenes/Errors/Error404";
+import ErrorOffline from "~/scenes/Errors/ErrorOffline";
 import ClickablePadding from "~/components/ClickablePadding";
 import {
   DocumentContextProvider,

app/scenes/Document/components/CommentSortMenu.tsx

@@ -5,7 +5,7 @@ import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { UserPreference } from "@shared/types";
-import InputSelect from "~/components/InputSelect";
+import { InputSelectNew, Option } from "~/components/InputSelectNew";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useQuery from "~/hooks/useQuery";
@@ -28,66 +28,80 @@ const CommentSortMenu = () => {
   const viewingResolved = params.get("resolved") === "";
   const value = viewingResolved ? "resolved" : preferredSortType;
 
-  const handleSortTypeChange = (type: CommentSortType) => {
-    if (type !== preferredSortType) {
-      user.setPreference(
-        UserPreference.SortCommentsByOrderInDocument,
-        type === CommentSortType.OrderInDocument
-      );
-      void user.save();
-    }
-  };
+  const handleChange = React.useCallback(
+    (val: string) => {
+      if (val === "resolved") {
+        history.push({
+          search: queryString.stringify({
+            ...queryString.parse(location.search),
+            resolved: "",
+          }),
+          pathname: location.pathname,
+          state: { sidebarContext },
+        });
+        return;
+      }
 
-  const showResolved = () => {
-    history.push({
-      search: queryString.stringify({
-        ...queryString.parse(location.search),
-        resolved: "",
-      }),
-      pathname: location.pathname,
-      state: { sidebarContext },
-    });
-  };
+      const sortType = val as CommentSortType;
+      if (sortType !== preferredSortType) {
+        user.setPreference(
+          UserPreference.SortCommentsByOrderInDocument,
+          sortType === CommentSortType.OrderInDocument
+        );
+        void user.save();
+      }
 
-  const showUnresolved = () => {
-    history.push({
-      search: queryString.stringify({
-        ...queryString.parse(location.search),
-        resolved: undefined,
-      }),
-      pathname: location.pathname,
-      state: { sidebarContext },
-    });
-  };
+      history.push({
+        search: queryString.stringify({
+          ...queryString.parse(location.search),
+          resolved: undefined,
+        }),
+        pathname: location.pathname,
+        state: { sidebarContext },
+      });
+    },
+    [history, location, sidebarContext, user, preferredSortType]
+  );
+
+  const options: Option[] = React.useMemo(
+    () =>
+      [
+        {
+          type: "item",
+          label: t("Most recent"),
+          value: CommentSortType.MostRecent,
+        },
+        {
+          type: "item",
+          label: t("Order in doc"),
+          value: CommentSortType.OrderInDocument,
+        },
+        {
+          type: "separator",
+        },
+        {
+          type: "item",
+          label: t("Resolved"),
+          value: "resolved",
+        },
+      ] satisfies Option[],
+    [t]
+  );
 
   return (
     <Select
-      style={{ margin: 0 }}
-      ariaLabel={t("Sort comments")}
+      options={options}
       value={value}
-      onChange={(ev) => {
-        if (ev === "resolved") {
-          showResolved();
-        } else {
-          handleSortTypeChange(ev as CommentSortType);
-          showUnresolved();
-        }
-      }}
+      onChange={handleChange}
+      ariaLabel={t("Sort comments")}
+      label={t("Sort comments")}
+      hideLabel
       borderOnHover
-      options={[
-        { value: CommentSortType.MostRecent, label: t("Most recent") },
-        { value: CommentSortType.OrderInDocument, label: t("Order in doc") },
-        {
-          divider: true,
-          value: "resolved",
-          label: t("Resolved"),
-        },
-      ]}
     />
   );
 };
 
-const Select = styled(InputSelect)`
+const Select = styled(InputSelectNew)`
   color: ${s("textSecondary")};
 `;
 

app/scenes/Document/components/DataLoader.tsx

@@ -6,9 +6,10 @@ import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
 import { RevisionHelper } from "@shared/utils/RevisionHelper";
 import Document from "~/models/Document";
 import Revision from "~/models/Revision";
-import Error402 from "~/scenes/Error402";
-import Error404 from "~/scenes/Error404";
-import ErrorOffline from "~/scenes/ErrorOffline";
+import Error402 from "~/scenes/Errors/Error402";
+import Error403 from "~/scenes/Errors/Error403";
+import Error404 from "~/scenes/Errors/Error404";
+import ErrorOffline from "~/scenes/Errors/ErrorOffline";
 import { useDocumentContext } from "~/components/DocumentContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
@@ -17,6 +18,7 @@ import useStores from "~/hooks/useStores";
 import { Properties } from "~/types";
 import Logger from "~/utils/Logger";
 import {
+  AuthorizationError,
   NotFoundError,
   OfflineError,
   PaymentRequiredError,
@@ -216,6 +218,8 @@ function DataLoader({ match, children }: Props) {
       <ErrorOffline />
     ) : error instanceof PaymentRequiredError ? (
       <Error402 />
+    ) : error instanceof AuthorizationError ? (
+      <Error403 />
     ) : (
       <Error404 />
     );

app/scenes/Document/components/Document.tsx

@@ -174,6 +174,7 @@ class DocumentScene extends React.Component<Props> {
 
     if (template instanceof Document) {
       this.props.document.templateId = template.id;
+      this.props.document.fullWidth = template.fullWidth;
     }
 
     if (!this.title) {
@@ -551,6 +552,11 @@ class DocumentScene extends React.Component<Props> {
                     >
                       <Notices document={document} readOnly={readOnly} />
 
+                      {showContents && (
+                        <PrintContentsContainer>
+                          <Contents />
+                        </PrintContentsContainer>
+                      )}
                       <Editor
                         id={document.id}
                         key={embedsDisabled ? "disabled" : "enabled"}
@@ -665,6 +671,19 @@ const ContentsContainer = styled.div<ContentsContainerProps>`
     justify-self: ${({ position }: ContentsContainerProps) =>
       position === TOCPosition.Left ? "end" : "start"};
   `};
+
+  @media print {
+    display: none;
+  }
+`;
+
+const PrintContentsContainer = styled.div`
+  display: none;
+  margin: 0 -12px;
+
+  @media print {
+    display: block;
+  }
 `;
 
 type EditorContainerProps = {

app/scenes/Document/components/History.tsx

@@ -1,3 +1,4 @@
+import isEqual from "fast-deep-equal";
 import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import * as React from "react";
@@ -136,14 +137,19 @@ function History() {
       "desc"
     );
 
-    const latestEvent = merged[0];
+    const latestRevisionEvent = merged.find(
+      (event) => event.name === "revisions.create"
+    );
 
-    if (latestEvent && document) {
-      const latestRevisionEvent = merged.find(
-        (event) => event.name === "revisions.create"
-      );
+    if (latestRevisionEvent && document) {
+      const latestRevision = revisions.get(latestRevisionEvent.id);
 
-      if (latestEvent.createdAt !== document.updatedAt) {
+      const isDocUpdated =
+        latestRevision?.title !== document.title ||
+        !isEqual(latestRevision.data, document.data);
+
+      if (isDocUpdated) {
+        revisions.remove(RevisionHelper.latestId(document.id));
         merged.unshift({
           id: RevisionHelper.latestId(document.id),
           name: "revisions.create",
@@ -157,7 +163,7 @@ function History() {
     }
 
     return merged;
-  }, [document, revisionEvents, nonRevisionEvents]);
+  }, [revisions, document, revisionEvents, nonRevisionEvents]);
 
   const onCloseHistory = React.useCallback(() => {
     if (document) {

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -6,6 +6,12 @@ import { useHistory } from "react-router-dom";
 import { toast } from "sonner";
 import { IndexeddbPersistence } from "y-indexeddb";
 import * as Y from "yjs";
+import {
+  AuthenticationFailed,
+  DocumentTooLarge,
+  EditorUpdateError,
+} from "@shared/collaboration/CloseEvents";
+import EDITOR_VERSION from "@shared/editor/version";
 import { supportsPassiveListener } from "@shared/utils/browser";
 import Editor, { Props as EditorProps } from "~/components/Editor";
 import MultiplayerExtension from "~/editor/extensions/Multiplayer";
@@ -65,6 +71,9 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     const name = `document.${documentId}`;
     const localProvider = new IndexeddbPersistence(name, ydoc);
     const provider = new HocuspocusProvider({
+      parameters: {
+        editorVersion: EDITOR_VERSION,
+      },
       url: `${env.COLLABORATION_URL}/collaboration`,
       name,
       document: ydoc,
@@ -99,7 +108,11 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     });
 
     provider.on("awarenessChange", (event: AwarenessChangeEvent) => {
-      presence.updateFromAwarenessChangeEvent(documentId, event);
+      presence.updateFromAwarenessChangeEvent(
+        documentId,
+        provider.awareness.clientID,
+        event
+      );
 
       event.states.forEach(({ user, scrollY }) => {
         if (user) {
@@ -136,8 +149,14 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     provider.on("close", (ev: MessageEvent) => {
       if ("code" in ev.event) {
         provider.shouldConnect =
-          ev.event.code !== 1009 && ev.event.code !== 4401;
+          ev.event.code !== DocumentTooLarge.code &&
+          ev.event.code !== AuthenticationFailed.code &&
+          ev.event.code !== EditorUpdateError.code;
         ui.setMultiplayerStatus("disconnected", ev.event.code);
+
+        if (ev.event.code === EditorUpdateError.code) {
+          window.location.reload();
+        }
       }
     });
 

app/scenes/Error404.tsx

@@ -1,23 +0,0 @@
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import { Link } from "react-router-dom";
-import Empty from "~/components/Empty";
-import Scene from "~/components/Scene";
-import { homePath } from "~/utils/routeHelpers";
-
-const Error404 = () => {
-  const { t } = useTranslation();
-  return (
-    <Scene title={t("Not Found")}>
-      <h1>{t("Not Found")}</h1>
-      <Empty>
-        <Trans>
-          We were unable to find the page you’re looking for. Go to the{" "}
-          <Link to={homePath()}>homepage</Link>?
-        </Trans>
-      </Empty>
-    </Scene>
-  );
-};
-
-export default Error404;

app/scenes/Errors/Error402.tsx

@@ -1,7 +1,9 @@
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
+import Flex from "@shared/components/Flex";
 import Empty from "~/components/Empty";
+import Heading from "~/components/Heading";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
 
@@ -12,13 +14,15 @@ const Error402 = () => {
 
   return (
     <Scene title={title}>
-      <h1>{title}</h1>
-      <Empty>
-        <Notice>
-          This document cannot be viewed with the current edition. Please
-          upgrade to a paid license to restore access.
-        </Notice>
-      </Empty>
+      <Heading>{title}</Heading>
+      <Flex style={{ maxWidth: 500 }} column>
+        <Empty size="large">
+          <Notice>
+            This document cannot be viewed with the current edition. Please
+            upgrade to a paid license to restore access.
+          </Notice>
+        </Empty>
+      </Flex>
     </Scene>
   );
 };

app/scenes/Errors/Error403.tsx

@@ -0,0 +1,40 @@
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { useHistory } from "react-router-dom";
+import Flex from "@shared/components/Flex";
+import Button from "~/components/Button";
+import Empty from "~/components/Empty";
+import Heading from "~/components/Heading";
+import Scene from "~/components/Scene";
+import { navigateToHome } from "~/actions/definitions/navigation";
+import useActionContext from "~/hooks/useActionContext";
+
+const Error403 = () => {
+  const { t } = useTranslation();
+  const history = useHistory();
+  const context = useActionContext();
+
+  return (
+    <Scene title={t("No access to this doc")}>
+      <Heading>{t("No access to this doc")}</Heading>
+      <Flex gap={20} style={{ maxWidth: 500 }} column>
+        <Empty size="large">
+          {t(
+            "It doesn’t look like you have permission to access this document."
+          )}{" "}
+          {t("Please request access from the document owner.")}
+        </Empty>
+        <Flex gap={8}>
+          <Button action={navigateToHome} context={context} hideIcon>
+            {t("Home")}
+          </Button>
+          <Button onClick={history.goBack} neutral>
+            {t("Go back")}
+          </Button>
+        </Flex>
+      </Flex>
+    </Scene>
+  );
+};
+
+export default Error403;

app/scenes/Errors/Error404.tsx

@@ -0,0 +1,41 @@
+import * as React from "react";
+import { useTranslation, Trans } from "react-i18next";
+import Flex from "@shared/components/Flex";
+import Button from "~/components/Button";
+import Empty from "~/components/Empty";
+import Heading from "~/components/Heading";
+import Scene from "~/components/Scene";
+import {
+  navigateToHome,
+  navigateToSearch,
+} from "~/actions/definitions/navigation";
+import useActionContext from "~/hooks/useActionContext";
+
+const Error404 = () => {
+  const { t } = useTranslation();
+  const context = useActionContext();
+
+  return (
+    <Scene title={t("Not found")}>
+      <Heading>{t("Not found")}</Heading>
+      <Flex gap={20} style={{ maxWidth: 500 }} column>
+        <Empty size="large">
+          <Trans>
+            The page you’re looking for cannot be found. It might have been
+            deleted or the link is incorrect.
+          </Trans>
+        </Empty>
+        <Flex gap={8}>
+          <Button action={navigateToHome} context={context} hideIcon>
+            {t("Home")}
+          </Button>
+          <Button action={navigateToSearch} context={context} neutral>
+            {t("Search")}…
+          </Button>
+        </Flex>
+      </Flex>
+    </Scene>
+  );
+};
+
+export default Error404;

app/scenes/Errors/ErrorOffline.tsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import CenteredContent from "~/components/CenteredContent";
 import Empty from "~/components/Empty";
+import Heading from "~/components/Heading";
 import PageTitle from "~/components/PageTitle";
 
 const ErrorOffline = () => {
@@ -9,7 +10,7 @@ const ErrorOffline = () => {
   return (
     <CenteredContent>
       <PageTitle title={t("Offline")} />
-      <h1>{t("Offline")}</h1>
+      <Heading>{t("Offline")}</Heading>
       <Empty>{t("We were unable to load the document while offline.")}</Empty>
     </CenteredContent>
   );

app/scenes/Errors/ErrorSuspended.tsx

@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
 import CenteredContent from "~/components/CenteredContent";
+import Heading from "~/components/Heading";
 import PageTitle from "~/components/PageTitle";
 import useStores from "~/hooks/useStores";
 
@@ -12,12 +13,12 @@ const ErrorSuspended = () => {
   return (
     <CenteredContent>
       <PageTitle title={t("Your account has been suspended")} />
-      <h1>
+      <Heading>
         <span role="img" aria-label={t("Warning Sign")}>
           ⚠️
         </span>{" "}
         {t("Your account has been suspended")}
-      </h1>
+      </Heading>
 
       <p>
         <Trans

app/scenes/KeyboardShortcuts.tsx

@@ -462,7 +462,7 @@ function KeyboardShortcuts() {
         items: [
           {
             shortcut: "@",
-            label: t("Mention user or document"),
+            label: t("Mention users and more"),
           },
           {
             shortcut: ":",

app/scenes/Login/components/Notices.tsx

@@ -105,7 +105,7 @@ function Message({ notice }: { notice: string }) {
     case "authentication-provider-disabled":
       return (
         <Trans>
-          Authentication failed – this login method was disabled by a team
+          Authentication failed – this login method was disabled by a workspace
           admin.
         </Trans>
       );

app/scenes/Search/Search.tsx

@@ -8,14 +8,13 @@ import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { v4 as uuidv4 } from "uuid";
 import { Pagination } from "@shared/constants";
-import { hover, hideScrollbars } from "@shared/styles";
+import { hideScrollbars } from "@shared/styles";
 import {
   DateFilter as TDateFilter,
   StatusFilter as TStatusFilter,
 } from "@shared/types";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
 import DocumentListItem from "~/components/DocumentListItem";
-import Empty from "~/components/Empty";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import LoadingIndicator from "~/components/LoadingIndicator";
@@ -38,9 +37,7 @@ import RecentSearches from "./components/RecentSearches";
 import SearchInput from "./components/SearchInput";
 import UserFilter from "./components/UserFilter";
 
-type Props = { notFound?: boolean };
-
-function Search(props: Props) {
+function Search() {
   const { t } = useTranslation();
   const { documents, searches } = useStores();
 
@@ -48,7 +45,7 @@ function Search(props: Props) {
   const params = useQuery();
   const location = useLocation();
   const history = useHistory();
-  const routeMatch = useRouteMatch<{ term: string }>();
+  const routeMatch = useRouteMatch<{ query: string }>();
 
   // refs
   const searchInputRef = React.useRef<HTMLInputElement | null>(null);
@@ -57,13 +54,13 @@ function Search(props: Props) {
 
   // filters
   const decodedQuery = decodeURIComponentSafe(
-    routeMatch.params.term ?? params.get("query") ?? ""
+    routeMatch.params.query ?? params.get("q") ?? params.get("query") ?? ""
   ).trim();
   const query = decodedQuery !== "" ? decodedQuery : undefined;
-  const collectionId = params.get("collectionId") ?? undefined;
-  const userId = params.get("userId") ?? undefined;
+  const collectionId = params.get("collectionId") ?? "";
+  const userId = params.get("userId") ?? "";
   const documentId = params.get("documentId") ?? undefined;
-  const dateFilter = (params.get("dateFilter") as TDateFilter) ?? undefined;
+  const dateFilter = (params.get("dateFilter") as TDateFilter) ?? "";
   const statusFilter = params.getAll("statusFilter")?.length
     ? (params.getAll("statusFilter") as TStatusFilter[])
     : [TStatusFilter.Published, TStatusFilter.Draft];
@@ -130,9 +127,9 @@ function Search(props: Props) {
 
   const updateLocation = (query: string) => {
     history.replace({
-      pathname: searchPath(query),
+      pathname: location.pathname,
       search: queryString.stringify(
-        { ...queryString.parse(location.search), query: undefined },
+        { ...queryString.parse(location.search), q: query },
         {
           skipEmptyString: true,
         }
@@ -153,7 +150,7 @@ function Search(props: Props) {
     history.replace({
       pathname: location.pathname,
       search: queryString.stringify(
-        { ...queryString.parse(location.search), query: undefined, ...search },
+        { ...queryString.parse(location.search), ...search },
         {
           skipEmptyString: true,
         }
@@ -211,14 +208,6 @@ function Search(props: Props) {
     <Scene textTitle={query ? `${query} – ${t("Search")}` : t("Search")}>
       <RegisterKeyDown trigger="Escape" handler={history.goBack} />
       {loading && <LoadingIndicator />}
-      {props.notFound && (
-        <div>
-          <h1>{t("Not Found")}</h1>
-          <Empty>
-            {t("We were unable to find the page you’re looking for.")}
-          </Empty>
-        </div>
-      )}
       <ResultsWrapper column auto>
         <form
           method="GET"
@@ -375,27 +364,24 @@ const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`
 
 const Filters = styled(Flex)`
   margin-bottom: 12px;
-  opacity: 0.85;
   transition: opacity 100ms ease-in-out;
   overflow-y: hidden;
   overflow-x: auto;
   padding: 8px 0;
+  height: 28px;
   gap: 8px;
+
   ${hideScrollbars()}
 
   ${breakpoint("tablet")`
     padding: 0;
   `};
-
-  &: ${hover} {
-    opacity: 1;
-  }
 `;
 
 const SearchTitlesFilter = styled(Switch)`
   white-space: nowrap;
   margin-left: 8px;
-  margin-top: 2px;
+  margin-top: 4px;
   font-size: 14px;
   font-weight: 400;
 `;

app/scenes/Search/components/CollectionFilter.tsx

@@ -21,13 +21,13 @@ function CollectionFilter(props: Props) {
     const collectionOptions = collections.orderedData.map((collection) => ({
       key: collection.id,
       label: collection.name,
-      icon: <CollectionIcon collection={collection} size={18} />,
+      icon: <CollectionIcon collection={collection} size={24} />,
     }));
     return [
       {
         key: "",
         label: t("Any collection"),
-        icon: <SVGCollectionIcon size={18} />,
+        icon: <SVGCollectionIcon size={24} />,
       },
       ...collectionOptions,
     ];
@@ -39,7 +39,6 @@ function CollectionFilter(props: Props) {
       selectedKeys={[collectionId]}
       onSelect={onSelect}
       defaultLabel={t("Any collection")}
-      selectedPrefix={`${t("Collection")}:`}
       showFilter
     />
   );

app/scenes/Search/components/DateFilter.tsx

@@ -16,7 +16,7 @@ const DateFilter = ({ dateFilter, onSelect }: Props) => {
     () => [
       {
         key: "",
-        label: t("Any time"),
+        label: t("All time"),
       },
       {
         key: "day",

app/scenes/Search/components/DocumentFilter.tsx

@@ -19,7 +19,7 @@ export function DocumentFilter(props: Props) {
     <div>
       <Tooltip content={t("Remove document filter")}>
         <StyledButton onClick={props.onClick} icon={<CloseIcon />} neutral>
-          {props.document.title}
+          {props.document.titleWithDefault}
         </StyledButton>
       </Tooltip>
     </div>

app/scenes/Search/components/RecentSearchListItem.tsx

@@ -27,7 +27,7 @@ function RecentSearchListItem({ searchQuery }: Props) {
 
   return (
     <RecentSearch
-      to={searchPath(searchQuery.query)}
+      to={searchPath({ query: searchQuery.query })}
       ref={ref}
       {...rovingTabIndex}
     >
@@ -51,7 +51,9 @@ const RemoveButton = styled(NudeButton)`
   opacity: 0;
   color: ${s("textTertiary")};
 
-  &:hover {
+  &:focus,
+  &:${hover} {
+    opacity: 1;
     color: ${s("text")};
   }
 `;
@@ -61,17 +63,11 @@ const RecentSearch = styled(Link)`
   justify-content: space-between;
   color: ${s("textSecondary")};
   cursor: var(--pointer);
-  padding: 1px 4px;
+  padding: 1px 8px;
   border-radius: 4px;
-  position: relative;
+  line-height: 24px;
   font-size: 14px;
-
-  &:before {
-    content: "·";
-    color: ${s("textTertiary")};
-    position: absolute;
-    left: -8px;
-  }
+  margin: 0 -8px;
 
   &:focus-visible {
     outline: none;

app/scenes/Search/components/RecentSearches.tsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import ArrowKeyNavigation from "~/components/ArrowKeyNavigation";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import useStores from "~/hooks/useStores";
 import RecentSearchListItem from "./RecentSearchListItem";
 
@@ -19,7 +19,6 @@ function RecentSearches(
 ) {
   const { searches } = useStores();
   const { t } = useTranslation();
-  const [isPreloaded] = React.useState(searches.recent.length > 0);
 
   React.useEffect(() => {
     void searches.fetchPage({
@@ -48,7 +47,11 @@ function RecentSearches(
     </>
   ) : null;
 
-  return isPreloaded ? content : <Fade>{content}</Fade>;
+  return (
+    <ConditionalFade animate={!searches.recent.length}>
+      {content}
+    </ConditionalFade>
+  );
 }
 
 const Heading = styled.h2`
@@ -56,7 +59,7 @@ const Heading = styled.h2`
   font-size: 14px;
   line-height: 1.5;
   color: ${s("textSecondary")};
-  margin-bottom: 0;
+  margin: 12px 0 0;
 `;
 
 const StyledArrowKeyNavigation = styled(ArrowKeyNavigation)`

app/scenes/Search/components/UserFilter.tsx

@@ -25,13 +25,13 @@ function UserFilter(props: Props) {
     const userOptions = users.all.map((user) => ({
       key: user.id,
       label: user.name,
-      icon: <Avatar model={user} size={AvatarSize.Small} />,
+      icon: <StyledAvatar model={user} size={AvatarSize.Small} />,
     }));
     return [
       {
         key: "",
         label: t("Any author"),
-        icon: <NoAuthor size={20} />,
+        icon: <UserIcon size={20} />,
       },
       ...userOptions,
     ];
@@ -43,7 +43,6 @@ function UserFilter(props: Props) {
       selectedKeys={[userId]}
       onSelect={onSelect}
       defaultLabel={t("Any author")}
-      selectedPrefix={`${t("Author")}:`}
       fetchQuery={users.fetchPage}
       fetchQueryOptions={fetchQueryOptions}
       showFilter
@@ -51,8 +50,8 @@ function UserFilter(props: Props) {
   );
 }
 
-const NoAuthor = styled(UserIcon)`
-  margin-left: -2px;
+const StyledAvatar = styled(Avatar)`
+  margin: 2px;
 `;
 
 export default observer(UserFilter);

app/scenes/Settings/Details.tsx

@@ -16,7 +16,7 @@ import DefaultCollectionInputSelect from "~/components/DefaultCollectionInputSel
 import Heading from "~/components/Heading";
 import Input from "~/components/Input";
 import InputColor from "~/components/InputColor";
-import InputSelect from "~/components/InputSelect";
+import { InputSelectNew, Option } from "~/components/InputSelectNew";
 import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
@@ -64,6 +64,27 @@ function Details() {
     team.getPreference(TeamPreference.TocPosition) as TOCPosition
   );
 
+  const tocPositionOptions: Option[] = React.useMemo(
+    () =>
+      [
+        {
+          type: "item",
+          label: t("Left"),
+          value: TOCPosition.Left,
+        },
+        {
+          type: "item",
+          label: t("Right"),
+          value: TOCPosition.Right,
+        },
+      ] satisfies Option[],
+    [t]
+  );
+
+  const handleTocPositionChange = React.useCallback((position: string) => {
+    setTocPosition(position as TOCPosition);
+  }, []);
+
   const handleSubmit = React.useCallback(
     async (event?: React.SyntheticEvent) => {
       if (event) {
@@ -123,9 +144,9 @@ function Details() {
     });
   };
 
-  const onSelectCollection = React.useCallback(async (value: string) => {
-    const defaultCollectionId = value === "home" ? null : value;
-    setDefaultCollectionId(defaultCollectionId);
+  const onSelectCollection = React.useCallback((value: string) => {
+    const selectedValue = value === "home" ? null : value;
+    setDefaultCollectionId(selectedValue);
   }, []);
 
   const isValid = form.current?.checkValidity();
@@ -242,20 +263,13 @@ function Details() {
               "The side to display the table of contents in relation to the main content."
             )}
           >
-            <InputSelect
-              ariaLabel={t("Table of contents position")}
-              options={[
-                {
-                  label: t("Left"),
-                  value: TOCPosition.Left,
-                },
-                {
-                  label: t("Right"),
-                  value: TOCPosition.Right,
-                },
-              ]}
+            <InputSelectNew
+              options={tocPositionOptions}
               value={tocPosition}
-              onChange={(p: TOCPosition) => setTocPosition(p)}
+              onChange={handleTocPositionChange}
+              ariaLabel={t("Table of contents position")}
+              label={t("Table of contents position")}
+              hideLabel
             />
           </SettingRow>
 
@@ -298,7 +312,6 @@ function Details() {
             )}
           >
             <DefaultCollectionInputSelect
-              id="defaultCollectionId"
               onSelectCollection={onSelectCollection}
               defaultCollectionId={defaultCollectionId}
             />

app/scenes/Settings/Groups.tsx

@@ -10,6 +10,7 @@ import Group from "~/models/Group";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
 import Empty from "~/components/Empty";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
 import InputSearch from "~/components/InputSearch";
 import Scene from "~/components/Scene";
@@ -149,15 +150,17 @@ function Groups() {
               onChange={handleSearch}
             />
           </StickyFilters>
-          <GroupsTable
-            data={data ?? []}
-            sort={sort}
-            loading={loading}
-            page={{
-              hasNext: !!next,
-              fetchNext: next,
-            }}
-          />
+          <ConditionalFade animate={!data}>
+            <GroupsTable
+              data={data ?? []}
+              sort={sort}
+              loading={loading}
+              page={{
+                hasNext: !!next,
+                fetchNext: next,
+              }}
+            />
+          </ConditionalFade>
         </>
       )}
     </Scene>

app/scenes/Settings/Import.tsx

@@ -1,10 +1,13 @@
+import orderBy from "lodash/orderBy";
 import { observer } from "mobx-react";
 import { NewDocumentIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { Pagination } from "@shared/constants";
 import { FileOperationType } from "@shared/types";
 import { cdnPath } from "@shared/utils/urls";
 import FileOperation from "~/models/FileOperation";
+import ImportModel from "~/models/Import";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
@@ -15,16 +18,146 @@ import Scene from "~/components/Scene";
 import Text from "~/components/Text";
 import env from "~/env";
 import useStores from "~/hooks/useStores";
+import { Hook, PluginManager } from "~/utils/PluginManager";
 import FileOperationListItem from "./components/FileOperationListItem";
 import ImportJSONDialog from "./components/ImportJSONDialog";
+import { ImportListItem } from "./components/ImportListItem";
 import ImportMarkdownDialog from "./components/ImportMarkdownDialog";
-import ImportNotionDialog from "./components/ImportNotionDialog";
+
+type Config = {
+  /** The title of the import. */
+  title: string;
+  /** The auxiliary descriptive text of the import. */
+  subtitle: string;
+  /** An icon to denote the kind of import. */
+  icon: React.ReactElement;
+  /** Trigger for the import. */
+  action: React.ReactElement;
+};
+
+function useImportsConfig() {
+  const { t } = useTranslation();
+  const { dialogs } = useStores();
+  const appName = env.APP_NAME;
+
+  return React.useMemo(() => {
+    const items: Config[] = [
+      {
+        title: t("Markdown"),
+        subtitle: t(
+          "Import a zip file of Markdown documents (exported from version 0.67.0 or earlier)"
+        ),
+        icon: <MarkdownIcon size={28} />,
+        action: (
+          <Button
+            type="submit"
+            onClick={() => {
+              dialogs.openModal({
+                title: t("Import data"),
+                content: <ImportMarkdownDialog />,
+              });
+            }}
+            neutral
+          >
+            {t("Import")}…
+          </Button>
+        ),
+      },
+      {
+        title: "JSON",
+        subtitle: t(
+          "Import a JSON data file exported from another {{ appName }} instance",
+          {
+            appName,
+          }
+        ),
+        icon: <OutlineIcon size={28} cover />,
+        action: (
+          <Button
+            type="submit"
+            onClick={() => {
+              dialogs.openModal({
+                title: t("Import data"),
+                content: <ImportJSONDialog />,
+              });
+            }}
+            neutral
+          >
+            {t("Import")}…
+          </Button>
+        ),
+      },
+    ];
+
+    PluginManager.getHooks(Hook.Imports).forEach((plugin) => {
+      items.push({ ...plugin.value });
+    });
+
+    items.push({
+      title: "Confluence",
+      subtitle: t("Import pages from a Confluence instance"),
+      icon: <img src={cdnPath("/images/confluence.png")} width={28} />,
+      action: (
+        <Button type="submit" disabled neutral>
+          {t("Enterprise")}
+        </Button>
+      ),
+    });
+
+    return items;
+  }, [t, dialogs, appName]);
+}
 
 function Import() {
   const { t } = useTranslation();
-  const { dialogs, fileOperations } = useStores();
+  const { fileOperations, imports } = useStores();
+  const configs = useImportsConfig();
   const appName = env.APP_NAME;
 
+  const [, setForceRender] = React.useState(0);
+  const offset = React.useMemo(() => ({ imports: 0, fileOperations: 0 }), []);
+
+  const fetchImports = React.useCallback(async () => {
+    const [importsArr, fileOpsArr] = await Promise.all([
+      imports.fetchPage({
+        offset: offset.imports,
+        limit: Pagination.defaultLimit,
+      }),
+      fileOperations.fetchPage({
+        type: FileOperationType.Import,
+        offset: offset.fileOperations,
+        limit: Pagination.defaultLimit,
+      }),
+    ]);
+
+    const pageImports = orderBy(
+      [...importsArr, ...fileOpsArr],
+      "createdAt",
+      "desc"
+    ).slice(0, Pagination.defaultLimit);
+
+    const apiImportsCount = pageImports.filter(
+      (item) => item instanceof ImportModel
+    ).length;
+
+    offset.imports += apiImportsCount;
+    offset.fileOperations += pageImports.length - apiImportsCount;
+
+    // needed to re-render after mobx store and offset is updated
+    setForceRender((s) => ++s);
+
+    return pageImports;
+  }, [imports, fileOperations, offset]);
+
+  const allImports = orderBy(
+    [
+      ...imports.orderedData,
+      ...fileOperations.filter({ type: FileOperationType.Import }),
+    ],
+    "createdAt",
+    "desc"
+  ).slice(0, offset.imports + offset.fileOperations);
+
   return (
     <Scene title={t("Import")} icon={<NewDocumentIcon />}>
       <Heading>{t("Import")}</Heading>
@@ -38,100 +171,33 @@ function Import() {
       </Text>
 
       <div>
-        <Item
-          border={false}
-          image={<MarkdownIcon size={28} />}
-          title={t("Markdown")}
-          subtitle={t(
-            "Import a zip file of Markdown documents (exported from version 0.67.0 or earlier)"
-          )}
-          actions={
-            <Button
-              type="submit"
-              onClick={() => {
-                dialogs.openModal({
-                  title: t("Import data"),
-                  content: <ImportMarkdownDialog />,
-                });
-              }}
-              neutral
-            >
-              {t("Import")}…
-            </Button>
-          }
-        />
-        <Item
-          border={false}
-          image={<OutlineIcon size={28} cover />}
-          title="JSON"
-          subtitle={t(
-            "Import a JSON data file exported from another {{ appName }} instance",
-            {
-              appName,
-            }
-          )}
-          actions={
-            <Button
-              type="submit"
-              onClick={() => {
-                dialogs.openModal({
-                  title: t("Import data"),
-                  content: <ImportJSONDialog />,
-                });
-              }}
-              neutral
-            >
-              {t("Import")}…
-            </Button>
-          }
-        />
-        <Item
-          border={false}
-          image={<img src={cdnPath("/images/notion.png")} width={28} />}
-          title="Notion"
-          subtitle={t("Import pages exported from Notion")}
-          actions={
-            <Button
-              type="submit"
-              onClick={() => {
-                dialogs.openModal({
-                  title: t("Import data"),
-                  content: <ImportNotionDialog />,
-                });
-              }}
-              neutral
-            >
-              {t("Import")}…
-            </Button>
-          }
-        />
-        <Item
-          border={false}
-          image={<img src={cdnPath("/images/confluence.png")} width={28} />}
-          title="Confluence"
-          subtitle={t("Import pages from a Confluence instance")}
-          actions={
-            <Button type="submit" disabled neutral>
-              {t("Enterprise")}
-            </Button>
-          }
-        />
+        {configs.map((config) => (
+          <Item
+            key={config.title}
+            title={config.title}
+            subtitle={config.subtitle}
+            image={config.icon}
+            actions={config.action}
+            border={false}
+          />
+        ))}
       </div>
       <br />
       <PaginatedList
-        items={fileOperations.imports}
-        fetch={fileOperations.fetchPage}
-        options={{
-          type: FileOperationType.Import,
-        }}
+        items={allImports}
+        fetch={fetchImports}
         heading={
           <h2>
             <Trans>Recent imports</Trans>
           </h2>
         }
-        renderItem={(item: FileOperation) => (
-          <FileOperationListItem key={item.id} fileOperation={item} />
-        )}
+        renderItem={(item: ImportModel | FileOperation) =>
+          item instanceof ImportModel ? (
+            <ImportListItem key={item.id} importModel={item} />
+          ) : (
+            <FileOperationListItem key={item.id} fileOperation={item} />
+          )
+        }
       />
     </Scene>
   );

app/scenes/Settings/Members.tsx

@@ -9,7 +9,7 @@ import styled from "styled-components";
 import UsersStore, { queriedUsers } from "~/stores/UsersStore";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
 import InputSearch from "~/components/InputSearch";
 import Scene from "~/components/Scene";
@@ -22,7 +22,7 @@ import usePolicy from "~/hooks/usePolicy";
 import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
 import { useTableRequest } from "~/hooks/useTableRequest";
-import { PeopleTable } from "./components/PeopleTable";
+import { MembersTable } from "./components/MembersTable";
 import { StickyFilters } from "./components/StickyFilters";
 import UserRoleFilter from "./components/UserRoleFilter";
 import UserStatusFilter from "./components/UserStatusFilter";
@@ -163,8 +163,8 @@ function Members() {
           onSelect={handleRoleFilter}
         />
       </StickyFilters>
-      <Fade>
-        <PeopleTable
+      <ConditionalFade animate={!data}>
+        <MembersTable
           data={data ?? []}
           sort={sort}
           canManage={can.update}
@@ -174,7 +174,7 @@ function Members() {
             fetchNext: next,
           }}
         />
-      </Fade>
+      </ConditionalFade>
     </Scene>
   );
 }
@@ -194,7 +194,7 @@ function getFilteredUsers({
 
   switch (filter) {
     case "all":
-      filteredUsers = users.orderedData;
+      filteredUsers = users.all;
       break;
     case "suspended":
       filteredUsers = users.suspended;

app/scenes/Settings/Preferences.tsx

@@ -3,12 +3,12 @@ import { SettingsIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
-import { languageOptions } from "@shared/i18n";
+import { languageOptions as availableLanguages } from "@shared/i18n";
 import { TeamPreference, UserPreference } from "@shared/types";
 import { Theme } from "~/stores/UiStore";
 import Button from "~/components/Button";
 import Heading from "~/components/Heading";
-import InputSelect from "~/components/InputSelect";
+import { InputSelectNew, Option } from "~/components/InputSelectNew";
 import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
 import Text from "~/components/Text";
@@ -26,6 +26,29 @@ function Preferences() {
   const team = useCurrentTeam();
   const can = usePolicy(user.id);
 
+  const languageOptions: Option[] = React.useMemo(
+    () =>
+      availableLanguages.map(
+        (lang) =>
+          ({
+            type: "item",
+            label: lang.label,
+            value: lang.value,
+          } satisfies Option)
+      ),
+    []
+  );
+
+  const themeOptions: Option[] = React.useMemo(
+    () =>
+      [
+        { type: "item", label: t("Light"), value: Theme.Light },
+        { type: "item", label: t("Dark"), value: Theme.Dark },
+        { type: "item", label: t("System"), value: Theme.System },
+      ] satisfies Option[],
+    [t]
+  );
+
   const handlePreferenceChange =
     (inverted = false) =>
     async (ev: React.ChangeEvent<HTMLInputElement>) => {
@@ -37,10 +60,21 @@ function Preferences() {
       toast.success(t("Preferences saved"));
     };
 
-  const handleLanguageChange = async (language: string) => {
-    await user.save({ language });
-    toast.success(t("Preferences saved"));
-  };
+  const handleLanguageChange = React.useCallback(
+    async (language: string) => {
+      await user.save({ language });
+      toast.success(t("Preferences saved"));
+    },
+    [t, user]
+  );
+
+  const handleThemeChange = React.useCallback(
+    (theme) => {
+      ui.setTheme(theme as Theme);
+      toast.success(t("Preferences saved"));
+    },
+    [t, ui]
+  );
 
   const showDeleteAccount = () => {
     dialogs.openModal({
@@ -77,12 +111,13 @@ function Preferences() {
           </>
         }
       >
-        <InputSelect
-          id="language"
+        <InputSelectNew
           options={languageOptions}
           value={user.language}
           onChange={handleLanguageChange}
           ariaLabel={t("Language")}
+          label={t("Language")}
+          hideLabel
         />
       </SettingRow>
       <SettingRow
@@ -90,18 +125,13 @@ function Preferences() {
         label={t("Appearance")}
         description={t("Choose your preferred interface color scheme.")}
       >
-        <InputSelect
+        <InputSelectNew
+          options={themeOptions}
+          value={ui.theme}
+          onChange={handleThemeChange}
           ariaLabel={t("Appearance")}
-          options={[
-            { label: t("Light"), value: Theme.Light },
-            { label: t("Dark"), value: Theme.Dark },
-            { label: t("System"), value: Theme.System },
-          ]}
-          value={ui.resolvedTheme}
-          onChange={(theme) => {
-            ui.setTheme(theme as Theme);
-            toast.success(t("Preferences saved"));
-          }}
+          label={t("Appearance")}
+          hideLabel
         />
       </SettingRow>
       <SettingRow

app/scenes/Settings/Security.tsx

@@ -10,7 +10,7 @@ import { TeamPreference } from "@shared/types";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Flex from "~/components/Flex";
 import Heading from "~/components/Heading";
-import InputSelect from "~/components/InputSelect";
+import { InputSelectNew, Option } from "~/components/InputSelectNew";
 import PluginIcon from "~/components/PluginIcon";
 import Scene from "~/components/Scene";
 import Switch from "~/components/Switch";
@@ -44,6 +44,23 @@ function Security() {
     request,
   } = useRequest(authenticationProviders.fetchPage);
 
+  const userRoleOptions: Option[] = React.useMemo(
+    () =>
+      [
+        {
+          type: "item",
+          label: t("Editor"),
+          value: "member",
+        },
+        {
+          type: "item",
+          label: t("Viewer"),
+          value: "viewer",
+        },
+      ] satisfies Option[],
+    [t]
+  );
+
   React.useEffect(() => {
     if (!providers && !loading) {
       void request();
@@ -229,21 +246,13 @@ function Security() {
           )}
           border={false}
         >
-          <InputSelect
-            id="defaultUserRole"
+          <InputSelectNew
             value={data.defaultUserRole}
-            options={[
-              {
-                label: t("Editor"),
-                value: "member",
-              },
-              {
-                label: t("Viewer"),
-                value: "viewer",
-              },
-            ]}
+            options={userRoleOptions}
             onChange={handleDefaultRoleChange}
             ariaLabel={t("Default role")}
+            label={t("Default role")}
+            hideLabel
             short
           />
         </SettingRow>

app/scenes/Settings/Shares.tsx

@@ -3,10 +3,11 @@ import { observer } from "mobx-react";
 import { GlobeIcon, WarningIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
-import { Link } from "react-router-dom";
+import { Link, useHistory, useLocation } from "react-router-dom";
 import { toast } from "sonner";
-import Fade from "~/components/Fade";
+import { ConditionalFade } from "~/components/Fade";
 import Heading from "~/components/Heading";
+import InputSearch from "~/components/InputSearch";
 import Notice from "~/components/Notice";
 import Scene from "~/components/Scene";
 import Text from "~/components/Text";
@@ -16,17 +17,22 @@ import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
 import { useTableRequest } from "~/hooks/useTableRequest";
 import { SharesTable } from "./components/SharesTable";
+import { StickyFilters } from "./components/StickyFilters";
 
 function Shares() {
   const team = useCurrentTeam();
   const { t } = useTranslation();
+  const location = useLocation();
+  const history = useHistory();
   const { shares, auth } = useStores();
   const canShareDocuments = auth.team && auth.team.sharing;
   const can = usePolicy(team);
   const params = useQuery();
+  const [query, setQuery] = React.useState("");
 
   const reqParams = React.useMemo(
     () => ({
+      query: params.get("query") || undefined,
       sort: params.get("sort") || "createdAt",
       direction: (params.get("direction") || "desc").toUpperCase() as
         | "ASC"
@@ -44,18 +50,44 @@ function Shares() {
   );
 
   const { data, error, loading, next } = useTableRequest({
-    data: shares.orderedData,
+    data: shares.findByQuery(reqParams.query ?? ""),
     sort,
     reqFn: shares.fetchPage,
     reqParams,
   });
 
+  const updateParams = React.useCallback(
+    (name: string, value: string) => {
+      if (value) {
+        params.set(name, value);
+      } else {
+        params.delete(name);
+      }
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+    },
+    [params, history, location.pathname]
+  );
+
+  const handleSearch = React.useCallback((event) => {
+    const { value } = event.target;
+    setQuery(value);
+  }, []);
+
   React.useEffect(() => {
     if (error) {
       toast.error(t("Could not load shares"));
     }
   }, [t, error]);
 
+  React.useEffect(() => {
+    const timeout = setTimeout(() => updateParams("query", query), 250);
+    return () => clearTimeout(timeout);
+  }, [query, updateParams]);
+
   return (
     <Scene title={t("Shared Links")} icon={<GlobeIcon />} wide>
       <Heading>{t("Shared Links")}</Heading>
@@ -83,20 +115,26 @@ function Shares() {
         </Trans>
       </Text>
 
-      {data?.length ? (
-        <Fade>
-          <SharesTable
-            data={data ?? []}
-            sort={sort}
-            canManage={can.update}
-            loading={loading}
-            page={{
-              hasNext: !!next,
-              fetchNext: next,
-            }}
-          />
-        </Fade>
-      ) : null}
+      <StickyFilters gap={8}>
+        <InputSearch
+          short
+          value={query}
+          placeholder={`${t("Filter")}…`}
+          onChange={handleSearch}
+        />
+      </StickyFilters>
+      <ConditionalFade animate={!data}>
+        <SharesTable
+          data={data ?? []}
+          sort={sort}
+          canManage={can.update}
+          loading={loading}
+          page={{
+            hasNext: !!next,
+            fetchNext: next,
+          }}
+        />
+      </ConditionalFade>
     </Scene>
   );
 }