Types cleanup

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,37 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: bug
+assignees: ''
+
+---
+
+A clear and concise description of what the bug is.
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots or videos to help explain your problem.
+
+**Outline (please complete the following information):**
+- Install: [getoutline.com or self hosted]
+- Version: [commit sha if self hosted]
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Mobile (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -1,63 +0,0 @@
-name: Bug report
-description: File a bug to help us improve
-labels: ["bug"]
-body:
-- type: checkboxes
-  attributes:
-    label: Is there an existing issue for this?
-    description: Please search to see if an issue already exists for the bug you encountered.
-    options:
-    - label: I have searched the existing issues
-      required: true
-- type: checkboxes
-  attributes:
-    label: This is not related to configuring Outline
-    description: I understand that questions related to configuring self-hosted Outline should be asked in the [community forum](https://github.com/outline/outline/discussions/categories/self-hosting).
-    options:
-    - label: The issue is not related to self-hosting config
-      required: true
-- type: textarea
-  attributes:
-    label: Current Behavior
-    description: A concise description of what you're experiencing.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Expected Behavior
-    description: A concise description of what you expected to happen.
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Steps To Reproduce
-    description: Steps to reproduce the behavior.
-    placeholder: |
-      1. In this environment...
-      1. With this config...
-      1. Run '...'
-      1. See error...
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Environment
-    description: |
-      examples:
-        - **Outline**: Outline 0.80.0
-        - **Browser**: Safari
-    value: |
-        - Outline:
-        - Browser:
-    render: markdown
-  validations:
-    required: false
-- type: textarea
-  attributes:
-    label: Anything else?
-    description: |
-      Links? References? Anything that will give us more context about the issue you are encountering!
-
-      Tip: You can attach images or log files by clicking this area to highlight it and then dragging files in.
-  validations:
-    required: false

app/actions/definitions/comments.tsx

@@ -53,13 +53,9 @@ export const resolveCommentFactory = ({
     perform: async ({ t }) => {
       await comment.resolve();
 
-      const locationState = history.location.state as Record<string, unknown>;
       history.replace({
         ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
+        state: null,
       });
 
       onResolve();
@@ -85,13 +81,9 @@ export const unresolveCommentFactory = ({
     perform: async () => {
       await comment.unresolve();
 
-      const locationState = history.location.state as Record<string, unknown>;
       history.replace({
         ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
+        state: null,
       });
 
       onUnresolve();

app/actions/definitions/documents.tsx

@@ -32,7 +32,6 @@ import {
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
-import Icon from "@shared/components/Icon";
 import {
   ExportContentType,
   TeamPreference,
@@ -46,7 +45,8 @@ import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
+import DuplicateDialog from "~/components/DuplicateDialog";
+import Icon from "~/components/Icon";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
 import { getHeaderExpandedKey } from "~/components/Sidebar/components/Header";
@@ -562,7 +562,7 @@ export const duplicateDocument = createAction({
     stores.dialogs.openModal({
       title: t("Copy document"),
       content: (
-        <DocumentCopy
+        <DuplicateDialog
           document={document}
           onSubmit={(response) => {
             stores.dialogs.closeAllModals();
@@ -732,6 +732,7 @@ export const importDocument = createAction({
         history.push(document.url);
       } catch (err) {
         toast.error(err.message);
+        throw err;
       }
     };
 
@@ -1053,7 +1054,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
   },
 });
 

app/actions/sections.ts

@@ -13,8 +13,6 @@ export const DeveloperSection = ({ t }: ActionContext) => t("Debug");
 
 export const DocumentSection = ({ t }: ActionContext) => t("Document");
 
-export const DocumentsSection = ({ t }: ActionContext) => t("Documents");
-
 export const ActiveDocumentSection = ({ t, stores }: ActionContext) => {
   const activeDocument = stores.documents.active;
   return `${t("Document")} · ${activeDocument?.titleWithDefault}`;
@@ -36,8 +34,6 @@ export const NotificationSection = ({ t }: ActionContext) => t("Notification");
 
 export const UserSection = ({ t }: ActionContext) => t("People");
 
-UserSection.priority = 0.5;
-
 export const TeamSection = ({ t }: ActionContext) => t("Workspace");
 
 export const RecentSearchesSection = ({ t }: ActionContext) =>

app/components/Actions.ts

@@ -31,6 +31,7 @@ const Actions = styled(Flex)`
   left: 0;
   border-radius: 3px;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   padding: 12px;
   backdrop-filter: blur(20px);
 

app/components/Authenticated.tsx

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

app/components/AuthenticatedLayout.tsx

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

app/components/Breadcrumb.tsx

@@ -8,16 +8,18 @@ import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";
 
-type Props = React.PropsWithChildren<{
+type Props = {
   items: MenuInternalLink[];
   max?: number;
   highlightFirstItem?: boolean;
-}>;
+};
 
-function Breadcrumb(
-  { items, highlightFirstItem, children, max = 2 }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
   const totalItems = items.length;
   const topLevelItems: MenuInternalLink[] = [...items];
   let overflowItems;
@@ -35,13 +37,9 @@ function Breadcrumb(
   }
 
   return (
-    <Flex justify="flex-start" align="center" ref={ref}>
+    <Flex justify="flex-start" align="center">
       {topLevelItems.map((item, index) => (
-        <React.Fragment
-          key={
-            (typeof item.to === "string" ? item.to : item.to.pathname) || index
-          }
-        >
+        <React.Fragment key={String(item.to) || index}>
           {item.icon}
           {item.to ? (
             <Item
@@ -69,8 +67,6 @@ const Slash = styled(GoToIcon)`
 
 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   ${ellipsis()}
-  ${undraggableOnDesktop()}
-
   display: flex;
   flex-shrink: 1;
   min-width: 0;
@@ -80,6 +76,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   height: 24px;
   font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
   margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+  ${undraggableOnDesktop()}
 
   svg {
     flex-shrink: 0;
@@ -90,4 +87,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
   }
 `;
 
-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default Breadcrumb;

app/components/Collaborators.tsx

@@ -18,8 +18,6 @@ import useStores from "~/hooks/useStores";
 type Props = {
   /** The document to display live collaborators for */
   document: Document;
-  /** The maximum number of collaborators to display, defaults to 6 */
-  limit?: number;
 };
 
 /**
@@ -27,7 +25,6 @@ type Props = {
  * and presence status.
  */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
@@ -78,6 +75,8 @@ function Collaborators(props: Props) {
     placement: "bottom-end",
   });
 
+  const limit = 8;
+
   return (
     <>
       <PopoverDisclosure {...popover}>
@@ -89,7 +88,6 @@ function Collaborators(props: Props) {
           >
             <Facepile
               limit={limit}
-              overflow={collaborators.length - limit}
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);

app/components/Collection/CollectionForm.tsx

@@ -3,7 +3,6 @@ import * as React from "react";
 import { Controller, useForm } from "react-hook-form";
 import { Trans, useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import { randomElement } from "@shared/random";
 import { CollectionPermission } from "@shared/types";
 import { IconLibrary } from "@shared/utils/IconLibrary";
@@ -12,6 +11,7 @@ import { CollectionValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import Input from "~/components/Input";
 import InputSelectPermission from "~/components/InputSelectPermission";
 import Switch from "~/components/Switch";

app/components/CollectionDescription.tsx

@@ -201,6 +201,7 @@ const Input = styled.div`
   margin: -8px;
   padding: 8px;
   border-radius: 8px;
+  transition: ${s("backgroundTransition")};
 
   &:after {
     content: "";

app/components/CommandBar/useRecentDocumentActions.tsx

@@ -1,6 +1,6 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import { RecentSection } from "~/actions/sections";
 import useStores from "~/hooks/useStores";

app/components/CommandBar/useTemplatesAction.tsx

@@ -1,6 +1,6 @@
 import { NewDocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
 import {
   ActiveCollectionSection,

app/components/ConfirmationDialog.tsx

@@ -8,8 +8,8 @@ import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
 
 type Props = {
-  /** Callback when the dialog is submitted. Return false to prevent closing. */
-  onSubmit: () => Promise<void | boolean> | void;
+  /** Callback when the dialog is submitted */
+  onSubmit: () => Promise<void> | void;
   /** Text to display on the submit button */
   submitText?: string;
   /** Text to display while the form is saving */
@@ -38,10 +38,7 @@ const ConfirmationDialog: React.FC<Props> = ({
       ev.preventDefault();
       setIsSaving(true);
       try {
-        const res = await onSubmit();
-        if (res === false) {
-          return;
-        }
+        await onSubmit();
         dialogs.closeAllModals();
       } catch (err) {
         toast.error(err.message);

app/components/ContentEditable.tsx

@@ -182,6 +182,7 @@ function placeCaret(element: HTMLElement, atStart: boolean) {
 
 const Content = styled.span`
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   color: ${s("text")};
   -webkit-text-fill-color: ${s("text")};
   outline: none;

app/components/ContextMenu/MenuItem.tsx

@@ -23,7 +23,7 @@ type Props = {
   as?: string | React.ComponentType<any>;
   hide?: () => void;
   level?: number;
-  icon?: React.ReactNode;
+  icon?: React.ReactElement;
   children?: React.ReactNode;
   ref?: React.LegacyRef<HTMLButtonElement> | undefined;
 };
@@ -109,8 +109,6 @@ const Title = styled.div`
   ${ellipsis()}
   flex-grow: 1;
   display: flex;
-  align-items: center;
-  gap: 8px;
 `;
 
 type MenuAnchorProps = {

app/components/ContextMenu/index.tsx

@@ -262,6 +262,22 @@ export const Position = styled.div`
     transition-property: outline-width;
     transition-duration: 0;
     outline: none;
+
+    &:after {
+      content: "";
+      position: absolute;
+      top: 1px;
+      left: 1px;
+      right: 1px;
+      bottom: 1px;
+      pointer-events: none;
+      border-radius: 4px;
+
+      outline-color: ${s("accent")};
+      outline-width: initial;
+      outline-offset: -1px;
+      outline-style: solid;
+    }
   }
 
   /*

app/components/DocumentBreadcrumb.tsx

@@ -3,16 +3,20 @@ import { ArchiveIcon, GoToIcon, ShapesIcon, TrashIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import type { NavigationNode } from "@shared/types";
 import Document from "~/models/Document";
 import Breadcrumb from "~/components/Breadcrumb";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import { MenuInternalLink } from "~/types";
-import { archivePath, settingsPath, trashPath } from "~/utils/routeHelpers";
+import {
+  archivePath,
+  collectionPath,
+  settingsPath,
+  trashPath,
+} from "~/utils/routeHelpers";
 
 type Props = {
   children?: React.ReactNode;
@@ -53,14 +57,14 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}: Props) => {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
-  const sidebarContext = useLocationSidebarContext();
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
@@ -77,10 +81,7 @@ function DocumentBreadcrumb(
       type: "route",
       title: collection.name,
       icon: <CollectionIcon collection={collection} expanded />,
-      to: {
-        pathname: collection.path,
-        state: { sidebarContext },
-      },
+      to: collectionPath(collection.path),
     };
   } else if (document.isCollectionDeleted) {
     collectionNode = {
@@ -114,14 +115,11 @@ function DocumentBreadcrumb(
         ) : (
           node.title
         ),
-        to: {
-          pathname: node.url,
-          state: { sidebarContext },
-        },
+        to: node.url,
       });
     });
     return output;
-  }, [path, category, sidebarContext, collectionNode]);
+  }, [path, category, collectionNode]);
 
   if (!collections.isLoaded) {
     return null;
@@ -142,11 +140,11 @@ function DocumentBreadcrumb(
   }
 
   return (
-    <Breadcrumb items={items} ref={ref} highlightFirstItem>
+    <Breadcrumb items={items} highlightFirstItem>
       {children}
     </Breadcrumb>
   );
-}
+};
 
 const StyledIcon = styled(Icon)`
   margin-right: 2px;
@@ -162,4 +160,4 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.5;
 `;
 
-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);

app/components/DocumentCard.tsx

@@ -7,17 +7,18 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
 import Squircle from "@shared/components/Squircle";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Document from "~/models/Document";
 import Pin from "~/models/Pin";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Time from "~/components/Time";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import CollectionIcon from "./Icons/CollectionIcon";
 import Text from "./Text";
 import Tooltip from "./Tooltip";
@@ -143,7 +144,12 @@ function DocumentCard(props: Props) {
               </Heading>
               <DocumentMeta size="xsmall">
                 <Clock size={18} />
-                <Time dateTime={document.updatedAt} addSuffix shorten />
+                <Time
+                  dateTime={document.updatedAt}
+                  tooltipDelay={500}
+                  addSuffix
+                  shorten
+                />
               </DocumentMeta>
             </div>
           </Content>

app/components/DocumentCopy.tsx

@@ -1,149 +0,0 @@
-import flatten from "lodash/flatten";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import styled from "styled-components";
-import { NavigationNode } from "@shared/types";
-import Document from "~/models/Document";
-import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
-import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
-import useCollectionTrees from "~/hooks/useCollectionTrees";
-import useStores from "~/hooks/useStores";
-import { flattenTree } from "~/utils/tree";
-import Switch from "./Switch";
-import Text from "./Text";
-
-type Props = {
-  /** The original document to duplicate */
-  document: Document;
-  onSubmit: (documents: Document[]) => void;
-};
-
-function DocumentCopy({ document, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const { policies } = useStores();
-  const collectionTrees = useCollectionTrees();
-  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
-  const [recursive, setRecursive] = React.useState<boolean>(true);
-  const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
-    null
-  );
-
-  const items = React.useMemo(() => {
-    const nodes = flatten(collectionTrees.map(flattenTree)).filter((node) =>
-      node.collectionId
-        ? policies.get(node.collectionId)?.abilities.createDocument
-        : true
-    );
-
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
-    return nodes;
-  }, [policies, collectionTrees, document.isTemplate]);
-
-  const handlePublishChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setPublish(ev.target.checked);
-    },
-    []
-  );
-
-  const handleRecursiveChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setRecursive(ev.target.checked);
-    },
-    []
-  );
-
-  const copy = async () => {
-    if (!selectedPath) {
-      toast.message(t("Select a location to copy"));
-      return;
-    }
-
-    try {
-      const result = await document.duplicate({
-        publish,
-        recursive,
-        title: document.title,
-        collectionId: selectedPath.collectionId,
-        ...(selectedPath.type === "document"
-          ? { parentDocumentId: selectedPath.id }
-          : {}),
-      });
-
-      toast.success(t("Document copied"));
-      onSubmit(result);
-    } catch (err) {
-      toast.error(t("Couldn’t copy the document, try again?"));
-    }
-  };
-
-  return (
-    <FlexContainer column>
-      <DocumentExplorer
-        items={items}
-        onSubmit={copy}
-        onSelect={selectPath}
-        defaultValue={document.parentDocumentId || document.collectionId || ""}
-      />
-      <OptionsContainer>
-        {!document.isTemplate && (
-          <>
-            {document.collectionId && (
-              <Text size="small">
-                <Switch
-                  name="publish"
-                  label={t("Publish")}
-                  labelPosition="right"
-                  checked={publish}
-                  onChange={handlePublishChange}
-                />
-              </Text>
-            )}
-            {document.publishedAt && document.childDocuments.length > 0 && (
-              <Text size="small">
-                <Switch
-                  name="recursive"
-                  label={t("Include nested documents")}
-                  labelPosition="right"
-                  checked={recursive}
-                  onChange={handleRecursiveChange}
-                />
-              </Text>
-            )}
-          </>
-        )}
-      </OptionsContainer>
-      <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
-          {selectedPath ? (
-            <Trans
-              defaults="Copy to <em>{{ location }}</em>"
-              values={{ location: selectedPath.title }}
-              components={{ em: <strong /> }}
-            />
-          ) : (
-            t("Select a location to copy")
-          )}
-        </StyledText>
-        <Button disabled={!selectedPath} onClick={copy}>
-          {t("Copy")}
-        </Button>
-      </Footer>
-    </FlexContainer>
-  );
-}
-
-const OptionsContainer = styled.div`
-  margin: 16px 0 8px 0;
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export default observer(DocumentCopy);

app/components/DocumentExplorer.tsx

@@ -14,32 +14,32 @@ import { FixedSizeList as List } from "react-window";
 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 { isModKey } from "@shared/utils/keyboard";
 import DocumentExplorerNode from "~/components/DocumentExplorerNode";
 import DocumentExplorerSearchResult from "~/components/DocumentExplorerSearchResult";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import { Outline } from "~/components/Input";
 import InputSearch from "~/components/InputSearch";
 import Text from "~/components/Text";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
+import { isModKey } from "~/utils/keyboard";
 import { ancestors, descendants } from "~/utils/tree";
 
 type Props = {
   /** Action taken upon submission of selected item, could be publish, move etc. */
   onSubmit: () => void;
+
   /** A side-effect of item selection */
   onSelect: (item: NavigationNode | null) => void;
+
   /** Items to be shown in explorer */
   items: NavigationNode[];
-  /** Automatically expand to and select item with the given id */
-  defaultValue?: string;
 };
 
-function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
   const isMobile = useMobile();
   const { collections, documents } = useStores();
   const { t } = useTranslation();
@@ -47,25 +47,12 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
 
   const [searchTerm, setSearchTerm] = React.useState<string>();
   const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    () => {
-      const node =
-        defaultValue && items.find((item) => item.id === defaultValue);
-      return node || null;
-    }
+    null
   );
   const [initialScrollOffset, setInitialScrollOffset] =
     React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
-    if (defaultValue) {
-      const node = items.find((item) => item.id === defaultValue);
-      if (node) {
-        return ancestors(node).map((node) => node.id);
-      }
-    }
-    return [];
-  });
-
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
   const [itemRefs, setItemRefs] = React.useState<
     React.RefObject<HTMLSpanElement>[]
   >([]);
@@ -107,15 +94,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
     onSelect(selectedNode);
   }, [selectedNode, onSelect]);
 
-  React.useEffect(() => {
-    if (defaultValue && selectedNode && listRef) {
-      const index = nodes.findIndex((node) => node.id === selectedNode.id);
-      if (index > 0) {
-        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
-      }
-    }
-  }, []);
-
   function getNodes() {
     function includeDescendants(item: NavigationNode): NavigationNode[] {
       return expandedNodes.includes(item.id)

app/components/DocumentListItem.tsx

@@ -9,22 +9,21 @@ import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import EventBoundary from "@shared/components/EventBoundary";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Badge from "~/components/Badge";
 import DocumentMeta from "~/components/DocumentMeta";
 import Flex from "~/components/Flex";
 import Highlight from "~/components/Highlight";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import StarButton, { AnimatedStar } from "~/components/Star";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
+import { hover } from "~/styles";
 import { documentPath } from "~/utils/routeHelpers";
-import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
 
 type Props = {
   document: Document;
@@ -51,7 +50,6 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
-  const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
   let itemRef: React.Ref<HTMLAnchorElement> =
@@ -80,12 +78,6 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar = !document.isArchived && !document.isTemplate;
 
-  const sidebarContext = determineSidebarContext({
-    document,
-    user,
-    currentContext: locationSidebarContext,
-  });
-
   return (
     <DocumentLink
       ref={itemRef}
@@ -97,7 +89,6 @@ function DocumentListItem(
         pathname: documentPath(document),
         state: {
           title: document.titleWithDefault,
-          sidebarContext,
         },
       }}
       {...rest}
@@ -120,7 +111,11 @@ function DocumentListItem(
             <Badge yellow>{t("New")}</Badge>
           )}
           {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
+            <Tooltip
+              content={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
               <Badge>{t("Draft")}</Badge>
             </Tooltip>
           )}

app/components/DocumentMeta.tsx

@@ -185,9 +185,9 @@ const DocumentMeta: React.FC<Props> = ({
       {showCollection && collection && (
         <span>
           &nbsp;{t("in")}&nbsp;
-          <Strong>
+          <strong>
             <DocumentBreadcrumb document={document} onlyText />
-          </Strong>
+          </strong>
         </span>
       )}
       {showParentDocuments && nestedDocumentsCount > 0 && (
@@ -210,10 +210,6 @@ const DocumentMeta: React.FC<Props> = ({
   );
 };
 
-const Strong = styled.strong`
-  font-weight: 550;
-`;
-
 const Container = styled(Flex)<{ rtl?: boolean }>`
   justify-content: ${(props) => (props.rtl ? "flex-end" : "flex-start")};
   color: ${s("textTertiary")};

app/components/DuplicateDialog.tsx

@@ -0,0 +1,97 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DocumentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "./Input";
+import Switch from "./Switch";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DuplicateDialog({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const defaultTitle = t(`Copy of {{ documentName }}`, {
+    documentName: document.title,
+  });
+  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  const handlePublishChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setPublish(ev.target.checked);
+    },
+    []
+  );
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
+  const handleTitleChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(ev.target.value);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const result = await document.duplicate({
+      publish,
+      recursive,
+      title,
+    });
+    onSubmit(result);
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
+      <Input
+        autoFocus
+        autoSelect
+        name="title"
+        label={t("Title")}
+        onChange={handleTitleChange}
+        maxLength={DocumentValidation.maxTitleLength}
+        defaultValue={defaultTitle}
+      />
+      {!document.isTemplate && (
+        <>
+          {document.collectionId && (
+            <Text size="small">
+              <Switch
+                name="publish"
+                label={t("Publish")}
+                labelPosition="right"
+                checked={publish}
+                onChange={handlePublishChange}
+              />
+            </Text>
+          )}
+          {document.publishedAt && document.childDocuments.length > 0 && (
+            <Text size="small">
+              <Switch
+                name="recursive"
+                label={t("Include nested documents")}
+                labelPosition="right"
+                checked={recursive}
+                onChange={handleRecursiveChange}
+              />
+            </Text>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);

app/components/Editor.tsx

@@ -1,4 +1,6 @@
+import deburr from "lodash/deburr";
 import difference from "lodash/difference";
+import sortBy from "lodash/sortBy";
 import { observer } from "mobx-react";
 import { DOMParser as ProsemirrorDOMParser } from "prosemirror-model";
 import { TextSelection } from "prosemirror-state";
@@ -7,7 +9,10 @@ import { mergeRefs } from "react-merge-refs";
 import { Optional } from "utility-types";
 import insertFiles from "@shared/editor/commands/insertFiles";
 import { AttachmentPreset } from "@shared/types";
+import { dateLocale, dateToRelative } from "@shared/utils/date";
 import { getDataTransferFiles } from "@shared/utils/files";
+import parseDocumentSlug from "@shared/utils/parseDocumentSlug";
+import { isInternalUrl } from "@shared/utils/urls";
 import { AttachmentValidation } from "@shared/validations";
 import ClickablePadding from "~/components/ClickablePadding";
 import ErrorBoundary from "~/components/ErrorBoundary";
@@ -17,8 +22,12 @@ import useDictionary from "~/hooks/useDictionary";
 import useEditorClickHandlers from "~/hooks/useEditorClickHandlers";
 import useEmbeds from "~/hooks/useEmbeds";
 import useStores from "~/hooks/useStores";
+import useUserLocale from "~/hooks/useUserLocale";
+import { NotFoundError } from "~/utils/errors";
 import { uploadFile } from "~/utils/files";
 import lazyWithRetry from "~/utils/lazyWithRetry";
+import DocumentBreadcrumb from "./DocumentBreadcrumb";
+import Icon from "./Icon";
 
 const LazyLoadedEditor = lazyWithRetry(() => import("~/editor"));
 
@@ -41,13 +50,76 @@ export type Props = Optional<
 function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
   const { id, shareId, onChange, onCreateCommentMark, onDeleteCommentMark } =
     props;
-  const { comments } = useStores();
+  const userLocale = useUserLocale();
+  const locale = dateLocale(userLocale);
+  const { comments, documents } = useStores();
   const dictionary = useDictionary();
   const embeds = useEmbeds(!shareId);
   const localRef = React.useRef<SharedEditor>();
   const preferences = useCurrentUser({ rejectOnEmpty: false })?.preferences;
   const previousCommentIds = React.useRef<string[]>();
 
+  const handleSearchLink = React.useCallback(
+    async (term: string) => {
+      if (isInternalUrl(term)) {
+        // search for exact internal document
+        const slug = parseDocumentSlug(term);
+        if (!slug) {
+          return [];
+        }
+
+        try {
+          const document = await documents.fetch(slug);
+          const time = dateToRelative(Date.parse(document.updatedAt), {
+            addSuffix: true,
+            shorten: true,
+            locale,
+          });
+
+          return [
+            {
+              title: document.title,
+              subtitle: `Updated ${time}`,
+              url: document.url,
+              icon: document.icon ? (
+                <Icon
+                  value={document.icon}
+                  color={document.color ?? undefined}
+                />
+              ) : undefined,
+            },
+          ];
+        } catch (error) {
+          // NotFoundError could not find document for slug
+          if (!(error instanceof NotFoundError)) {
+            throw error;
+          }
+        }
+      }
+
+      // default search for anything that doesn't look like a URL
+      const results = await documents.searchTitles({ query: term });
+
+      return sortBy(
+        results.map(({ document }) => ({
+          title: document.title,
+          subtitle: <DocumentBreadcrumb document={document} onlyText />,
+          url: document.url,
+          icon: document.icon ? (
+            <Icon value={document.icon} color={document.color ?? undefined} />
+          ) : undefined,
+        })),
+        (document) =>
+          deburr(document.title)
+            .toLowerCase()
+            .startsWith(deburr(term).toLowerCase())
+            ? -1
+            : 1
+      );
+    },
+    [locale, documents]
+  );
+
   const handleUploadFile = React.useCallback(
     async (file: File) => {
       const result = await uploadFile(file, {
@@ -191,6 +263,7 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           dictionary={dictionary}
           {...props}
           onClickLink={handleClickLink}
+          onSearchLink={handleSearchLink}
           onChange={handleChange}
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}

app/components/EventListItem.tsx

@@ -13,15 +13,15 @@ import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import styled, { css } from "styled-components";
 import EventBoundary from "@shared/components/EventBoundary";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Document from "~/models/Document";
 import Event from "~/models/Event";
 import { Avatar } from "~/components/Avatar";
 import Item, { Actions, Props as ItemProps } from "~/components/List/Item";
 import Time from "~/components/Time";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import RevisionMenu from "~/menus/RevisionMenu";
+import { hover } from "~/styles";
 import Logger from "~/utils/Logger";
 import { documentHistoryPath } from "~/utils/routeHelpers";
 
@@ -35,7 +35,6 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
   const { t } = useTranslation();
   const { revisions } = useStores();
   const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
   const opts = {
     userName: event.actor.name,
   };
@@ -67,10 +66,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       );
       to = {
         pathname: documentHistoryPath(document, event.modelId || "latest"),
-        state: {
-          sidebarContext,
-          retainScrollPosition: true,
-        },
+        state: { retainScrollPosition: true },
       };
       break;
 
@@ -144,6 +140,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
       title={
         <Time
           dateTime={event.createdAt}
+          tooltipDelay={500}
           format={{
             en_US: "MMM do, h:mm a",
             fr_FR: "'Le 'd MMMM 'à' H:mm",

app/components/FilterOptions.tsx

@@ -46,7 +46,7 @@ const FilterOptions = ({
   const searchInputRef = React.useRef<HTMLInputElement>(null);
   const listRef = React.useRef<HTMLDivElement | null>(null);
   const menu = useMenuState({
-    modal: false,
+    modal: true,
   });
   const selectedItems = options.filter((option) =>
     selectedKeys.includes(option.key)
@@ -229,7 +229,7 @@ const SearchInput = styled(Input)`
   ${Outline} {
     border: none;
     border-radius: 0;
-    border-bottom: 1px solid ${s("divider")};
+    border-bottom: 1px solid ${s("inputBorder")};
     background: ${s("menuBackground")};
   }
 

app/components/GroupListItem.tsx

@@ -0,0 +1,89 @@
+import { observer } from "mobx-react";
+import { GroupIcon } from "outline-icons";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import styled from "styled-components";
+import { MAX_AVATAR_DISPLAY } from "@shared/constants";
+import { s } from "@shared/styles";
+import Group from "~/models/Group";
+import GroupMembership from "~/models/GroupMembership";
+import GroupMembers from "~/scenes/GroupMembers";
+import Facepile from "~/components/Facepile";
+import Flex from "~/components/Flex";
+import ListItem from "~/components/List/Item";
+import Modal from "~/components/Modal";
+import useBoolean from "~/hooks/useBoolean";
+import { hover } from "~/styles";
+import NudeButton from "./NudeButton";
+
+type Props = {
+  group: Group;
+  membership?: GroupMembership;
+  showFacepile?: boolean;
+  showAvatar?: boolean;
+  renderActions: (params: { openMembersModal: () => void }) => React.ReactNode;
+};
+
+function GroupListItem({ group, showFacepile, renderActions }: Props) {
+  const { t } = useTranslation();
+  const [membersModalOpen, setMembersModalOpen, setMembersModalClosed] =
+    useBoolean();
+  const memberCount = group.memberCount;
+  const users = group.users.slice(0, MAX_AVATAR_DISPLAY);
+  const overflow = memberCount - users.length;
+
+  return (
+    <>
+      <ListItem
+        image={
+          <Image>
+            <GroupIcon size={24} />
+          </Image>
+        }
+        title={<Title onClick={setMembersModalOpen}>{group.name}</Title>}
+        subtitle={t("{{ count }} member", { count: memberCount })}
+        actions={
+          <Flex align="center" gap={8}>
+            {showFacepile && (
+              <NudeButton
+                width="auto"
+                height="auto"
+                onClick={setMembersModalOpen}
+              >
+                <Facepile users={users} overflow={overflow} />
+              </NudeButton>
+            )}
+            {renderActions({
+              openMembersModal: setMembersModalOpen,
+            })}
+          </Flex>
+        }
+      />
+      <Modal
+        title={t("Group members")}
+        onRequestClose={setMembersModalClosed}
+        isOpen={membersModalOpen}
+      >
+        <GroupMembers group={group} />
+      </Modal>
+    </>
+  );
+}
+
+const Image = styled(Flex)`
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  height: 32px;
+  background: ${s("backgroundSecondary")};
+  border-radius: 32px;
+`;
+
+const Title = styled.span`
+  &: ${hover} {
+    text-decoration: underline;
+    cursor: var(--pointer);
+  }
+`;
+
+export default observer(GroupListItem);

app/components/Guide.tsx

@@ -94,6 +94,7 @@ const Scene = styled.div`
   align-items: flex-start;
   width: 350px;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   border-radius: 8px;
   outline: none;
   opacity: 0;

app/components/Header.tsx

@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
@@ -11,35 +10,27 @@ import { supportsPassiveListener } from "@shared/utils/browser";
 import Button from "~/components/Button";
 import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
-import useComponentSize from "~/hooks/useComponentSize";
 import useEventListener from "~/hooks/useEventListener";
 import useMobile from "~/hooks/useMobile";
 import useStores from "~/hooks/useStores";
 import { draggableOnDesktop, fadeOnDesktopBackgrounded } from "~/styles";
 import Desktop from "~/utils/Desktop";
-import { TooltipProvider } from "./TooltipContext";
 
 export const HEADER_HEIGHT = 64;
 
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
-  actions?:
-    | ((props: { isCompact: boolean }) => React.ReactNode)
-    | React.ReactNode;
+  actions?: React.ReactNode;
   hasSidebar?: boolean;
   className?: string;
 };
 
-function Header(
-  { left, title, actions, hasSidebar, className }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
   const { ui } = useStores();
   const isMobile = useMobile();
   const hasMobileSidebar = hasSidebar && isMobile;
-  const internalRef = React.useRef<HTMLDivElement | null>(null);
-  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
+
   const passThrough = !actions && !left && !title;
 
   const [isScrolled, setScrolled] = React.useState(false);
@@ -62,50 +53,38 @@ function Header(
     });
   }, []);
 
-  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement | null) => {
-    breadcrumbsRef.current = node?.firstElementChild as HTMLDivElement;
-  }, []);
-
-  const size = useComponentSize(internalRef);
-  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
-  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
-  const isCompact = size.width < 1000 || breadcrumbMakesCompact;
-
   return (
-    <TooltipProvider>
-      <Wrapper
-        ref={mergeRefs([ref, internalRef])}
-        align="center"
-        shrink={false}
-        className={className}
-        $passThrough={passThrough}
-        $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
-      >
-        {left || hasMobileSidebar ? (
-          <Breadcrumbs ref={setBreadcrumbRef}>
-            {hasMobileSidebar && (
-              <MobileMenuButton
-                onClick={ui.toggleMobileSidebar}
-                icon={<MenuIcon />}
-                neutral
-              />
-            )}
-            {left}
-          </Breadcrumbs>
-        ) : null}
+    <Wrapper
+      align="center"
+      shrink={false}
+      className={className}
+      $passThrough={passThrough}
+      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
+    >
+      {left || hasMobileSidebar ? (
+        <Breadcrumbs>
+          {hasMobileSidebar && (
+            <MobileMenuButton
+              onClick={ui.toggleMobileSidebar}
+              icon={<MenuIcon />}
+              neutral
+            />
+          )}
+          {left}
+        </Breadcrumbs>
+      ) : null}
 
-        {isScrolled && !isCompact ? (
-          <Title onClick={handleClickTitle}>
-            <Fade>{title}</Fade>
-          </Title>
-        ) : (
-          <div />
-        )}
-        <Actions align="center" justify="flex-end">
-          {typeof actions === "function" ? actions({ isCompact }) : actions}
-        </Actions>
-      </Wrapper>
-    </TooltipProvider>
+      {isScrolled ? (
+        <Title onClick={handleClickTitle}>
+          <Fade>{title}</Fade>
+        </Title>
+      ) : (
+        <div />
+      )}
+      <Actions align="center" justify="flex-end">
+        {actions}
+      </Actions>
+    </Wrapper>
   );
 }
 
@@ -151,6 +130,7 @@ const Wrapper = styled(Flex)<WrapperProps>`
       `};
 
   padding: 12px;
+  transition: all 100ms ease-out;
   transform: translate3d(0, 0, 0);
   min-height: ${HEADER_HEIGHT}px;
   justify-content: flex-start;
@@ -172,6 +152,7 @@ const Wrapper = styled(Flex)<WrapperProps>`
 
   ${breakpoint("tablet")`
     padding: 16px;
+    justify-content: center;
     ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
     `};
 `;
@@ -210,4 +191,4 @@ const MobileMenuButton = styled(Button)`
   }
 `;
 
-export default observer(React.forwardRef(Header));
+export default observer(Header);

app/components/Icon.tsx

@@ -2,13 +2,13 @@ import { observer } from "mobx-react";
 import { getLuminance } from "polished";
 import * as React from "react";
 import styled from "styled-components";
-import useStores from "../hooks/useStores";
-import { IconType } from "../types";
-import { IconLibrary } from "../utils/IconLibrary";
-import { colorPalette } from "../utils/collections";
-import { determineIconType } from "../utils/icon";
-import EmojiIcon from "./EmojiIcon";
-// import Logger from "~/utils/Logger";
+import { IconType } from "@shared/types";
+import { IconLibrary } from "@shared/utils/IconLibrary";
+import { colorPalette } from "@shared/utils/collections";
+import { determineIconType } from "@shared/utils/icon";
+import EmojiIcon from "~/components/Icons/EmojiIcon";
+import useStores from "~/hooks/useStores";
+import Logger from "~/utils/Logger";
 import Flex from "./Flex";
 
 export type Props = {
@@ -40,9 +40,9 @@ const Icon = ({
   const iconType = determineIconType(icon);
 
   if (!iconType) {
-    // Logger.warn("Failed to determine icon type", {
-    //   icon,
-    // });
+    Logger.warn("Failed to determine icon type", {
+      icon,
+    });
     return null;
   }
 
@@ -62,9 +62,9 @@ const Icon = ({
 
     return <EmojiIcon emoji={icon} size={size} className={className} />;
   } catch (err) {
-    // Logger.warn("Failed to render icon", {
-    //   icon,
-    // });
+    Logger.warn("Failed to render icon", {
+      icon,
+    });
   }
 
   return null;
@@ -80,6 +80,7 @@ const SVGIcon = observer(
     forceColor,
   }: Props) => {
     const { ui } = useStores();
+
     let color = inputColor ?? colorPalette[0];
 
     // If the chosen icon color is very dark then we invert it in dark mode

app/components/IconPicker/components/ColorPicker.tsx

@@ -1,12 +1,13 @@
 import { BackIcon } from "outline-icons";
 import React from "react";
 import styled from "styled-components";
-import { breakpoints, s, hover } from "@shared/styles";
+import { breakpoints, s } from "@shared/styles";
 import { colorPalette } from "@shared/utils/collections";
 import { validateColorHex } from "@shared/utils/color";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
+import { hover } from "~/styles";
 
 enum Panel {
   Builtin,

app/components/IconPicker/components/IconButton.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const IconButton = styled(NudeButton)<{ delay?: number }>`
   width: 32px;

app/components/IconPicker/components/PopoverButton.tsx

@@ -1,6 +1,7 @@
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 export const PopoverButton = styled(NudeButton)<{ $borderOnHover?: boolean }>`
   &: ${hover},

app/components/IconPicker/components/SkinTonePicker.tsx

@@ -2,12 +2,13 @@ import React from "react";
 import { useTranslation } from "react-i18next";
 import { Menu, MenuButton, MenuItem, useMenuState } from "reakit";
 import styled from "styled-components";
-import { depths, s, hover } from "@shared/styles";
+import { depths, s } from "@shared/styles";
 import { EmojiSkinTone } from "@shared/types";
 import { getEmojiVariants } from "@shared/utils/emoji";
 import { Emoji } from "~/components/Emoji";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 import { IconButton } from "./IconButton";
 
 const SkinTonePicker = ({

app/components/IconPicker/index.tsx

@@ -10,18 +10,19 @@ import {
   useTabState,
 } from "reakit";
 import styled, { css } from "styled-components";
-import Icon from "@shared/components/Icon";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import theme from "@shared/styles/theme";
 import { IconType } from "@shared/types";
 import { determineIconType } from "@shared/utils/icon";
 import Flex from "~/components/Flex";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Popover from "~/components/Popover";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePrevious from "~/hooks/usePrevious";
 import useWindowSize from "~/hooks/useWindowSize";
+import { hover } from "~/styles";
 import EmojiPanel from "./components/EmojiPanel";
 import IconPanel from "./components/IconPanel";
 import { PopoverButton } from "./components/PopoverButton";

app/components/Icons/CollectionIcon.tsx

@@ -2,9 +2,9 @@ import { observer } from "mobx-react";
 import { CollectionIcon, PrivateCollectionIcon } from "outline-icons";
 import { getLuminance } from "polished";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
 import { colorPalette } from "@shared/utils/collections";
 import Collection from "~/models/Collection";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 
 type Props = {

app/components/Icons/EmojiIcon.tsx

@@ -1,6 +1,6 @@
 import * as React from "react";
 import styled from "styled-components";
-import { s } from "../styles";
+import { s } from "@shared/styles";
 
 type Props = {
   /** The emoji to render */

app/components/InputSearchPage.tsx

@@ -4,9 +4,9 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory } from "react-router-dom";
 import styled, { useTheme } from "styled-components";
-import { isModKey } from "@shared/utils/keyboard";
 import useBoolean from "~/hooks/useBoolean";
 import useKeyDown from "~/hooks/useKeyDown";
+import { isModKey } from "~/utils/keyboard";
 import { searchPath } from "~/utils/routeHelpers";
 import Input, { Outline } from "./Input";
 

app/components/Layout.tsx

@@ -4,7 +4,6 @@ import { Helmet } from "react-helmet-async";
 import styled, { DefaultTheme } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { s } from "@shared/styles";
-import { isModKey } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import { LoadingIndicatorBar } from "~/components/LoadingIndicator";
 import SkipNavContent from "~/components/SkipNavContent";
@@ -14,6 +13,7 @@ import useAutoRefresh from "~/hooks/useAutoRefresh";
 import useKeyDown from "~/hooks/useKeyDown";
 import { MenuProvider } from "~/hooks/useMenuContext";
 import useStores from "~/hooks/useStores";
+import { isModKey } from "~/utils/keyboard";
 
 type Props = {
   children?: React.ReactNode;
@@ -76,6 +76,7 @@ const Layout = React.forwardRef(function Layout_(
 
 const Container = styled(Flex)`
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   position: relative;
   width: 100%;
   min-height: 100%;

app/components/List/Item.tsx

@@ -6,9 +6,10 @@ import { LocationDescriptor } from "history";
 import * as React from "react";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { useTheme } from "styled-components";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Flex from "~/components/Flex";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 export type Props = Omit<React.HTMLAttributes<HTMLAnchorElement>, "title"> & {
   /** An icon or image to display to the left of the list item */

app/components/LocaleTime.tsx

@@ -23,6 +23,7 @@ function eachMinute(fn: () => void) {
 export type Props = {
   children?: React.ReactNode;
   dateTime: string;
+  tooltipDelay?: number;
   addSuffix?: boolean;
   shorten?: boolean;
   relative?: boolean;
@@ -36,6 +37,7 @@ const LocaleTime: React.FC<Props> = ({
   shorten,
   format,
   relative,
+  tooltipDelay,
 }: Props) => {
   const userLocale = useUserLocale();
   const dateFormatLong: Record<string, string> = {
@@ -80,7 +82,7 @@ const LocaleTime: React.FC<Props> = ({
         });
 
   return (
-    <Tooltip content={tooltipContent} placement="bottom">
+    <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
       <time dateTime={dateTime}>{children || content}</time>
     </Tooltip>
   );

app/components/Modal.tsx

@@ -174,6 +174,7 @@ const Fullscreen = styled.div<FullscreenProps>`
   justify-content: center;
   align-items: flex-start;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   outline: none;
 
   ${breakpoint("tablet")`
@@ -264,6 +265,7 @@ const Small = styled.div`
   justify-content: center;
   align-items: flex-start;
   background: ${s("modalBackground")};
+  transition: ${s("backgroundTransition")};
   box-shadow: ${s("modalShadow")};
   border-radius: 8px;
   outline: none;

app/components/Notifications/NotificationListItem.tsx

@@ -4,10 +4,11 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import { s, hover, truncateMultiline } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import CommentEditor from "~/scenes/Document/components/CommentEditor";
 import useStores from "~/hooks/useStores";
+import { hover, truncateMultiline } from "~/styles";
 import { Avatar, AvatarSize } from "../Avatar";
 import Flex from "../Flex";
 import Text from "../Text";
@@ -51,7 +52,11 @@ function NotificationListItem({ notification, onNavigate }: Props) {
             <Text weight="bold">{notification.subject}</Text>
           </Text>
           <Text type="tertiary" size="xsmall">
-            <Time dateTime={notification.createdAt} addSuffix />{" "}
+            <Time
+              dateTime={notification.createdAt}
+              tooltipDelay={1000}
+              addSuffix
+            />{" "}
             {collection && <>&middot; {collection.name}</>}
           </Text>
           {notification.comment && (

app/components/Notifications/Notifications.tsx

@@ -3,12 +3,13 @@ import { MarkAsReadIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Notification from "~/models/Notification";
 import { markNotificationsAsRead } from "~/actions/definitions/notifications";
 import useActionContext from "~/hooks/useActionContext";
 import useStores from "~/hooks/useStores";
 import NotificationMenu from "~/menus/NotificationMenu";
+import { hover } from "~/styles";
 import Desktop from "~/utils/Desktop";
 import Empty from "../Empty";
 import ErrorBoundary from "../ErrorBoundary";
@@ -59,7 +60,7 @@ function Notifications(
           </Text>
           <Flex gap={8}>
             {notifications.approximateUnreadCount > 0 && (
-              <Tooltip content={t("Mark all as read")}>
+              <Tooltip delay={500} content={t("Mark all as read")}>
                 <Button action={markNotificationsAsRead} context={context}>
                   <MarkAsReadIcon />
                 </Button>

app/components/Popover.tsx

@@ -10,23 +10,13 @@ import { fadeAndScaleIn } from "~/styles/animations";
 
 type Props = PopoverProps & {
   children: React.ReactNode;
-  /** The width of the popover, defaults to 380px. */
   width?: number;
-  /** The minimum width of the popover, use instead of width if contents adjusts size. */
-  minWidth?: number;
-  /** Shrink the padding of the popover */
   shrink?: boolean;
-  /** Make the popover flex */
   flex?: boolean;
-  /** The tab index of the popover */
   tabIndex?: number;
-  /** Whether the popover should be scrollable, defaults to true. */
   scrollable?: boolean;
-  /** The position of the popover on mobile, defaults to "top". */
   mobilePosition?: "top" | "bottom";
-  /** Function to show the popover */
   show: () => void;
-  /** Function to hide the popover */
   hide: () => void;
 };
 
@@ -35,7 +25,6 @@ const Popover = (
     children,
     shrink,
     width = 380,
-    minWidth,
     scrollable = true,
     flex,
     mobilePosition,
@@ -82,7 +71,6 @@ const Popover = (
         ref={ref}
         $shrink={shrink}
         $width={width}
-        $minWidth={minWidth}
         $scrollable={scrollable}
         $flex={flex}
       >
@@ -95,7 +83,6 @@ const Popover = (
 type ContentsProps = {
   $shrink?: boolean;
   $width?: number;
-  $minWidth?: number;
   $flex?: boolean;
   $scrollable: boolean;
   $mobilePosition?: "top" | "bottom";
@@ -114,8 +101,7 @@ const Contents = styled.div<ContentsProps>`
   padding: ${(props) => (props.$shrink ? "6px 0" : "12px 24px")};
   max-height: 75vh;
   box-shadow: ${s("menuShadow")};
-  ${(props) => props.$width && `width: ${props.$width}px`};
-  ${(props) => props.$minWidth && `min-width: ${props.$minWidth}px`};
+  width: ${(props) => props.$width}px;
 
   ${(props) =>
     props.$scrollable

app/components/Reactions/Reaction.tsx

@@ -3,7 +3,7 @@ import { transparentize } from "polished";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import type { ReactionSummary } from "@shared/types";
 import { getEmojiId } from "@shared/utils/emoji";
 import User from "~/models/User";
@@ -13,6 +13,7 @@ import NudeButton from "~/components/NudeButton";
 import Text from "~/components/Text";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
+import { hover } from "~/styles";
 
 type Props = {
   /** Thin reaction data - contains the emoji & active user ids for this reaction. */
@@ -127,7 +128,7 @@ const Reaction: React.FC<Props> = ({
   );
 
   return tooltipContent ? (
-    <Tooltip content={tooltipContent} placement="bottom">
+    <Tooltip content={tooltipContent} delay={250} placement="bottom">
       {DisplayedEmoji}
     </Tooltip>
   ) : (
@@ -143,6 +144,7 @@ const EmojiButton = styled(NudeButton)<{
   height: 28px;
   padding: 6px;
   border-radius: 12px;
+  transition: ${s("backgroundTransition")};
   background: ${s("backgroundTertiary")};
   pointer-events: ${({ disabled }) => disabled && "none"};
 

app/components/Reactions/ReactionPicker.tsx

@@ -98,7 +98,12 @@ const ReactionPicker: React.FC<Props> = ({
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <Tooltip content={t("Add reaction")} placement="top" hideOnClick>
+          <Tooltip
+            content={t("Add reaction")}
+            placement="top"
+            delay={500}
+            hideOnClick
+          >
             <NudeButton
               {...props}
               aria-label={t("Reaction picker")}

app/components/Reactions/ViewReactionsDialog.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from "react-i18next";
 import { Tab, TabPanel, useTabState } from "reakit";
 import { toast } from "sonner";
 import styled, { css } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import Comment from "~/models/Comment";
 import { Avatar, AvatarSize } from "~/components/Avatar";
 import { Emoji } from "~/components/Emoji";
@@ -13,6 +13,7 @@ import Flex from "~/components/Flex";
 import PlaceholderText from "~/components/PlaceholderText";
 import Text from "~/components/Text";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 
 type Props = {
   /** Model for which to show the reactions. */

app/components/SearchListItem.tsx

@@ -7,9 +7,10 @@ import * as React from "react";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s, hover, ellipsis } from "@shared/styles";
+import { s, ellipsis } from "@shared/styles";
 import Document from "~/models/Document";
 import Highlight, { Mark } from "~/components/Highlight";
+import { hover } from "~/styles";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 
 type Props = {

app/components/Sharing/Document/PublicAccess.tsx

@@ -119,7 +119,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
     : share?.url ?? "";
 
   const copyButton = (
-    <Tooltip content={t("Copy public link")} placement="top">
+    <Tooltip content={t("Copy public link")} delay={500} placement="top">
       <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
         <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
           <CopyIcon color={theme.placeholder} size={18} />

app/components/Sharing/components/CopyLinkButton.tsx

@@ -31,7 +31,7 @@ export function CopyLinkButton({
   }, [onCopy, t]);
 
   return (
-    <Tooltip content={t("Copy link")} placement="top">
+    <Tooltip content={t("Copy link")} delay={500} placement="top">
       <CopyToClipboard text={url} onCopy={handleCopied}>
         <NudeButton type="button">
           <LinkIcon size={20} />

app/components/Sharing/components/ListItem.tsx

@@ -1,7 +1,7 @@
 import { PlusIcon } from "outline-icons";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
 import BaseListItem from "~/components/List/Item";
+import { hover } from "~/styles";
 
 export const InviteIcon = styled(PlusIcon)`
   opacity: 0;

app/components/Sharing/components/Suggestions.tsx

@@ -5,7 +5,7 @@ import { CheckmarkIcon, CloseIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import { stringToColor } from "@shared/utils/color";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -20,6 +20,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import useMaxHeight from "~/hooks/useMaxHeight";
 import useStores from "~/hooks/useStores";
 import useThrottledCallback from "~/hooks/useThrottledCallback";
+import { hover } from "~/styles";
 import { InviteIcon, ListItem } from "./ListItem";
 
 type Suggestion = IAvatar & {

app/components/Sharing/components/index.tsx

@@ -1,8 +1,9 @@
 import { darken } from "polished";
 import styled from "styled-components";
 import Flex from "@shared/components/Flex";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NudeButton from "~/components/NudeButton";
+import { hover } from "~/styles";
 
 // TODO: Temp until Button/NudeButton styles are normalized
 export const Wrapper = styled.div`

app/components/Sidebar/App.tsx

@@ -5,7 +5,6 @@ import { DndProvider } from "react-dnd";
 import { HTML5Backend } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import Text from "~/components/Text";
@@ -15,6 +14,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import OrganizationMenu from "~/menus/OrganizationMenu";
+import { metaDisplay } from "~/utils/keyboard";
 import { homePath, draftsPath, searchPath } from "~/utils/routeHelpers";
 import TeamLogo from "../TeamLogo";
 import Tooltip from "../Tooltip";
@@ -80,6 +80,7 @@ function AppSidebar() {
                 <Tooltip
                   content={t("Toggle sidebar")}
                   shortcut={`${metaDisplay}+.`}
+                  delay={500}
                 >
                   <ToggleButton
                     position="bottom"

app/components/Sidebar/Right.tsx

@@ -128,7 +128,7 @@ const Sidebar = styled(m.div)<{
   max-width: 80%;
   border-left: 1px solid ${s("divider")};
   transition: border-left 100ms ease-in-out;
-  z-index: ${depths.sidebar};
+  z-index: 1;
 
   ${breakpoint("mobile", "tablet")`
     display: flex;

app/components/Sidebar/Settings.tsx

@@ -5,12 +5,12 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
-import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useSettingsConfig from "~/hooks/useSettingsConfig";
 import useStores from "~/hooks/useStores";
 import isCloudHosted from "~/utils/isCloudHosted";
+import { metaDisplay } from "~/utils/keyboard";
 import { settingsPath } from "~/utils/routeHelpers";
 import Tooltip from "../Tooltip";
 import Sidebar from "./Sidebar";
@@ -42,7 +42,11 @@ function SettingsSidebar() {
         image={<StyledBackIcon />}
         onClick={returnToApp}
       >
-        <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
+        <Tooltip
+          content={t("Toggle sidebar")}
+          shortcut={`${metaDisplay}+.`}
+          delay={500}
+        >
           <ToggleButton
             position="bottom"
             image={<SidebarIcon />}

app/components/Sidebar/Shared.tsx

@@ -3,16 +3,16 @@ import { SidebarIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
-import { hover } from "@shared/styles";
 import { NavigationNode } from "@shared/types";
-import { metaDisplay } from "@shared/utils/keyboard";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import SearchPopover from "~/components/SearchPopover";
 import Tooltip from "~/components/Tooltip";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
+import { hover } from "~/styles";
 import history from "~/utils/history";
+import { metaDisplay } from "~/utils/keyboard";
 import { homePath, sharedDocumentPath } from "~/utils/routeHelpers";
 import { useTeamContext } from "../TeamContext";
 import TeamLogo from "../TeamLogo";
@@ -67,7 +67,6 @@ function SharedSidebar({ rootNode, shareId }: Props) {
             depth={0}
             shareId={shareId}
             node={rootNode}
-            prefetchDocument={documents.prefetchDocument}
             activeDocumentId={ui.activeDocumentId}
             activeDocument={documents.active}
           />
@@ -82,7 +81,11 @@ const ToggleSidebar = () => {
   const { ui } = useStores();
 
   return (
-    <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
+    <Tooltip
+      content={t("Toggle sidebar")}
+      shortcut={`${metaDisplay}+.`}
+      delay={500}
+    >
       <ToggleButton
         position="bottom"
         image={<SidebarIcon />}

app/components/Sidebar/Sidebar.tsx

@@ -17,7 +17,6 @@ import { fadeIn } from "~/styles/animations";
 import Desktop from "~/utils/Desktop";
 import NotificationIcon from "../Notifications/NotificationIcon";
 import NotificationsPopover from "../Notifications/NotificationsPopover";
-import { TooltipProvider } from "../TooltipContext";
 import ResizeBorder from "./components/ResizeBorder";
 import SidebarButton, { SidebarButtonProps } from "./components/SidebarButton";
 import ToggleButton from "./components/ToggleButton";
@@ -195,9 +194,8 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   );
 
   return (
-    <TooltipProvider>
+    <>
       <Container
-        id="sidebar"
         ref={ref}
         style={style}
         $hidden={hidden}
@@ -244,7 +242,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
         />
       </Container>
       {ui.mobileSidebarVisible && <Backdrop onClick={ui.toggleMobileSidebar} />}
-    </TooltipProvider>
+    </>
   );
 });
 
@@ -300,8 +298,9 @@ const Container = styled(Flex)<ContainerProps>`
   width: 100%;
   background: ${s("sidebarBackground")};
   transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
-    ${(props: ContainerProps) =>
-      props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
+    ${s("backgroundTransition")}
+      ${(props: ContainerProps) =>
+        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
   );

app/components/Sidebar/components/Collections.tsx

@@ -16,7 +16,6 @@ import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
 import SidebarAction from "./SidebarAction";
-import SidebarContext from "./SidebarContext";
 import { DragObject } from "./SidebarLink";
 
 function Collections() {
@@ -50,40 +49,38 @@ function Collections() {
   });
 
   return (
-    <SidebarContext.Provider value="collections">
-      <Flex column>
-        <Header id="collections" title={t("Collections")}>
-          <Relative>
-            <PaginatedList
-              options={params}
-              aria-label={t("Collections")}
-              items={collections.allActive}
-              loading={<PlaceholderCollections />}
-              heading={
-                isDraggingAnyCollection ? (
-                  <DropCursor
-                    isActiveDrop={isCollectionDropping}
-                    innerRef={dropToReorderCollection}
-                    position="top"
-                  />
-                ) : undefined
-              }
-              renderError={(props) => <StyledError {...props} />}
-              renderItem={(item: Collection, index) => (
-                <DraggableCollectionLink
-                  key={item.id}
-                  collection={item}
-                  activeDocument={documents.active}
-                  prefetchDocument={documents.prefetchDocument}
-                  belowCollection={orderedCollections[index + 1]}
+    <Flex column>
+      <Header id="collections" title={t("Collections")}>
+        <Relative>
+          <PaginatedList
+            options={params}
+            aria-label={t("Collections")}
+            items={collections.allActive}
+            loading={<PlaceholderCollections />}
+            heading={
+              isDraggingAnyCollection ? (
+                <DropCursor
+                  isActiveDrop={isCollectionDropping}
+                  innerRef={dropToReorderCollection}
+                  position="top"
                 />
-              )}
-            />
-            <SidebarAction action={createCollection} depth={0} />
-          </Relative>
-        </Header>
-      </Flex>
-    </SidebarContext.Provider>
+              ) : undefined
+            }
+            renderError={(props) => <StyledError {...props} />}
+            renderItem={(item: Collection, index) => (
+              <DraggableCollectionLink
+                key={item.id}
+                collection={item}
+                activeDocument={documents.active}
+                prefetchDocument={documents.prefetchDocument}
+                belowCollection={orderedCollections[index + 1]}
+              />
+            )}
+          />
+          <SidebarAction action={createCollection} depth={0} />
+        </Relative>
+      </Header>
+    </Flex>
   );
 }
 

app/components/Sidebar/components/DocumentLink.tsx

@@ -5,13 +5,13 @@ import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import styled from "styled-components";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import { sortNavigationNodes } from "@shared/utils/collections";
 import { DocumentValidation } from "@shared/validations";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import Fade from "~/components/Fade";
+import Icon from "~/components/Icon";
 import NudeButton from "~/components/NudeButton";
 import Tooltip from "~/components/Tooltip";
 import useBoolean from "~/hooks/useBoolean";
@@ -278,7 +278,7 @@ function InnerDocumentLink(
                   !isDraggingAnyDocument ? (
                     <Fade>
                       {can.createChildDocument && (
-                        <Tooltip content={t("New doc")}>
+                        <Tooltip content={t("New doc")} delay={500}>
                           <NudeButton
                             type={undefined}
                             aria-label={t("New nested document")}

app/components/Sidebar/components/DraggableCollectionLink.tsx

@@ -7,8 +7,8 @@ import styled from "styled-components";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
+import { useLocationState } from "../hooks/useLocationState";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
 import DropCursor from "./DropCursor";
@@ -29,7 +29,7 @@ function DraggableCollectionLink({
   prefetchDocument,
   belowCollection,
 }: Props) {
-  const locationSidebarContext = useLocationSidebarContext();
+  const locationSidebarContext = useLocationState();
   const sidebarContext = useSidebarContext();
   const { ui, policies, collections } = useStores();
   const [expanded, setExpanded] = React.useState(

app/components/Sidebar/components/GroupLink.tsx

@@ -2,11 +2,10 @@ import { observer } from "mobx-react";
 import { GroupIcon } from "outline-icons";
 import * as React from "react";
 import Group from "~/models/Group";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import Folder from "./Folder";
 import Relative from "./Relative";
 import SharedWithMeLink from "./SharedWithMeLink";
-import SidebarContext, { groupSidebarContext } from "./SidebarContext";
+import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 
 type Props = {
@@ -15,23 +14,13 @@ type Props = {
 };
 
 const GroupLink: React.FC<Props> = ({ group }) => {
-  const locationSidebarContext = useLocationSidebarContext();
-  const sidebarContext = groupSidebarContext(group.id);
-  const [expanded, setExpanded] = React.useState(
-    locationSidebarContext === sidebarContext
-  );
+  const [expanded, setExpanded] = React.useState(false);
 
   const handleDisclosureClick = React.useCallback((ev) => {
     ev?.preventDefault();
     setExpanded((e) => !e);
   }, []);
 
-  React.useEffect(() => {
-    if (locationSidebarContext === sidebarContext) {
-      setExpanded(true);
-    }
-  }, [sidebarContext, locationSidebarContext, setExpanded]);
-
   return (
     <Relative>
       <SidebarLink
@@ -41,7 +30,7 @@ const GroupLink: React.FC<Props> = ({ group }) => {
         onClick={handleDisclosureClick}
         depth={0}
       />
-      <SidebarContext.Provider value={sidebarContext}>
+      <SidebarContext.Provider value={group.id}>
         <Folder expanded={expanded}>
           {group.documentMemberships.map((membership) => (
             <SharedWithMeLink

app/components/Sidebar/components/HistoryNavigation.tsx

@@ -43,12 +43,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {
 
   return (
     <Navigation gap={4} {...props}>
-      <Tooltip content={t("Go back")}>
+      <Tooltip content={t("Go back")} delay={500}>
         <NudeButton onClick={() => Desktop.bridge?.goBack()}>
           <Back $active={back} />
         </NudeButton>
       </Tooltip>
-      <Tooltip content={t("Go forward")}>
+      <Tooltip content={t("Go forward")} delay={500}>
         <NudeButton onClick={() => Desktop.bridge?.goForward()}>
           <Forward $active={forward} />
         </NudeButton>

app/components/Sidebar/components/NavLink.tsx

@@ -93,11 +93,15 @@ const NavLink = ({
 
   React.useLayoutEffect(() => {
     if (isActive && linkRef.current && scrollIntoViewIfNeeded !== false) {
-      scrollIntoView(linkRef.current, {
-        scrollMode: "if-needed",
-        behavior: "auto",
-        boundary: (parent) => parent.id !== "sidebar",
-      });
+      // If the page has an anchor hash then this means we're linking to an
+      // anchor in the document – smooth scrolling the sidebar may the scrolling
+      // to the anchor of the document so we must avoid it.
+      if (!window.location.hash) {
+        scrollIntoView(linkRef.current, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+        });
+      }
     }
   }, [linkRef, scrollIntoViewIfNeeded, isActive]);
 
@@ -108,9 +112,8 @@ const NavLink = ({
       !rest.target &&
       !event.altKey &&
       !event.metaKey &&
-      !event.ctrlKey &&
-      !isActive,
-    [rest.target, isActive]
+      !event.ctrlKey,
+    [rest.target]
   );
 
   const navigateTo = React.useCallback(() => {
@@ -150,13 +153,14 @@ const NavLink = ({
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
-      onClick={handleClick}
+      // onMouseDown={handleClick}
       onKeyDown={(event) => {
         if (["Enter", " "].includes(event.key)) {
           navigateTo();
           event.currentTarget?.blur();
         }
       }}
+      onClick={handleClick}
       aria-current={(isActive && ariaCurrent) || undefined}
       className={className}
       style={style}

app/components/Sidebar/components/SharedDocumentLink.tsx

@@ -2,10 +2,10 @@ import includes from "lodash/includes";
 import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
+import Icon from "~/components/Icon";
 import useStores from "~/hooks/useStores";
 import { sharedDocumentPath } from "~/utils/routeHelpers";
 import { descendants } from "~/utils/tree";
@@ -16,7 +16,6 @@ type Props = {
   collection?: Collection;
   activeDocumentId?: string;
   activeDocument?: Document;
-  prefetchDocument?: (documentId: string) => Promise<Document | void>;
   isDraft?: boolean;
   depth: number;
   index: number;
@@ -30,7 +29,6 @@ function DocumentLink(
     collection,
     activeDocument,
     activeDocumentId,
-    prefetchDocument,
     isDraft,
     depth,
     shareId,
@@ -99,10 +97,6 @@ function DocumentLink(
     node,
   ]);
 
-  const handlePrefetch = React.useCallback(() => {
-    void prefetchDocument?.(node.id);
-  }, [prefetchDocument, node]);
-
   const title =
     (activeDocument?.id === node.id ? activeDocument.title : node.title) ||
     t("Untitled");
@@ -120,7 +114,6 @@ function DocumentLink(
         }}
         expanded={hasChildDocuments && depth !== 0 ? expanded : undefined}
         onDisclosureClick={handleDisclosureClick}
-        onClickIntent={handlePrefetch}
         icon={icon && <Icon value={icon} color={node.color} />}
         label={title}
         depth={depth}
@@ -139,7 +132,6 @@ function DocumentLink(
             node={childNode}
             activeDocumentId={activeDocumentId}
             activeDocument={activeDocument}
-            prefetchDocument={prefetchDocument}
             isDraft={childNode.isDraft}
             depth={depth + 1}
             index={index}

app/components/Sidebar/components/SharedWithMeLink.tsx

@@ -9,7 +9,6 @@ import GroupMembership from "~/models/GroupMembership";
 import UserMembership from "~/models/UserMembership";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import {
@@ -17,6 +16,7 @@ import {
   useDropToReorderUserMembership,
   useDropToReparentDocument,
 } from "../hooks/useDragAndDrop";
+import { useLocationState } from "../hooks/useLocationState";
 import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import DocumentLink from "./DocumentLink";
 import DropCursor from "./DropCursor";
@@ -36,7 +36,7 @@ function SharedWithMeLink({ membership, depth = 0 }: Props) {
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const { documentId } = membership;
   const isActiveDocument = documentId === ui.activeDocumentId;
-  const locationSidebarContext = useLocationSidebarContext();
+  const locationSidebarContext = useLocationState();
   const sidebarContext = useSidebarContext();
   const document = documentId ? documents.get(documentId) : undefined;
 

app/components/Sidebar/components/SidebarButton.tsx

@@ -105,6 +105,7 @@ const Button = styled(Flex)<{
   &:hover,
   &[aria-expanded="true"] {
     color: ${s("sidebarText")};
+    transition: background 100ms ease-in-out;
     background: ${s("sidebarActiveBackground")};
   }
 

app/components/Sidebar/components/SidebarContext.ts

@@ -1,57 +1,9 @@
 import * as React from "react";
-import Document from "~/models/Document";
-import User from "~/models/User";
 
-export type SidebarContextType =
-  | "collections"
-  | "shared"
-  | `group-${string}`
-  | `starred-${string}`
-  | undefined;
+export type SidebarContextType = "collections" | "starred" | string | undefined;
 
 const SidebarContext = React.createContext<SidebarContextType>(undefined);
 
 export const useSidebarContext = () => React.useContext(SidebarContext);
 
-export const groupSidebarContext = (groupId: string): SidebarContextType =>
-  `group-${groupId}`;
-
-export const starredSidebarContext = (modelId: string): SidebarContextType =>
-  `starred-${modelId}`;
-
-export const determineSidebarContext = ({
-  document,
-  user,
-  currentContext,
-}: {
-  document: Document;
-  user: User;
-  currentContext?: SidebarContextType;
-}): SidebarContextType => {
-  const isStarred = document.isStarred || !!document.collection?.isStarred;
-  const preferStarred = !currentContext || currentContext.startsWith("starred");
-
-  if (isStarred && preferStarred) {
-    const currentlyInStarredCollection =
-      currentContext === starredSidebarContext(document.collectionId ?? "");
-
-    return document.isStarred && !currentlyInStarredCollection
-      ? starredSidebarContext(document.id)
-      : starredSidebarContext(document.collectionId!);
-  }
-
-  if (document.collection) {
-    return "collections";
-  } else if (
-    user.documentMemberships.find((m) => m.documentId === document.id)
-  ) {
-    return "shared";
-  } else {
-    const group = user.groupsWithDocumentMemberships.find(
-      (g) => !!g.documentMemberships.find((m) => m.documentId === document.id)
-    );
-    return groupSidebarContext(group?.id ?? "");
-  }
-};
-
 export default SidebarContext;

app/components/Sidebar/components/SidebarLink.tsx

@@ -78,6 +78,7 @@ function SidebarLink(
 
   const activeStyle = React.useMemo(
     () => ({
+      fontWeight: 600,
       color: theme.text,
       background: theme.sidebarActiveBackground,
       ...style,
@@ -201,10 +202,10 @@ const Link = styled(NavLink)<{
   display: flex;
   position: relative;
   text-overflow: ellipsis;
-  font-weight: 475;
   padding: 6px 16px;
   border-radius: 4px;
   min-height: 32px;
+  transition: background 50ms, color 50ms;
   user-select: none;
   background: ${(props) =>
     props.$isActiveDrop ? props.theme.slateDark : "inherit"};

app/components/Sidebar/components/Starred.tsx

@@ -15,6 +15,7 @@ import DropCursor from "./DropCursor";
 import Header from "./Header";
 import PlaceholderCollections from "./PlaceholderCollections";
 import Relative from "./Relative";
+import SidebarContext from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 import StarredLink from "./StarredLink";
 
@@ -41,46 +42,48 @@ function Starred() {
   }
 
   return (
-    <Flex column>
-      <Header id="starred" title={t("Starred")}>
-        <Relative>
-          {reorderStarProps.isDragging && (
-            <DropCursor
-              isActiveDrop={reorderStarProps.isOverCursor}
-              innerRef={dropToReorder}
-              position="top"
-            />
-          )}
-          {createStarProps.isDragging && (
-            <DropCursor
-              isActiveDrop={createStarProps.isOverCursor}
-              innerRef={dropToStarRef}
-              position="top"
-            />
-          )}
-          {stars.orderedData
-            .slice(0, page * STARRED_PAGINATION_LIMIT)
-            .map((star) => (
-              <StarredLink key={star.id} star={star} />
-            ))}
-          {!end && (
-            <SidebarLink
-              onClick={next}
-              label={`${t("Show more")}…`}
-              disabled={stars.isFetching}
-              depth={0}
-            />
-          )}
-          {loading && (
-            <Flex column>
-              <DelayedMount>
-                <PlaceholderCollections />
-              </DelayedMount>
-            </Flex>
-          )}
-        </Relative>
-      </Header>
-    </Flex>
+    <SidebarContext.Provider value="starred">
+      <Flex column>
+        <Header id="starred" title={t("Starred")}>
+          <Relative>
+            {reorderStarProps.isDragging && (
+              <DropCursor
+                isActiveDrop={reorderStarProps.isOverCursor}
+                innerRef={dropToReorder}
+                position="top"
+              />
+            )}
+            {createStarProps.isDragging && (
+              <DropCursor
+                isActiveDrop={createStarProps.isOverCursor}
+                innerRef={dropToStarRef}
+                position="top"
+              />
+            )}
+            {stars.orderedData
+              .slice(0, page * STARRED_PAGINATION_LIMIT)
+              .map((star) => (
+                <StarredLink key={star.id} star={star} />
+              ))}
+            {!end && (
+              <SidebarLink
+                onClick={next}
+                label={`${t("Show more")}…`}
+                disabled={stars.isFetching}
+                depth={0}
+              />
+            )}
+            {loading && (
+              <Flex column>
+                <DelayedMount>
+                  <PlaceholderCollections />
+                </DelayedMount>
+              </Flex>
+            )}
+          </Relative>
+        </Header>
+      </Flex>
+    </SidebarContext.Provider>
   );
 }
 

app/components/Sidebar/components/StarredLink.tsx

@@ -8,7 +8,6 @@ import styled, { useTheme } from "styled-components";
 import Star from "~/models/Star";
 import Fade from "~/components/Fade";
 import useBoolean from "~/hooks/useBoolean";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useStores from "~/hooks/useStores";
 import DocumentMenu from "~/menus/DocumentMenu";
 import {
@@ -16,6 +15,7 @@ import {
   useDropToCreateStar,
   useDropToReorderStar,
 } from "../hooks/useDragAndDrop";
+import { useLocationState } from "../hooks/useLocationState";
 import { useSidebarLabelAndIcon } from "../hooks/useSidebarLabelAndIcon";
 import CollectionLink from "./CollectionLink";
 import CollectionLinkChildren from "./CollectionLinkChildren";
@@ -25,7 +25,7 @@ import Folder from "./Folder";
 import Relative from "./Relative";
 import SidebarContext, {
   SidebarContextType,
-  starredSidebarContext,
+  useSidebarContext,
 } from "./SidebarContext";
 import SidebarLink from "./SidebarLink";
 
@@ -39,33 +39,22 @@ function StarredLink({ star }: Props) {
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
   const { documentId, collectionId } = star;
   const collection = collections.get(collectionId);
-  const locationSidebarContext = useLocationSidebarContext();
-  const sidebarContext = starredSidebarContext(
-    star.documentId ?? star.collectionId
-  );
+  const locationSidebarContext = useLocationState();
+  const sidebarContext = useSidebarContext();
   const [expanded, setExpanded] = useState(
-    (star.documentId
-      ? star.documentId === ui.activeDocumentId
-      : star.collectionId === ui.activeCollectionId) &&
+    star.collectionId === ui.activeCollectionId &&
       sidebarContext === locationSidebarContext
   );
 
   React.useEffect(() => {
     if (
-      star.documentId === ui.activeDocumentId &&
-      sidebarContext === locationSidebarContext
-    ) {
-      setExpanded(true);
-    } else if (
       star.collectionId === ui.activeCollectionId &&
       sidebarContext === locationSidebarContext
     ) {
       setExpanded(true);
     }
   }, [
-    star.documentId,
     star.collectionId,
-    ui.activeDocumentId,
     ui.activeCollectionId,
     sidebarContext,
     locationSidebarContext,
@@ -163,7 +152,7 @@ function StarredLink({ star }: Props) {
             }
           />
         </Draggable>
-        <SidebarContext.Provider value={sidebarContext}>
+        <SidebarContext.Provider value={document.id}>
           <Relative>
             <Folder expanded={displayChildDocuments}>
               {childDocuments.map((node, index) => (
@@ -187,7 +176,7 @@ function StarredLink({ star }: Props) {
 
   if (collection) {
     return (
-      <SidebarContext.Provider value={sidebarContext}>
+      <>
         <Draggable key={star?.id} ref={draggableRef} $isDragging={isDragging}>
           <CollectionLink
             collection={collection}
@@ -197,14 +186,16 @@ function StarredLink({ star }: Props) {
             isDraggingAnyCollection={reorderStarProps.isDragging}
           />
         </Draggable>
-        <Relative>
-          <CollectionLinkChildren
-            collection={collection}
-            expanded={displayChildDocuments}
-          />
-          {cursor}
-        </Relative>
-      </SidebarContext.Provider>
+        <SidebarContext.Provider value={collection.id}>
+          <Relative>
+            <CollectionLinkChildren
+              collection={collection}
+              expanded={displayChildDocuments}
+            />
+            {cursor}
+          </Relative>
+        </SidebarContext.Provider>
+      </>
     );
   }
 

app/components/Sidebar/components/ToggleButton.tsx

@@ -1,5 +1,5 @@
 import styled from "styled-components";
-import { hover } from "@shared/styles";
+import { hover } from "~/styles";
 import SidebarButton from "./SidebarButton";
 
 const ToggleButton = styled(SidebarButton)`

app/components/Sidebar/hooks/useDragAndDrop.tsx

@@ -6,7 +6,6 @@ import { getEmptyImage } from "react-dnd-html5-backend";
 import { useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import { useTheme } from "styled-components";
-import Icon from "@shared/components/Icon";
 import { NavigationNode } from "@shared/types";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
@@ -14,6 +13,7 @@ import GroupMembership from "~/models/GroupMembership";
 import Star from "~/models/Star";
 import UserMembership from "~/models/UserMembership";
 import ConfirmMoveDialog from "~/components/ConfirmMoveDialog";
+import Icon from "~/components/Icon";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { DragObject } from "../components/SidebarLink";

app/components/Sidebar/hooks/useLocationState.ts

@@ -1,10 +1,10 @@
 import { useLocation } from "react-router-dom";
-import { SidebarContextType } from "../components/Sidebar/components/SidebarContext";
+import { SidebarContextType } from "../components/SidebarContext";
 
 /**
  * Hook to retrieve the sidebar context from the current location state.
  */
-export function useLocationSidebarContext() {
+export function useLocationState() {
   const location = useLocation<{
     sidebarContext?: SidebarContextType;
   }>();

app/components/Sidebar/hooks/useSidebarLabelAndIcon.tsx

@@ -1,6 +1,6 @@
 import { DocumentIcon } from "outline-icons";
 import * as React from "react";
-import Icon from "@shared/components/Icon";
+import Icon from "~/components/Icon";
 import CollectionIcon from "~/components/Icons/CollectionIcon";
 import useStores from "~/hooks/useStores";
 

app/components/SortableTable.tsx

@@ -1,31 +0,0 @@
-import { ColumnSort } from "@tanstack/react-table";
-import * as React from "react";
-import { useHistory, useLocation } from "react-router-dom";
-import useQuery from "~/hooks/useQuery";
-import lazyWithRetry from "~/utils/lazyWithRetry";
-import type { Props as TableProps } from "./Table";
-
-const Table = lazyWithRetry(() => import("~/components/Table"));
-
-export type Props<T> = Omit<TableProps<T>, "onChangeSort">;
-
-export function SortableTable<T>(props: Props<T>) {
-  const location = useLocation();
-  const history = useHistory();
-  const params = useQuery();
-
-  const handleChangeSort = React.useCallback(
-    (sort: ColumnSort) => {
-      params.set("sort", sort.id);
-      params.set("direction", sort.desc ? "desc" : "asc");
-
-      history.replace({
-        pathname: location.pathname,
-        search: params.toString(),
-      });
-    },
-    [params, history, location.pathname]
-  );
-
-  return <Table onChangeSort={handleChangeSort} {...props} />;
-}

app/components/Star.tsx

@@ -3,7 +3,6 @@ import { StarredIcon, UnstarredIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled, { useTheme } from "styled-components";
-import { hover } from "@shared/styles";
 import Collection from "~/models/Collection";
 import Document from "~/models/Document";
 import {
@@ -12,6 +11,7 @@ import {
 } from "~/actions/definitions/collections";
 import { starDocument, unstarDocument } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
+import { hover } from "~/styles";
 import NudeButton from "./NudeButton";
 
 type Props = {

app/components/Subheading.tsx

@@ -31,6 +31,7 @@ const Background = styled.div<{ sticky?: boolean }>`
   margin: 0 -8px;
   padding: 0 8px;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   z-index: 1;
 `;
 

app/components/Tab.tsx

@@ -4,8 +4,9 @@ import isEqual from "lodash/isEqual";
 import queryString from "query-string";
 import * as React from "react";
 import styled, { useTheme } from "styled-components";
-import { s, hover } from "@shared/styles";
+import { s } from "@shared/styles";
 import NavLink from "~/components/NavLink";
+import { hover } from "~/styles";
 
 type Props = Omit<React.ComponentProps<typeof NavLink>, "children"> & {
   /**

app/components/Table.tsx

@@ -1,283 +1,231 @@
-import {
-  useReactTable,
-  getCoreRowModel,
-  SortingState,
-  flexRender,
-  ColumnSort,
-  functionalUpdate,
-  Row as TRow,
-  createColumnHelper,
-  AccessorFn,
-  CellContext,
-} from "@tanstack/react-table";
-import { useWindowVirtualizer } from "@tanstack/react-virtual";
+import isEqual from "lodash/isEqual";
 import { observer } from "mobx-react";
 import { CollapsedIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { Waypoint } from "react-waypoint";
+import { useTable, useSortBy, usePagination } from "react-table";
 import styled from "styled-components";
 import { s } from "@shared/styles";
+import Button from "~/components/Button";
 import DelayedMount from "~/components/DelayedMount";
 import Empty from "~/components/Empty";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
 import PlaceholderText from "~/components/PlaceholderText";
-import usePrevious from "~/hooks/usePrevious";
 
-const HEADER_HEIGHT = 40;
-
-type DataColumn<TData> = {
-  type: "data";
-  header: string;
-  accessor: AccessorFn<TData>;
-  sortable?: boolean;
+export type Props = {
+  data: any[];
+  offset?: number;
+  isLoading: boolean;
+  empty?: React.ReactNode;
+  currentPage?: number;
+  page: number;
+  pageSize?: number;
+  totalPages?: number;
+  defaultSort?: string;
+  topRef?: React.Ref<any>;
+  onChangePage: (index: number) => void;
+  onChangeSort: (
+    sort: string | null | undefined,
+    direction: "ASC" | "DESC"
+  ) => void;
+  columns: any;
+  defaultSortDirection: "ASC" | "DESC";
 };
 
-type ActionColumn = {
-  type: "action";
-  header?: string;
-};
-
-export type Column<TData> = {
-  id: string;
-  component: (data: TData) => React.ReactNode;
-  width: string;
-} & (DataColumn<TData> | ActionColumn);
-
-export type Props<TData> = {
-  data: TData[];
-  columns: Column<TData>[];
-  sort: ColumnSort;
-  onChangeSort: (sort: ColumnSort) => void;
-  loading: boolean;
-  page: {
-    hasNext: boolean;
-    fetchNext?: () => void;
-  };
-  rowHeight: number;
-  stickyOffset?: number;
-};
-
-function Table<TData>({
+function Table({
   data,
+  isLoading,
+  totalPages,
+  empty,
   columns,
-  sort,
-  onChangeSort,
-  loading,
   page,
-  rowHeight,
-  stickyOffset = 0,
-}: Props<TData>) {
+  pageSize = 50,
+  defaultSort = "name",
+  topRef,
+  onChangeSort,
+  onChangePage,
+  defaultSortDirection,
+}: Props) {
   const { t } = useTranslation();
-  const virtualContainerRef = React.useRef<HTMLDivElement>(null);
-  const [virtualContainerTop, setVirtualContainerTop] =
-    React.useState<number>();
+  const {
+    getTableProps,
+    getTableBodyProps,
+    headerGroups,
+    rows,
+    prepareRow,
+    canNextPage,
+    nextPage,
+    canPreviousPage,
+    previousPage,
+    state: { pageIndex, sortBy },
+  } = useTable(
+    {
+      columns,
+      data,
+      manualPagination: true,
+      manualSortBy: true,
+      autoResetSortBy: false,
+      autoResetPage: false,
+      pageCount: totalPages,
+      initialState: {
+        sortBy: [
+          {
+            id: defaultSort,
+            desc: defaultSortDirection === "DESC" ? true : false,
+          },
+        ],
+        pageSize,
+        pageIndex: page,
+      },
+      stateReducer: (newState, action, prevState) => {
+        if (!isEqual(newState.sortBy, prevState.sortBy)) {
+          return { ...newState, pageIndex: 0 };
+        }
 
-  const columnHelper = React.useMemo(() => createColumnHelper<TData>(), []);
-  const observedColumns = React.useMemo(
-    () =>
-      columns.map((column) => {
-        const cell = ({ row }: CellContext<TData, unknown>) => (
-          <ObservedCell data={row.original} render={column.component} />
-        );
-
-        return column.type === "data"
-          ? columnHelper.accessor(column.accessor, {
-              id: column.id,
-              header: column.header,
-              enableSorting: column.sortable ?? true,
-              cell,
-            })
-          : columnHelper.display({
-              id: column.id,
-              header: column.header ?? "",
-              cell,
-            });
-      }),
-    [columns, columnHelper]
-  );
-
-  const gridColumns = React.useMemo(
-    () => columns.map((column) => column.width).join(" "),
-    [columns]
-  );
-
-  const handleChangeSort = React.useCallback(
-    (sortState: SortingState) => {
-      const newState = functionalUpdate(sortState, [sort]);
-      const newSort = newState[0];
-      onChangeSort(newSort);
+        return newState;
+      },
     },
-    [sort, onChangeSort]
+    useSortBy,
+    usePagination
   );
-
-  const prevSort = usePrevious(sort);
-  const sortChanged = sort !== prevSort;
-
-  const isEmpty = !loading && data.length === 0;
-  const showPlaceholder = loading && data.length === 0;
-
-  const table = useReactTable({
-    data,
-    columns: observedColumns,
-    getCoreRowModel: getCoreRowModel(),
-    manualSorting: true,
-    enableMultiSort: false,
-    enableSortingRemoval: false,
-    state: {
-      sorting: [sort],
-    },
-    onSortingChange: handleChangeSort,
-  });
-
-  const { rows } = table.getRowModel();
-
-  const rowVirtualizer = useWindowVirtualizer({
-    count: rows.length,
-    estimateSize: () => rowHeight,
-    scrollMargin: virtualContainerTop,
-    overscan: 5,
-  });
+  const prevSortBy = React.useRef(sortBy);
 
   React.useEffect(() => {
-    if (!sortChanged || !virtualContainerTop) {
-      return;
-    }
-
-    const scrollThreshold =
-      virtualContainerTop - (stickyOffset + HEADER_HEIGHT);
-    const reset = window.scrollY > scrollThreshold;
-
-    if (reset) {
-      rowVirtualizer.scrollToOffset(scrollThreshold, {
-        behavior: "smooth",
-      });
-    }
-  }, [rowVirtualizer, sortChanged, virtualContainerTop, stickyOffset]);
-
-  React.useLayoutEffect(() => {
-    if (virtualContainerRef.current) {
-      // determine the scrollable virtual container offsetTop on mount
-      setVirtualContainerTop(
-        virtualContainerRef.current.getBoundingClientRect().top
+    if (!isEqual(sortBy, prevSortBy.current)) {
+      prevSortBy.current = sortBy;
+      onChangePage(0);
+      onChangeSort(
+        sortBy.length ? sortBy[0].id : undefined,
+        !sortBy.length ? defaultSortDirection : sortBy[0].desc ? "DESC" : "ASC"
       );
     }
-  }, []);
+  }, [defaultSortDirection, onChangePage, onChangeSort, sortBy]);
+
+  const handleNextPage = () => {
+    nextPage();
+    onChangePage(pageIndex + 1);
+  };
+
+  const handlePreviousPage = () => {
+    previousPage();
+    onChangePage(pageIndex - 1);
+  };
+
+  const isEmpty = !isLoading && data.length === 0;
+  const showPlaceholder = isLoading && data.length === 0;
 
   return (
-    <>
-      <InnerTable role="table">
-        <THead role="rowgroup" $topPos={stickyOffset}>
-          {table.getHeaderGroups().map((headerGroup) => (
-            <TR role="row" key={headerGroup.id} $columns={gridColumns}>
-              {headerGroup.headers.map((header) => (
-                <TH role="columnheader" key={header.id}>
-                  <SortWrapper
-                    align="center"
-                    gap={4}
-                    onClick={header.column.getToggleSortingHandler()}
-                    $sortable={header.column.getCanSort()}
-                  >
-                    {flexRender(
-                      header.column.columnDef.header,
-                      header.getContext()
-                    )}
-                    {header.column.getIsSorted() === "asc" ? (
-                      <AscSortIcon />
-                    ) : header.column.getIsSorted() === "desc" ? (
-                      <DescSortIcon />
-                    ) : (
-                      <div />
-                    )}
-                  </SortWrapper>
-                </TH>
-              ))}
-            </TR>
-          ))}
-        </THead>
-
-        <TBody
-          ref={virtualContainerRef}
-          role="rowgroup"
-          $height={rowVirtualizer.getTotalSize()}
-        >
-          {rowVirtualizer.getVirtualItems().map((virtualRow) => {
-            const row = rows[virtualRow.index] as TRow<TData>;
+    <div style={{ overflowX: "auto" }}>
+      <Anchor ref={topRef} />
+      <InnerTable {...getTableProps()}>
+        <thead>
+          {headerGroups.map((headerGroup) => {
+            const groupProps = headerGroup.getHeaderGroupProps();
             return (
-              <TR
-                role="row"
-                key={row.id}
-                data-index={virtualRow.index}
-                style={{
-                  position: "absolute",
-                  transform: `translateY(${
-                    virtualRow.start - rowVirtualizer.options.scrollMargin
-                  }px)`,
-                  height: `${virtualRow.size}px`,
-                }}
-                $columns={gridColumns}
-              >
-                {row.getAllCells().map((cell) => (
-                  <TD role="cell" key={cell.id}>
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TD>
+              <tr {...groupProps} key={groupProps.key}>
+                {headerGroup.headers.map((column) => (
+                  <Head
+                    {...column.getHeaderProps(column.getSortByToggleProps())}
+                    key={column.id}
+                  >
+                    <SortWrapper
+                      align="center"
+                      $sortable={!column.disableSortBy}
+                      gap={4}
+                    >
+                      {column.render("Header")}
+                      {column.isSorted &&
+                        (column.isSortedDesc ? (
+                          <DescSortIcon />
+                        ) : (
+                          <AscSortIcon />
+                        ))}
+                    </SortWrapper>
+                  </Head>
                 ))}
-              </TR>
+              </tr>
             );
           })}
-        </TBody>
-        {showPlaceholder && (
-          <Placeholder columns={columns.length} gridColumns={gridColumns} />
-        )}
+        </thead>
+        <tbody {...getTableBodyProps()}>
+          {rows.map((row) => {
+            prepareRow(row);
+            return (
+              <Row {...row.getRowProps()} key={row.id}>
+                {row.cells.map((cell) => (
+                  <Cell
+                    {...cell.getCellProps([
+                      {
+                        // @ts-expect-error ts-migrate(2339) FIXME: Property 'className' does not exist on type 'Colum... Remove this comment to see the full error message
+                        className: cell.column.className,
+                      },
+                    ])}
+                    key={cell.column.id}
+                  >
+                    {cell.render("Cell")}
+                  </Cell>
+                ))}
+              </Row>
+            );
+          })}
+        </tbody>
+        {showPlaceholder && <Placeholder columns={columns.length} />}
       </InnerTable>
-      {page.hasNext && (
-        <Waypoint
-          key={data?.length}
-          onEnter={page.fetchNext}
-          bottomOffset={-rowHeight * 5}
-        />
+      {isEmpty ? (
+        empty || <Empty>{t("No results")}</Empty>
+      ) : (
+        <Pagination
+          justify={canPreviousPage ? "space-between" : "flex-end"}
+          gap={8}
+        >
+          {/* Note: the page > 0 check shouldn't be needed here but is */}
+          {canPreviousPage && page > 0 && (
+            <Button onClick={handlePreviousPage} neutral>
+              {t("Previous page")}
+            </Button>
+          )}
+          {canNextPage && (
+            <Button onClick={handleNextPage} neutral>
+              {t("Next page")}
+            </Button>
+          )}
+        </Pagination>
       )}
-      {isEmpty && <Empty>{t("No results")}</Empty>}
-    </>
+    </div>
   );
 }
 
-const ObservedCell = observer(function <TData>({
-  data,
-  render,
-}: {
-  data: TData;
-  render: (data: TData) => React.ReactNode;
-}) {
-  return <>{render(data)}</>;
-});
-
-function Placeholder({
+export const Placeholder = ({
   columns,
   rows = 3,
-  gridColumns,
 }: {
   columns: number;
   rows?: number;
-  gridColumns: string;
-}) {
-  return (
-    <DelayedMount>
-      <TBody $height={150}>
-        {new Array(rows).fill(1).map((_r, row) => (
-          <TR key={row} $columns={gridColumns}>
-            {new Array(columns).fill(1).map((_c, col) => (
-              <TD key={col}>
-                <PlaceholderText minWidth={25} maxWidth={75} />
-              </TD>
-            ))}
-          </TR>
-        ))}
-      </TBody>
-    </DelayedMount>
-  );
-}
+}) => (
+  <DelayedMount>
+    <tbody>
+      {new Array(rows).fill(1).map((_, row) => (
+        <Row key={row}>
+          {new Array(columns).fill(1).map((_, col) => (
+            <Cell key={col}>
+              <PlaceholderText minWidth={25} maxWidth={75} />
+            </Cell>
+          ))}
+        </Row>
+      ))}
+    </tbody>
+  </DelayedMount>
+);
+
+const Anchor = styled.div`
+  top: -32px;
+  position: relative;
+`;
+
+const Pagination = styled(Flex)`
+  margin: 0 0 32px;
+`;
 
 const DescSortIcon = styled(CollapsedIcon)`
   margin-left: -2px;
@@ -291,6 +239,12 @@ const AscSortIcon = styled(DescSortIcon)`
   transform: rotate(180deg);
 `;
 
+const InnerTable = styled.table`
+  border-collapse: collapse;
+  margin: 16px 0;
+  min-width: 100%;
+`;
+
 const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   display: inline-flex;
   height: 24px;
@@ -299,7 +253,6 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   white-space: nowrap;
   margin: 0 -4px;
   padding: 0 4px;
-  cursor: ${(props) => (props.$sortable ? `var(--pointer)` : "")};
 
   &:hover {
     background: ${(props) =>
@@ -307,66 +260,15 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   }
 `;
 
-const InnerTable = styled.div`
-  width: 100%;
-`;
-
-const THead = styled.div<{ $topPos: number }>`
-  position: sticky;
-  top: ${({ $topPos }) => `${$topPos}px`};
-  height: ${HEADER_HEIGHT}px;
-  z-index: 1;
-  font-size: 14px;
-  color: ${s("textSecondary")};
-  font-weight: 500;
-
-  border-bottom: 1px solid ${s("divider")};
-  background: ${s("background")};
-`;
-
-const TBody = styled.div<{ $height: number }>`
-  position: relative;
-  height: ${({ $height }) => `${$height}px`};
-`;
-
-const TR = styled.div<{ $columns: string }>`
-  width: 100%;
-  display: grid;
-  grid-template-columns: ${({ $columns }) => `${$columns}`};
-  align-items: center;
-  border-bottom: 1px solid ${s("divider")};
-
-  &:last-child {
-    border-bottom: 0;
-  }
-`;
-
-const TH = styled.span`
-  padding: 6px 6px 2px;
-
-  &:first-child {
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
-  }
-`;
-
-const TD = styled.span`
+const Cell = styled.td`
   padding: 10px 6px;
+  border-bottom: 1px solid ${s("divider")};
   font-size: 14px;
-  text-wrap: wrap;
-  word-break: break-word;
+  text-wrap: nowrap;
 
   &:first-child {
     font-size: 15px;
     font-weight: 500;
-    padding-left: 0;
-  }
-
-  &:last-child {
-    padding-right: 0;
   }
 
   &.actions,
@@ -389,4 +291,41 @@ const TD = styled.span`
   }
 `;
 
+const Row = styled.tr`
+  ${Cell} {
+    &:first-child {
+      padding-left: 0;
+    }
+    &:last-child {
+      padding-right: 0;
+    }
+  }
+  &:last-child {
+    ${Cell} {
+      border-bottom: 0;
+    }
+  }
+`;
+
+const Head = styled.th`
+  text-align: left;
+  padding: 6px 6px 0;
+  border-bottom: 1px solid ${s("divider")};
+  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
+  font-size: 14px;
+  color: ${s("textSecondary")};
+  font-weight: 500;
+  z-index: 1;
+  cursor: var(--pointer) !important;
+
+  :first-child {
+    padding-left: 0;
+  }
+
+  :last-child {
+    padding-right: 0;
+  }
+`;
+
 export default observer(Table);

app/components/TableFromParams.tsx

@@ -0,0 +1,71 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useHistory, useLocation } from "react-router-dom";
+import scrollIntoView from "scroll-into-view-if-needed";
+import useQuery from "~/hooks/useQuery";
+import lazyWithRetry from "~/utils/lazyWithRetry";
+import type { Props } from "./Table";
+
+const Table = lazyWithRetry(() => import("~/components/Table"));
+
+const TableFromParams = (
+  props: Omit<Props, "onChangeSort" | "onChangePage" | "topRef">
+) => {
+  const topRef = React.useRef();
+  const location = useLocation();
+  const history = useHistory();
+  const params = useQuery();
+
+  const handleChangeSort = React.useCallback(
+    (sort, direction) => {
+      if (sort) {
+        params.set("sort", sort);
+      } else {
+        params.delete("sort");
+      }
+
+      params.set("direction", direction.toLowerCase());
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+    },
+    [params, history, location.pathname]
+  );
+
+  const handleChangePage = React.useCallback(
+    (page) => {
+      if (page) {
+        params.set("page", page.toString());
+      } else {
+        params.delete("page");
+      }
+
+      history.replace({
+        pathname: location.pathname,
+        search: params.toString(),
+      });
+
+      if (topRef.current) {
+        scrollIntoView(topRef.current, {
+          scrollMode: "if-needed",
+          behavior: "auto",
+          block: "start",
+        });
+      }
+    },
+    [params, history, location.pathname]
+  );
+
+  return (
+    <Table
+      topRef={topRef}
+      onChangeSort={handleChangeSort}
+      onChangePage={handleChangePage}
+      {...props}
+    />
+  );
+};
+
+export default observer(TableFromParams);

app/components/Tabs.tsx

@@ -45,6 +45,7 @@ const Sticky = styled.div`
   margin: 0 -8px;
   padding: 0 8px;
   background: ${s("background")};
+  transition: ${s("backgroundTransition")};
   z-index: 1;
 `;
 

app/components/Time.tsx

@@ -22,7 +22,7 @@ function Time({ onClick, ...props }: Props) {
           <time dateTime={props.dateTime}>{props.children || content}</time>
         }
       >
-        <LocaleTime {...props} />
+        <LocaleTime tooltipDelay={250} {...props} />
       </React.Suspense>
     </span>
   );

app/components/Tooltip.tsx

@@ -1,37 +1,19 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
-import { transparentize } from "polished";
 import * as React from "react";
 import styled, { createGlobalStyle } from "styled-components";
 import { roundArrow } from "tippy.js";
 import { s } from "@shared/styles";
 import useMobile from "~/hooks/useMobile";
-import { useTooltipContext } from "./TooltipContext";
 
 export type Props = Omit<TippyProps, "content" | "theme"> & {
   /** The content to display in the tooltip. */
   content?: React.ReactChild | React.ReactChild[];
   /** A keyboard shortcut to display next to the content */
   shortcut?: React.ReactNode;
-  /** Whether to show the shortcut on a new line */
-  shortcutOnNewline?: boolean;
 };
 
-/**
- * A tooltip component that wraps Tippy and provides a consistent look and feel. Optionally
- * displays a keyboard shortcut next to the content.
- *
- * Wrap this component in a TooltipProvider to allow multiple tooltips to share the same
- * singleton instance (delay, animation, etc).
- */
-function Tooltip({
-  shortcut,
-  shortcutOnNewline,
-  content: tooltip,
-  delay = 500,
-  ...rest
-}: Props) {
+function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
   const isMobile = useMobile();
-  const singleton = useTooltipContext();
 
   let content = <>{tooltip}</>;
 
@@ -42,19 +24,7 @@ function Tooltip({
   if (shortcut) {
     content = (
       <>
-        {tooltip}
-        {shortcutOnNewline ? <br /> : " "}
-        {typeof shortcut === "string" ? (
-          shortcut
-            .split("+")
-            .map((key, i) => (
-              <Shortcut key={`${key}${i}`}>
-                {key.length === 1 ? key.toUpperCase() : key}
-              </Shortcut>
-            ))
-        ) : (
-          <Shortcut>{shortcut}</Shortcut>
-        )}
+        {tooltip} &middot; <Shortcut>{shortcut}</Shortcut>
       </>
     );
   }
@@ -62,10 +32,9 @@ function Tooltip({
   return (
     <Tippy
       arrow={roundArrow}
+      animation="shift-away"
       content={content}
       delay={delay}
-      animation="shift-away"
-      singleton={singleton}
       duration={[200, 150]}
       inertia
       {...rest}
@@ -75,17 +44,16 @@ function Tooltip({
 
 const Shortcut = styled.kbd`
   position: relative;
-  top: -1px;
+  top: -2px;
 
-  margin-left: 2px;
   display: inline-block;
   padding: 2px 4px;
-  font-size: 12px;
-  font-family: ${s("fontFamilyMono")};
+  font: 10px "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier,
+    monospace;
   line-height: 10px;
-  color: ${s("tooltipText")};
-  border: 1px solid ${(props) => transparentize(0.75, props.theme.tooltipText)};
+  color: ${s("tooltipBackground")};
   vertical-align: middle;
+  background-color: ${s("tooltipText")};
   border-radius: 3px;
 `;
 
@@ -164,7 +132,7 @@ export const TooltipStyles = createGlobalStyle`
       padding:5px 9px;
       z-index:1
   }
-
+ 
   /* Arrow Styles */
   .tippy-box[data-placement^=top]>.tippy-svg-arrow{
     bottom:0

app/components/TooltipContext.tsx

@@ -1,40 +0,0 @@
-import Tippy, { useSingleton, TippyProps } from "@tippyjs/react";
-import * as React from "react";
-import { roundArrow } from "tippy.js";
-
-export const TooltipContext =
-  React.createContext<TippyProps["singleton"]>(undefined);
-
-export function useTooltipContext() {
-  return React.useContext(TooltipContext);
-}
-
-type Props = {
-  children: React.ReactNode;
-  /** Props to pass to the Tippy component */
-  tippyProps?: TippyProps;
-};
-
-/**
- * Wrap a collection of tooltips in a provider to allow them to share the same singleton instance.
- */
-export function TooltipProvider({ children, tippyProps }: Props) {
-  const [source, target] = useSingleton();
-
-  return (
-    <>
-      <Tippy
-        delay={500}
-        arrow={roundArrow}
-        animation="shift-away"
-        singleton={source}
-        duration={[200, 150]}
-        inertia
-        {...tippyProps}
-      />
-      <TooltipContext.Provider value={target}>
-        {children}
-      </TooltipContext.Provider>
-    </>
-  );
-}

app/components/Typing.tsx

@@ -0,0 +1,42 @@
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+type Props = {
+  /** The size to render the indicator, defaults to 24px */
+  size?: number;
+};
+
+/**
+ * A component to show an animated typing indicator.
+ */
+export default function Typing({ size = 24 }: Props) {
+  return (
+    <Wrapper height={size} width={size}>
+      <Circle cx={size / 4} cy={size / 2} r="2" />
+      <Circle cx={size / 2} cy={size / 2} r="2" />
+      <Circle cx={size / 1.33333} cy={size / 2} r="2" />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.svg`
+  fill: ${s("textTertiary")};
+
+  @keyframes blink {
+    50% {
+      fill: transparent;
+    }
+  }
+`;
+
+const Circle = styled.circle`
+  animation: 1s blink infinite;
+
+  &:nth-child(2) {
+    animation-delay: 250ms;
+  }
+  &:nth-child(3) {
+    animation-delay: 500ms;
+  }
+`;

app/components/UserDialogs.tsx

@@ -1,14 +1,10 @@
 import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
+import { useTranslation } from "react-i18next";
 import { UserRole } from "@shared/types";
 import User from "~/models/User";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
 import Input from "~/components/Input";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
-import { client } from "~/utils/ApiClient";
-import Text from "./Text";
 
 type Props = {
   user: User;
@@ -89,11 +85,7 @@ export function UserSuspendDialog({ user, onSubmit }: Props) {
   };
 
   return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      savingText={`${t("Saving")}…`}
-      danger
-    >
+    <ConfirmationDialog onSubmit={handleSubmit} savingText={`${t("Saving")}…`}>
       {t(
         "Are you sure you want to suspend {{ userName }}? Suspended users will be prevented from logging in.",
         {
@@ -131,68 +123,6 @@ export function UserChangeNameDialog({ user, onSubmit }: Props) {
         onChange={handleChange}
         error={!name ? t("Name can't be empty") : undefined}
         value={name}
-        autoSelect
-        required
-        flex
-      />
-    </ConfirmationDialog>
-  );
-}
-
-export function UserChangeEmailDialog({ user, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const actor = useCurrentUser();
-  const [email, setEmail] = React.useState<string>(user.email);
-  const [error, setError] = React.useState<string | undefined>();
-
-  const handleSubmit = async () => {
-    try {
-      await client.post(`/users.updateEmail`, { id: user.id, email });
-      onSubmit();
-      toast.info(
-        actor.id === user.id
-          ? t("Check your email to verify the new address.")
-          : t("The email will be changed once verified.")
-      );
-      return true;
-    } catch (err) {
-      setError(err.message);
-      return false;
-    }
-  };
-
-  const handleChange = (ev: React.ChangeEvent<HTMLInputElement>) => {
-    setEmail(ev.target.value);
-  };
-
-  return (
-    <ConfirmationDialog
-      onSubmit={handleSubmit}
-      submitText={t("Save")}
-      savingText={`${t("Saving")}…`}
-      disabled={!email || email === user.email}
-    >
-      <Text as="p">
-        {actor.id === user.id ? (
-          <Trans>
-            You will receive an email to verify your new address. It must be
-            unique in the workspace.
-          </Trans>
-        ) : (
-          <Trans>
-            A confirmation email will be sent to the new address before it is
-            changed.
-          </Trans>
-        )}
-      </Text>
-      <Input
-        type="email"
-        name="email"
-        label={t("New email")}
-        onChange={handleChange}
-        error={!email ? t("Email can't be empty") : error}
-        value={email}
-        autoSelect
         required
         flex
       />

app/components/WebsocketProvider.tsx

@@ -529,6 +529,13 @@ class WebsocketProvider extends React.Component<Props> {
       stars.remove(event.modelId);
     });
 
+    this.socket.on(
+      "user.typing",
+      (event: { userId: string; documentId: string; commentId: string }) => {
+        comments.setTyping(event);
+      }
+    );
+
     this.socket.on("collections.add_user", async (event: Membership) => {
       memberships.add(event);
       await collections.fetch(event.collectionId, {

app/editor/components/FindAndReplace.tsx

@@ -10,7 +10,6 @@ import { useTranslation } from "react-i18next";
 import { usePopoverState } from "reakit/Popover";
 import styled, { useTheme } from "styled-components";
 import { depths, s } from "@shared/styles";
-import { altDisplay, isModKey, metaDisplay } from "@shared/utils/keyboard";
 import Button from "~/components/Button";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
@@ -22,21 +21,14 @@ import Tooltip from "~/components/Tooltip";
 import useKeyDown from "~/hooks/useKeyDown";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import Desktop from "~/utils/Desktop";
+import { altDisplay, isModKey, metaDisplay } from "~/utils/keyboard";
 import { useEditor } from "./EditorContext";
 
 type Props = {
-  /** Whether the find and replace popover is open */
   open: boolean;
-  /** Callback when the find and replace popover is opened */
   onOpen: () => void;
-  /** Callback when the find and replace popover is closed */
   onClose: () => void;
-  /** Whether the editor is in read-only mode */
   readOnly?: boolean;
-  /** The current highlighted index in the search results */
-  currentIndex: number;
-  /** The total number of search results */
-  totalResults: number;
 };
 
 export default function FindAndReplace({
@@ -44,8 +36,6 @@ export default function FindAndReplace({
   open,
   onOpen,
   onClose,
-  currentIndex,
-  totalResults,
 }: Props) {
   const editor = useEditor();
   const finalFocusRef = React.useRef<HTMLElement>(
@@ -280,26 +270,25 @@ export default function FindAndReplace({
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [popover.visible]);
 
-  const disabled = totalResults === 0;
   const navigation = (
     <>
       <Tooltip
         content={t("Previous match")}
         shortcut="shift+enter"
+        delay={500}
         placement="bottom"
       >
-        <ButtonLarge
-          disabled={disabled}
-          onClick={() => editor.commands.prevSearchMatch()}
-        >
+        <ButtonLarge onClick={() => editor.commands.prevSearchMatch()}>
           <CaretUpIcon />
         </ButtonLarge>
       </Tooltip>
-      <Tooltip content={t("Next match")} shortcut="enter" placement="bottom">
-        <ButtonLarge
-          disabled={disabled}
-          onClick={() => editor.commands.nextSearchMatch()}
-        >
+      <Tooltip
+        content={t("Next match")}
+        shortcut="enter"
+        delay={500}
+        placement="bottom"
+      >
+        <ButtonLarge onClick={() => editor.commands.nextSearchMatch()}>
           <CaretDownIcon />
         </ButtonLarge>
       </Tooltip>
@@ -314,11 +303,10 @@ export default function FindAndReplace({
         style={style}
         aria-label={t("Find and replace")}
         scrollable={false}
-        minWidth={420}
-        width={0}
+        width={420}
       >
         <Content column>
-          <Flex gap={4}>
+          <Flex gap={8}>
             <StyledInput
               ref={inputRef}
               maxLength={255}
@@ -331,6 +319,7 @@ export default function FindAndReplace({
                 <Tooltip
                   content={t("Match case")}
                   shortcut={`${altDisplay}+${metaDisplay}+c`}
+                  delay={500}
                   placement="bottom"
                 >
                   <ButtonSmall onClick={handleCaseSensitive}>
@@ -342,6 +331,7 @@ export default function FindAndReplace({
                 <Tooltip
                   content={t("Enable regex")}
                   shortcut={`${altDisplay}+${metaDisplay}+r`}
+                  delay={500}
                   placement="bottom"
                 >
                   <ButtonSmall onClick={handleRegex}>
@@ -354,15 +344,16 @@ export default function FindAndReplace({
             </StyledInput>
             {navigation}
             {!readOnly && (
-              <Tooltip content={t("Replace options")} placement="bottom">
+              <Tooltip
+                content={t("Replace options")}
+                delay={500}
+                placement="bottom"
+              >
                 <ButtonLarge onClick={handleMore}>
                   <ReplaceIcon color={theme.textSecondary} />
                 </ButtonLarge>
               </Tooltip>
             )}
-            <Results>
-              {totalResults > 0 ? currentIndex + 1 : 0} / {totalResults}
-            </Results>
           </Flex>
           <ResizingHeightContainer>
             {showReplace && !readOnly && (
@@ -376,10 +367,10 @@ export default function FindAndReplace({
                   onRequestSubmit={handleReplaceAll}
                   onChange={(ev) => setReplaceTerm(ev.currentTarget.value)}
                 />
-                <Button onClick={handleReplace} disabled={disabled} neutral>
+                <Button onClick={handleReplace} neutral>
                   {t("Replace")}
                 </Button>
-                <Button onClick={handleReplaceAll} disabled={disabled} neutral>
+                <Button onClick={handleReplaceAll} neutral>
                   {t("Replace all")}
                 </Button>
               </Flex>
@@ -405,12 +396,6 @@ const ButtonSmall = styled(NudeButton)`
   &[aria-expanded="true"] {
     background: ${s("sidebarControlHoverBackground")};
   }
-
-  &:disabled {
-    color: ${s("textTertiary")};
-    background: none;
-    cursor: default;
-  }
 `;
 
 const ButtonLarge = styled(ButtonSmall)`
@@ -423,15 +408,3 @@ const Content = styled(Flex)`
   margin-bottom: -16px;
   position: static;
 `;
-
-const Results = styled.span`
-  color: ${s("textSecondary")};
-  font-size: 12px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  line-height: 32px;
-  min-width: 32px;
-  letter-spacing: -0.5px;
-  text-align: right;
-  user-select: none;
-`;

app/editor/components/FloatingToolbar.tsx

@@ -131,15 +131,13 @@ function usePosition({
 
   // Images need their own positioning to get the toolbar in the center
   if (isImageSelection) {
-    const element = view.nodeDOM(selection.from);
+    const element = view.nodeDOM(selection.from) as HTMLElement;
 
     // Images are wrapped which impacts positioning - need to get the element
     // specifically tagged as the handle
-    const imageElement = element
-      ? (element as HTMLElement).getElementsByClassName(
-          EditorStyleHelper.imageHandle
-        )[0]
-      : undefined;
+    const imageElement = element.getElementsByClassName(
+      EditorStyleHelper.imageHandle
+    )[0];
     if (imageElement) {
       const { left, top, width } = imageElement.getBoundingClientRect();
 

app/editor/components/LinkEditor.tsx

@@ -1,24 +1,43 @@
-import { ArrowIcon, CloseIcon, OpenIcon } from "outline-icons";
+import {
+  ArrowIcon,
+  DocumentIcon,
+  CloseIcon,
+  PlusIcon,
+  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 { toast } from "sonner";
 import styled from "styled-components";
+import { s, hideScrollbars } 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 Input from "./Input";
+import LinkSearchResult from "./LinkSearchResult";
 import ToolbarButton from "./ToolbarButton";
 import Tooltip from "./Tooltip";
 
+export type SearchResult = {
+  title: string;
+  subtitle?: React.ReactNode;
+  icon?: React.ReactNode;
+  url: string;
+};
+
 type Props = {
   mark?: Mark;
   from: number;
   to: number;
   dictionary: Dictionary;
   onRemoveLink?: () => void;
+  onCreateLink?: (title: string, nested?: boolean) => Promise<void>;
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
   onSelectLink: (options: {
     href: string;
     title?: string;
@@ -33,25 +52,46 @@ type Props = {
 };
 
 type State = {
+  results: {
+    [keyword: string]: SearchResult[];
+  };
   value: string;
   previousValue: string;
+  selectedIndex: number;
 };
 
 class LinkEditor extends React.Component<Props, State> {
   discardInputValue = false;
   initialValue = this.href;
   initialSelectionLength = this.props.to - this.props.from;
+  resultsRef = React.createRef<HTMLDivElement>();
   inputRef = React.createRef<HTMLInputElement>();
 
   state: State = {
+    selectedIndex: -1,
     value: this.href,
     previousValue: "",
+    results: {},
   };
 
   get href(): string {
     return sanitizeUrl(this.props.mark?.attrs.href) ?? "";
   }
 
+  get selectedText(): string {
+    const { state } = this.props.view;
+    const selectionText = state.doc.cut(
+      state.selection.from,
+      state.selection.to
+    ).textContent;
+
+    return selectionText.trim();
+  }
+
+  get suggestedLinkTitle(): string {
+    return this.state.value.trim() || this.selectedText;
+  }
+
   componentDidMount(): void {
     window.addEventListener("keydown", this.handleGlobalKeyDown);
   }
@@ -99,12 +139,25 @@ class LinkEditor extends React.Component<Props, State> {
   };
 
   handleKeyDown = (event: React.KeyboardEvent): void => {
+    const results = this.results;
+
     switch (event.key) {
       case "Enter": {
         event.preventDefault();
-        const { value } = this.state;
+        const { selectedIndex, value } = this.state;
+        const { onCreateLink } = this.props;
 
-        this.save(value, value);
+        if (selectedIndex >= 0) {
+          const result = results[selectedIndex];
+          if (result) {
+            this.save(result.url, result.title);
+          } else if (onCreateLink && selectedIndex === results.length) {
+            void this.handleCreateLink(this.suggestedLinkTitle);
+          }
+        } else {
+          // saves the raw input as href
+          this.save(value, value);
+        }
 
         if (this.initialSelectionLength) {
           this.moveSelectionToEnd();
@@ -123,9 +176,45 @@ class LinkEditor extends React.Component<Props, State> {
         }
         return;
       }
+
+      case "ArrowUp": {
+        if (event.shiftKey) {
+          return;
+        }
+        event.preventDefault();
+        event.stopPropagation();
+        const prevIndex = this.state.selectedIndex - 1;
+
+        this.setState({
+          selectedIndex: Math.max(-1, prevIndex),
+        });
+        return;
+      }
+
+      case "ArrowDown":
+      case "Tab": {
+        if (event.shiftKey) {
+          return;
+        }
+
+        event.preventDefault();
+        event.stopPropagation();
+        const { selectedIndex } = this.state;
+        const total = results.length + 1;
+        const nextIndex = selectedIndex + 1;
+
+        this.setState({
+          selectedIndex: Math.min(nextIndex, total),
+        });
+        return;
+      }
     }
   };
 
+  handleFocusLink = (selectedIndex: number) => {
+    this.setState({ selectedIndex });
+  };
+
   handleSearch = async (
     event: React.ChangeEvent<HTMLInputElement>
   ): Promise<void> => {
@@ -133,15 +222,21 @@ class LinkEditor extends React.Component<Props, State> {
 
     this.setState({
       value,
+      selectedIndex: -1,
     });
 
-    const trimmedValue = value.trim();
+    const trimmedValue = value.trim() || this.selectedText;
 
-    if (trimmedValue) {
+    if (trimmedValue && this.props.onSearchLink) {
       try {
-        this.setState({
+        const results = await this.props.onSearchLink(trimmedValue);
+        this.setState((state) => ({
+          results: {
+            ...state.results,
+            [trimmedValue]: results,
+          },
           previousValue: trimmedValue,
-        });
+        }));
       } catch (err) {
         Logger.error("Error searching for link", err);
       }
@@ -162,6 +257,20 @@ class LinkEditor extends React.Component<Props, State> {
     }
   };
 
+  handleCreateLink = async (title: string, nested?: boolean) => {
+    this.discardInputValue = true;
+    const { onCreateLink } = this.props;
+
+    title = title.trim();
+    if (title.length === 0) {
+      return;
+    }
+
+    if (onCreateLink) {
+      return onCreateLink(title, nested);
+    }
+  };
+
   handleRemoveLink = (): void => {
     this.discardInputValue = true;
 
@@ -176,6 +285,16 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
+  handleSelectLink =
+    (url: string, title: string) => (event: React.MouseEvent) => {
+      event.preventDefault();
+      this.save(url, title);
+
+      if (this.initialSelectionLength) {
+        this.moveSelectionToEnd();
+      }
+    };
+
   moveSelectionToEnd = () => {
     const { to, view } = this.props;
     const { state, dispatch } = view;
@@ -186,17 +305,42 @@ class LinkEditor extends React.Component<Props, State> {
     view.focus();
   };
 
+  get results() {
+    const { value } = this.state;
+    return (
+      this.state.results[value.trim()] ||
+      this.state.results[this.state.previousValue] ||
+      []
+    );
+  }
+
   render() {
     const { dictionary } = this.props;
-    const { value } = this.state;
+    const { value, selectedIndex } = this.state;
+    const results = this.results;
+    const looksLikeUrl = value.match(/^https?:\/\//i);
+    const suggestedLinkTitle = this.suggestedLinkTitle;
     const isInternal = isInternalUrl(value);
 
+    const showCreateLink =
+      !!this.props.onCreateLink &&
+      !(suggestedLinkTitle === this.initialValue) &&
+      suggestedLinkTitle.length > 0 &&
+      !looksLikeUrl;
+
+    const hasResults =
+      !!suggestedLinkTitle && (showCreateLink || results.length > 0);
+
     return (
       <Wrapper>
         <Input
           ref={this.inputRef}
           value={value}
-          placeholder={dictionary.enterLink}
+          placeholder={
+            showCreateLink
+              ? dictionary.findOrCreateDoc
+              : dictionary.searchOrPasteLink
+          }
           onKeyDown={this.handleKeyDown}
           onPaste={this.handlePaste}
           onChange={this.handleSearch}
@@ -216,6 +360,70 @@ class LinkEditor extends React.Component<Props, State> {
             <CloseIcon />
           </ToolbarButton>
         </Tooltip>
+
+        <SearchResults
+          ref={this.resultsRef}
+          $hasResults={hasResults}
+          role="menu"
+        >
+          <ResizingHeightContainer>
+            {hasResults && (
+              <>
+                {results.map((result, index) => (
+                  <LinkSearchResult
+                    key={result.url}
+                    title={result.title}
+                    subtitle={result.subtitle}
+                    icon={result.icon ?? <DocumentIcon />}
+                    onPointerMove={() => this.handleFocusLink(index)}
+                    onClick={this.handleSelectLink(result.url, result.title)}
+                    selected={index === selectedIndex}
+                    containerRef={this.resultsRef}
+                  />
+                ))}
+
+                {showCreateLink && (
+                  <>
+                    <LinkSearchResult
+                      key="create"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() => this.handleFocusLink(results.length)}
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle);
+
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length === selectedIndex}
+                    />
+                    <LinkSearchResult
+                      key="create-nested"
+                      containerRef={this.resultsRef}
+                      title={suggestedLinkTitle}
+                      subtitle={dictionary.createNewChildDoc}
+                      icon={<PlusIcon />}
+                      onPointerMove={() =>
+                        this.handleFocusLink(results.length + 1)
+                      }
+                      onClick={async () => {
+                        await this.handleCreateLink(suggestedLinkTitle, true);
+
+                        if (this.initialSelectionLength) {
+                          this.moveSelectionToEnd();
+                        }
+                      }}
+                      selected={results.length + 1 === selectedIndex}
+                    />
+                  </>
+                )}
+              </>
+            )}
+          </ResizingHeightContainer>
+        </SearchResults>
       </Wrapper>
     );
   }
@@ -226,4 +434,29 @@ const Wrapper = styled(Flex)`
   gap: 8px;
 `;
 
+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 ? "8px 0" : "0")};
+  max-height: 240px;
+  ${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 LinkEditor;

app/editor/components/LinkSearchResult.tsx

@@ -0,0 +1,109 @@
+import * as React from "react";
+import scrollIntoView from "scroll-into-view-if-needed";
+import styled, { css } from "styled-components";
+import { s, ellipsis } from "@shared/styles";
+
+type Props = React.HTMLAttributes<HTMLDivElement> & {
+  icon: React.ReactNode;
+  selected: boolean;
+  title: React.ReactNode;
+  subtitle?: React.ReactNode;
+  containerRef: React.RefObject<HTMLDivElement>;
+};
+
+function LinkSearchResult({
+  title,
+  subtitle,
+  containerRef,
+  selected,
+  icon,
+  ...rest
+}: Props) {
+  const ref = React.useCallback(
+    (node: HTMLElement | null) => {
+      if (selected && node) {
+        scrollIntoView(node, {
+          scrollMode: "if-needed",
+          block: "center",
+          boundary: (parent) =>
+            // Prevents body and other parent elements from being scrolled
+            parent !== containerRef.current,
+        });
+      }
+    },
+    [containerRef, selected]
+  );
+
+  return (
+    <ListItem
+      ref={ref}
+      compact={!subtitle}
+      selected={selected}
+      role="menuitem"
+      {...rest}
+    >
+      <IconWrapper selected={selected}>{icon}</IconWrapper>
+      <Content>
+        <Title title={title}>{title}</Title>
+        {subtitle ? <Subtitle selected={selected}>{subtitle}</Subtitle> : null}
+      </Content>
+    </ListItem>
+  );
+}
+
+const Content = styled.div`
+  overflow: hidden;
+`;
+
+const IconWrapper = styled.span<{ selected: boolean }>`
+  flex-shrink: 0;
+  margin-right: 4px;
+  height: 24px;
+  opacity: 0.8;
+
+  ${(props) =>
+    props.selected &&
+    css`
+      svg {
+        fill: ${s("accentText")};
+        color: ${s("accentText")};
+      }
+    `};
+`;
+
+const ListItem = styled.div<{
+  selected: boolean;
+  compact: boolean;
+}>`
+  display: flex;
+  align-items: center;
+  padding: 8px;
+  border-radius: 4px;
+  margin: 0 6px;
+  color: ${(props) => (props.selected ? s("accentText") : s("textSecondary"))};
+  background: ${(props) => (props.selected ? s("accent") : "transparent")};
+  font-family: ${s("fontFamily")};
+  text-decoration: none;
+  overflow: hidden;
+  white-space: nowrap;
+  cursor: var(--pointer);
+  user-select: none;
+  line-height: ${(props) => (props.compact ? "inherit" : "1.2")};
+  height: ${(props) => (props.compact ? "28px" : "auto")};
+`;
+
+const Title = styled.div`
+  ${ellipsis()}
+  font-size: 14px;
+  font-weight: 500;
+`;
+
+const Subtitle = styled.div<{
+  selected: boolean;
+}>`
+  ${ellipsis()}
+  font-size: 13px;
+  opacity: ${(props) => (props.selected ? 0.75 : 0.5)};
+`;
+
+export default LinkSearchResult;

app/editor/components/LinkToolbar.tsx

@@ -0,0 +1,146 @@
+import { EditorView } from "prosemirror-view";
+import * as React from "react";
+import createAndInsertLink from "@shared/editor/commands/createAndInsertLink";
+import { creatingUrlPrefix } from "@shared/utils/urls";
+import useDictionary from "~/hooks/useDictionary";
+import useEventListener from "~/hooks/useEventListener";
+import { useEditor } from "./EditorContext";
+import FloatingToolbar from "./FloatingToolbar";
+import LinkEditor, { SearchResult } from "./LinkEditor";
+
+type Props = {
+  isActive: boolean;
+  onCreateLink?: (title: string) => Promise<string>;
+  onSearchLink?: (term: string) => Promise<SearchResult[]>;
+  onClickLink: (
+    href: string,
+    event: React.MouseEvent<HTMLButtonElement>
+  ) => void;
+  onClose: () => void;
+};
+
+function isActive(view: EditorView, active: boolean): boolean {
+  try {
+    const { selection } = view.state;
+    const paragraph = view.domAtPos(selection.from);
+    return active && !!paragraph.node;
+  } catch (err) {
+    return false;
+  }
+}
+
+export default function LinkToolbar({
+  onCreateLink,
+  onSearchLink,
+  onClickLink,
+  onClose,
+  ...rest
+}: Props) {
+  const dictionary = useDictionary();
+  const { view } = useEditor();
+  const menuRef = React.useRef<HTMLDivElement>(null);
+
+  useEventListener("mousedown", (event: Event) => {
+    if (
+      event.target instanceof HTMLElement &&
+      menuRef.current &&
+      menuRef.current.contains(event.target)
+    ) {
+      return;
+    }
+    onClose();
+  });
+
+  const handleOnCreateLink = React.useCallback(
+    async (title: string, nested?: boolean) => {
+      onClose();
+      view.focus();
+
+      if (!onCreateLink) {
+        return;
+      }
+
+      const { dispatch, state } = view;
+      const { from, to } = state.selection;
+      if (from !== to) {
+        // selection must be collapsed
+        return;
+      }
+
+      const href = `${creatingUrlPrefix}#${title}…`;
+
+      // Insert a placeholder link
+      dispatch(
+        view.state.tr
+          .insertText(title, from, to)
+          .addMark(
+            from,
+            to + title.length,
+            state.schema.marks.link.create({ href })
+          )
+      );
+
+      return createAndInsertLink(view, title, href, {
+        nested,
+        onCreateLink,
+        dictionary,
+      });
+    },
+    [onCreateLink, onClose, view, dictionary]
+  );
+
+  const handleOnSelectLink = React.useCallback(
+    ({
+      href,
+      title,
+    }: {
+      href: string;
+      title: string;
+      from: number;
+      to: number;
+    }) => {
+      onClose();
+      view.focus();
+
+      const { dispatch, state } = view;
+      const { from, to } = state.selection;
+      if (from !== to) {
+        // selection must be collapsed
+        return;
+      }
+
+      dispatch(
+        view.state.tr
+          .insertText(title, from, to)
+          .addMark(
+            from,
+            to + title.length,
+            state.schema.marks.link.create({ href })
+          )
+      );
+    },
+    [onClose, view]
+  );
+
+  const { selection } = view.state;
+  const active = isActive(view, rest.isActive);
+
+  return (
+    <FloatingToolbar ref={menuRef} active={active} width={336}>
+      {active && (
+        <LinkEditor
+          key={`${selection.from}-${selection.to}`}
+          from={selection.from}
+          to={selection.to}
+          onCreateLink={onCreateLink ? handleOnCreateLink : undefined}
+          onSelectLink={handleOnSelectLink}
+          onRemoveLink={onClose}
+          onClickLink={onClickLink}
+          onSearchLink={onSearchLink}
+          dictionary={dictionary}
+          view={view}
+        />
+      )}
+    </FloatingToolbar>
+  );
+}

app/editor/components/MentionMenu.tsx

@@ -1,29 +1,27 @@
-import { isEmail } from "class-validator";
 import { observer } from "mobx-react";
-import { DocumentIcon, PlusIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation } from "react-router-dom";
 import { toast } from "sonner";
 import { v4 } from "uuid";
-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 useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
 import { client } from "~/utils/ApiClient";
+import MentionMenuItem from "./MentionMenuItem";
 import SuggestionsMenu, {
   Props as SuggestionsMenuProps,
 } from "./SuggestionsMenu";
-import SuggestionsMenuItem from "./SuggestionsMenuItem";
 
 interface MentionItem extends MenuItem {
+  name: string;
+  user: User;
+  appendSpace: boolean;
   attrs: {
     id: string;
     type: MentionType;
@@ -42,24 +40,17 @@ 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 actorId = auth.currentUserId;
+  const { auth, users } = useStores();
   const location = useLocation();
   const documentId = parseDocumentSlug(location.pathname);
-  const maxResultsInSection = search ? 25 : 5;
-
-  const { loading, request } = useRequest<{
-    documents: Document[];
-    users: User[];
-  }>(
-    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),
-      };
-    }, [search, documents, users])
+  const { data, loading, request } = useRequest(
+    React.useCallback(
+      () =>
+        documentId
+          ? users.fetchPage({ id: documentId, query: search })
+          : Promise.resolve([]),
+      [users, documentId, search]
+    )
   );
 
   React.useEffect(() => {
@@ -69,95 +60,28 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
   }, [request, isActive]);
 
   React.useEffect(() => {
-    if (actorId && !loading) {
-      const items = users
-        .findByQuery(search, { maxResults: maxResultsInSection })
-        .map(
-          (user) =>
-            ({
-              name: "mention",
-              icon: (
-                <Flex
-                  align="center"
-                  justify="center"
-                  style={{ width: 24, height: 24 }}
-                >
-                  <Avatar
-                    model={user}
-                    showBorder={false}
-                    alt={t("Profile picture")}
-                    size={AvatarSize.Small}
-                  />
-                </Flex>
-              ),
-              title: user.name,
-              section: UserSection,
-              appendSpace: true,
-              attrs: {
-                id: v4(),
-                type: MentionType.User,
-                modelId: user.id,
-                actorId,
-                label: user.name,
-              },
-            } as MentionItem)
-        )
-        .concat(
-          documents
-            .findByQuery(search, { maxResults: maxResultsInSection })
-            .map(
-              (doc) =>
-                ({
-                  name: "mention",
-                  icon: doc.icon ? (
-                    <Icon value={doc.icon} color={doc.color ?? undefined} />
-                  ) : (
-                    <DocumentIcon />
-                  ),
-                  title: doc.title,
-                  subtitle: doc.collection?.name,
-                  section: DocumentsSection,
-                  appendSpace: true,
-                  attrs: {
-                    id: v4(),
-                    type: MentionType.Document,
-                    modelId: doc.id,
-                    actorId,
-                    label: doc.title,
-                  },
-                } as MentionItem)
-            )
-        )
-        .concat([
-          {
-            name: "link",
-            icon: <PlusIcon />,
-            title: search?.trim(),
-            section: DocumentsSection,
-            subtitle: t("Create a new doc"),
-            visible: !!search && !isEmail(search),
-            priority: -1,
-            appendSpace: true,
-            attrs: {
-              id: v4(),
-              type: MentionType.Document,
-              modelId: v4(),
-              actorId,
-              label: search,
-            },
-          } as MentionItem,
-        ]);
+    if (data && !loading) {
+      const items = data.map((user) => ({
+        name: "mention",
+        user,
+        title: user.name,
+        appendSpace: true,
+        attrs: {
+          id: v4(),
+          type: MentionType.User,
+          modelId: user.id,
+          actorId: auth.currentUserId ?? undefined,
+          label: user.name,
+        },
+      }));
 
       setItems(items);
       setLoaded(true);
     }
-  }, [t, actorId, loading, search, users, documents, maxResultsInSection]);
+  }, [auth.currentUserId, loading, data]);
 
   const handleSelect = React.useCallback(
     async (item: MentionItem) => {
-      if (item.attrs.type === MentionType.Document) {
-        return;
-      }
       // Check if the mentioned user has access to the document
       const res = await client.post("/documents.users", {
         id: documentId,
@@ -198,12 +122,25 @@ function MentionMenu({ search, isActive, ...rest }: Props) {
       search={search}
       onSelect={handleSelect}
       renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
+        <MentionMenuItem
           onClick={options.onClick}
           selected={options.selected}
-          subtitle={item.subtitle}
           title={item.title}
-          icon={item.icon}
+          label={item.attrs.label}
+          icon={
+            <Flex
+              align="center"
+              justify="center"
+              style={{ width: 24, height: 24 }}
+            >
+              <Avatar
+                model={item.user}
+                showBorder={false}
+                alt={t("Profile picture")}
+                size={AvatarSize.Small}
+              />
+            </Flex>
+          }
         />
       )}
       items={items}

app/editor/components/MentionMenuItem.tsx

@@ -0,0 +1,18 @@
+import * as React from "react";
+import SuggestionsMenuItem, {
+  Props as SuggestionsMenuItemProps,
+} from "./SuggestionsMenuItem";
+
+type MentionMenuItemProps = Omit<
+  SuggestionsMenuItemProps,
+  "shortcut" | "theme"
+> & {
+  label: string;
+};
+
+export default function MentionMenuItem({
+  label,
+  ...rest
+}: MentionMenuItemProps) {
+  return <SuggestionsMenuItem {...rest} title={label} />;
+}

app/editor/components/NodeViewRenderer.tsx

@@ -25,9 +25,4 @@ export class NodeViewRenderer<T extends object> {
       this.props = props;
     }
   }
-
-  @action
-  public setProp<K extends keyof T>(key: K, value: T[K]) {
-    this.props[key] = value;
-  }
 }

app/editor/components/PasteMenu.tsx

@@ -1,67 +0,0 @@
-import { LinkIcon } from "outline-icons";
-import React from "react";
-import { useTranslation } from "react-i18next";
-import { EmbedDescriptor } from "@shared/editor/embeds";
-import SuggestionsMenu, {
-  Props as SuggestionsMenuProps,
-} from "./SuggestionsMenu";
-import SuggestionsMenuItem from "./SuggestionsMenuItem";
-
-type Props = Omit<
-  SuggestionsMenuProps,
-  "renderMenuItem" | "items" | "embeds"
-> & {
-  pastedText: string;
-  embeds: EmbedDescriptor[];
-};
-
-const PasteMenu = ({ embeds, ...props }: Props) => {
-  const { t } = useTranslation();
-
-  const embed = React.useMemo(() => {
-    for (const e of embeds) {
-      const matches = e.matcher(props.pastedText);
-      if (matches) {
-        return e;
-      }
-    }
-    return;
-  }, [embeds, props.pastedText]);
-
-  const items = React.useMemo(
-    () => [
-      {
-        name: "link",
-        title: t("Keep as link"),
-        icon: <LinkIcon />,
-      },
-      {
-        name: "embed",
-        title: t("Embed"),
-        icon: embed?.icon,
-        keywords: embed?.keywords,
-      },
-    ],
-    [embed, t]
-  );
-
-  return (
-    <SuggestionsMenu
-      {...props}
-      filterable={false}
-      renderMenuItem={(item, _index, options) => (
-        <SuggestionsMenuItem
-          onClick={() => {
-            props.onSelect?.(item);
-          }}
-          selected={options.selected}
-          title={item.title}
-          icon={item.icon}
-        />
-      )}
-      items={items}
-    />
-  );
-};
-
-export default PasteMenu;