Merge branch 'main' into tom/singleton-tooltip

* Adds count of occurences and index to find and replace

* Disable replace buttons also

.circleci/config.yml

@@ -4,12 +4,6 @@ defaults: &defaults
   working_directory: ~/outline
   docker:
     - image: cimg/node:20.10
-    - image: cimg/redis:5.0
-    - image: cimg/postgres:14.2
-      environment:
-        POSTGRES_USER: postgres
-        POSTGRES_PASSWORD: password
-        POSTGRES_DB: circle_test
   resource_class: large
   environment:
     NODE_ENV: test
@@ -78,6 +72,14 @@ jobs:
   test-server:
     <<: *defaults
     parallelism: 3
+    docker:
+      - image: cimg/node:20.10
+      - image: cimg/redis:5.0
+      - image: cimg/postgres:14.2
+        environment:
+          POSTGRES_USER: postgres
+          POSTGRES_PASSWORD: password
+          POSTGRES_DB: circle_test
     steps:
       - checkout
       - restore_cache:

LICENSE

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

app/actions/definitions/documents.tsx

@@ -28,6 +28,7 @@ import {
   EyeIcon,
   PadlockIcon,
   GlobeIcon,
+  LogoutIcon,
 } from "outline-icons";
 import * as React from "react";
 import { toast } from "sonner";
@@ -37,13 +38,14 @@ import {
   NavigationNode,
 } from "@shared/types";
 import { getEventFiles } from "@shared/utils/files";
+import UserMembership from "~/models/UserMembership";
 import DocumentDelete from "~/scenes/DocumentDelete";
 import DocumentMove from "~/scenes/DocumentMove";
 import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DuplicateDialog from "~/components/DuplicateDialog";
+import DocumentCopy from "~/components/DocumentCopy";
 import Icon from "~/components/Icon";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
@@ -129,11 +131,30 @@ export const createDocumentFromTemplate = createAction({
   section: DocumentSection,
   icon: <NewDocumentIcon />,
   keywords: "create",
-  visible: ({ currentTeamId, activeDocumentId, stores }) =>
-    !!currentTeamId &&
-    !!activeDocumentId &&
-    !!stores.documents.get(activeDocumentId)?.template &&
-    stores.policies.abilities(currentTeamId).createDocument,
+  visible: ({
+    currentTeamId,
+    activeCollectionId,
+    activeDocumentId,
+    stores,
+  }) => {
+    const document = activeDocumentId
+      ? stores.documents.get(activeDocumentId)
+      : undefined;
+
+    if (
+      !currentTeamId ||
+      !document?.isTemplate ||
+      !!document?.isDraft ||
+      !!document?.isDeleted
+    ) {
+      return false;
+    }
+
+    if (activeCollectionId) {
+      return stores.policies.abilities(activeCollectionId).createDocument;
+    }
+    return stores.policies.abilities(currentTeamId).createDocument;
+  },
   perform: ({ activeCollectionId, activeDocumentId, sidebarContext }) =>
     history.push(
       newDocumentPath(activeCollectionId, { templateId: activeDocumentId }),
@@ -541,7 +562,7 @@ export const duplicateDocument = createAction({
     stores.dialogs.openModal({
       title: t("Copy document"),
       content: (
-        <DuplicateDialog
+        <DocumentCopy
           document={document}
           onSubmit={(response) => {
             stores.dialogs.closeAllModals();
@@ -1033,7 +1054,7 @@ export const openDocumentComments = createAction({
       return;
     }
 
-    stores.ui.toggleComments(activeDocumentId);
+    stores.ui.toggleComments();
   },
 });
 
@@ -1119,6 +1140,42 @@ export const toggleViewerInsights = createAction({
   },
 });
 
+export const leaveDocument = createAction({
+  name: ({ t }) => t("Leave document"),
+  analyticsName: "Leave document",
+  section: ActiveDocumentSection,
+  icon: <LogoutIcon />,
+  visible: ({ currentUserId, activeDocumentId, stores }) => {
+    const membership = stores.userMemberships.orderedData.find(
+      (m) => m.documentId === activeDocumentId && m.userId === currentUserId
+    );
+
+    return !!membership;
+  },
+  perform: async ({ t, location, currentUserId, activeDocumentId, stores }) => {
+    if (!activeDocumentId) {
+      return;
+    }
+
+    const document = stores.documents.get(activeDocumentId);
+
+    try {
+      if (document && location.pathname.startsWith(document.path)) {
+        history.push(homePath());
+      }
+
+      await stores.userMemberships.delete({
+        documentId: activeDocumentId,
+        userId: currentUserId,
+      } as UserMembership);
+
+      toast.success(t("You have left the shared document"));
+    } catch (err) {
+      toast.error(t("Could not leave document"));
+    }
+  },
+});
+
 export const rootDocumentActions = [
   openDocument,
   archiveDocument,
@@ -1137,6 +1194,7 @@ export const rootDocumentActions = [
   subscribeDocument,
   unsubscribeDocument,
   duplicateDocument,
+  leaveDocument,
   moveTemplateToWorkspace,
   moveDocumentToCollection,
   openRandomDocument,

app/components/Actions.ts

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

app/components/AuthenticatedLayout.tsx

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

app/components/Breadcrumb.tsx

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

app/components/Collaborators.tsx

@@ -18,6 +18,8 @@ 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;
 };
 
 /**
@@ -25,6 +27,7 @@ type Props = {
  * and presence status.
  */
 function Collaborators(props: Props) {
+  const { limit = 6 } = props;
   const { t } = useTranslation();
   const user = useCurrentUser();
   const currentUserId = user?.id;
@@ -75,8 +78,6 @@ function Collaborators(props: Props) {
     placement: "bottom-end",
   });
 
-  const limit = 8;
-
   return (
     <>
       <PopoverDisclosure {...popover}>
@@ -88,6 +89,7 @@ function Collaborators(props: Props) {
           >
             <Facepile
               limit={limit}
+              overflow={collaborators.length - limit}
               users={collaborators}
               renderAvatar={(collaborator) => {
                 const isPresent = presentIds.includes(collaborator.id);

app/components/CollectionDescription.tsx

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

app/components/CommandBar/useTemplatesAction.tsx

@@ -2,7 +2,11 @@ import { NewDocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
 import Icon from "~/components/Icon";
 import { createAction } from "~/actions";
-import { DocumentSection } from "~/actions/sections";
+import {
+  ActiveCollectionSection,
+  DocumentSection,
+  TeamSection,
+} from "~/actions/sections";
 import useStores from "~/hooks/useStores";
 import history from "~/utils/history";
 import { newDocumentPath } from "~/utils/routeHelpers";
@@ -11,26 +15,42 @@ const useTemplatesAction = () => {
   const { documents } = useStores();
 
   React.useEffect(() => {
-    void documents.fetchTemplates();
+    void documents.fetchAllTemplates();
   }, [documents]);
 
   const actions = React.useMemo(
     () =>
-      documents.templatesAlphabetical.map((item) =>
+      documents.templatesAlphabetical.map((template) =>
         createAction({
-          name: item.titleWithDefault,
+          name: template.titleWithDefault,
           analyticsName: "New document",
-          section: DocumentSection,
-          icon: item.icon ? (
-            <Icon value={item.icon} color={item.color ?? undefined} />
+          section: template.isWorkspaceTemplate
+            ? TeamSection
+            : ActiveCollectionSection,
+          icon: template.icon ? (
+            <Icon value={template.icon} color={template.color ?? undefined} />
           ) : (
             <NewDocumentIcon />
           ),
           keywords: "create",
+          visible: ({ currentTeamId, activeCollectionId, stores }) => {
+            if (activeCollectionId) {
+              return (
+                stores.policies.abilities(activeCollectionId).createDocument &&
+                (template.collectionId === activeCollectionId ||
+                  template.isWorkspaceTemplate)
+              );
+            }
+            return (
+              !!currentTeamId &&
+              stores.policies.abilities(currentTeamId).createDocument &&
+              template.isWorkspaceTemplate
+            );
+          },
           perform: ({ activeCollectionId, sidebarContext }) =>
             history.push(
-              newDocumentPath(item.collectionId ?? activeCollectionId, {
-                templateId: item.id,
+              newDocumentPath(template.collectionId ?? activeCollectionId, {
+                templateId: template.id,
               }),
               {
                 sidebarContext,
@@ -49,9 +69,15 @@ const useTemplatesAction = () => {
         placeholder: ({ t }) => t("Choose a template"),
         section: DocumentSection,
         icon: <ShapesIcon />,
-        visible: ({ currentTeamId, stores }) =>
-          !!currentTeamId &&
-          stores.policies.abilities(currentTeamId).createDocument,
+        visible: ({ currentTeamId, activeCollectionId, stores }) => {
+          if (activeCollectionId) {
+            return stores.policies.abilities(activeCollectionId).createDocument;
+          }
+          return (
+            !!currentTeamId &&
+            stores.policies.abilities(currentTeamId).createDocument
+          );
+        },
         children: () => actions,
       }),
     [actions]

app/components/ContentEditable.tsx

@@ -182,7 +182,6 @@ 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/index.tsx

@@ -262,22 +262,6 @@ 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

@@ -57,11 +57,10 @@ function useCategory(document: Document): MenuInternalLink | null {
   return null;
 }
 
-const DocumentBreadcrumb: React.FC<Props> = ({
-  document,
-  children,
-  onlyText,
-}: Props) => {
+function DocumentBreadcrumb(
+  { document, children, onlyText }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
   const { collections } = useStores();
   const { t } = useTranslation();
   const category = useCategory(document);
@@ -140,11 +139,11 @@ const DocumentBreadcrumb: React.FC<Props> = ({
   }
 
   return (
-    <Breadcrumb items={items} highlightFirstItem>
+    <Breadcrumb items={items} ref={ref} highlightFirstItem>
       {children}
     </Breadcrumb>
   );
-};
+}
 
 const StyledIcon = styled(Icon)`
   margin-right: 2px;
@@ -160,4 +159,4 @@ const SmallSlash = styled(GoToIcon)`
   opacity: 0.5;
 `;
 
-export default observer(DocumentBreadcrumb);
+export default observer(React.forwardRef(DocumentBreadcrumb));

app/components/DocumentCard.tsx

@@ -39,6 +39,7 @@ function DocumentCard(props: Props) {
   const { collections } = useStores();
   const theme = useTheme();
   const { document, pin, canUpdatePin, isDraggable } = props;
+  const pinnedToHome = React.useRef(!pin?.collectionId).current;
   const collection = document.collectionId
     ? collections.get(document.collectionId)
     : undefined;
@@ -122,13 +123,13 @@ function DocumentCard(props: Props) {
               <Squircle
                 color={
                   collection?.color ??
-                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
+                  (pinnedToHome ? theme.slateLight : theme.slateDark)
                 }
               >
                 {collection?.icon &&
                 collection?.icon !== "letter" &&
                 collection?.icon !== "collection" &&
-                !pin?.collectionId ? (
+                pinnedToHome ? (
                   <CollectionIcon collection={collection} color="white" />
                 ) : (
                   <DocumentIcon color="white" />
@@ -143,12 +144,7 @@ function DocumentCard(props: Props) {
               </Heading>
               <DocumentMeta size="xsmall">
                 <Clock size={18} />
-                <Time
-                  dateTime={document.updatedAt}
-                  tooltipDelay={500}
-                  addSuffix
-                  shorten
-                />
+                <Time dateTime={document.updatedAt} addSuffix shorten />
               </DocumentMeta>
             </div>
           </Content>

app/components/DocumentCopy.tsx

@@ -0,0 +1,149 @@
+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

@@ -31,15 +31,15 @@ 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 }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
   const isMobile = useMobile();
   const { collections, documents } = useStores();
   const { t } = useTranslation();
@@ -47,12 +47,25 @@ function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
 
   const [searchTerm, setSearchTerm] = React.useState<string>();
   const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    null
+    () => {
+      const node =
+        defaultValue && items.find((item) => item.id === defaultValue);
+      return node || null;
+    }
   );
   const [initialScrollOffset, setInitialScrollOffset] =
     React.useState<number>(0);
   const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
+  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 [itemRefs, setItemRefs] = React.useState<
     React.RefObject<HTMLSpanElement>[]
   >([]);
@@ -94,6 +107,15 @@ function DocumentExplorer({ onSubmit, onSelect, items }: 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

@@ -111,11 +111,7 @@ function DocumentListItem(
             <Badge yellow>{t("New")}</Badge>
           )}
           {document.isDraft && showDraft && (
-            <Tooltip
-              content={t("Only visible to you")}
-              delay={500}
-              placement="top"
-            >
+            <Tooltip content={t("Only visible to you")} placement="top">
               <Badge>{t("Draft")}</Badge>
             </Tooltip>
           )}

app/components/DuplicateDialog.tsx

@@ -1,97 +0,0 @@
-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

@@ -268,14 +268,15 @@ function Editor(props: Props, ref: React.RefObject<SharedEditor> | null) {
           placeholder={props.placeholder || ""}
           defaultValue={props.defaultValue || ""}
         />
-        {props.editorStyle?.paddingBottom && (
-          <ClickablePadding
-            onClick={props.readOnly ? undefined : focusAtEnd}
-            onDrop={props.readOnly ? undefined : handleDrop}
-            onDragOver={props.readOnly ? undefined : handleDragOver}
-            minHeight={props.editorStyle.paddingBottom}
-          />
-        )}
+        {props.editorStyle?.paddingBottom &&
+          (!props.readOnly || props.shareId) && (
+            <ClickablePadding
+              onClick={props.readOnly ? undefined : focusAtEnd}
+              onDrop={props.readOnly ? undefined : handleDrop}
+              onDragOver={props.readOnly ? undefined : handleDragOver}
+              minHeight={props.editorStyle.paddingBottom}
+            />
+          )}
       </>
     </ErrorBoundary>
   );

app/components/EventListItem.tsx

@@ -27,7 +27,7 @@ import { documentHistoryPath } from "~/utils/routeHelpers";
 
 type Props = {
   document: Document;
-  event: Event;
+  event: Event<Document>;
   latest?: boolean;
 };
 
@@ -140,7 +140,6 @@ 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

@@ -229,7 +229,7 @@ const SearchInput = styled(Input)`
   ${Outline} {
     border: none;
     border-radius: 0;
-    border-bottom: 1px solid ${s("inputBorder")};
+    border-bottom: 1px solid rgb(34 40 52);
     background: ${s("menuBackground")};
   }
 

app/components/Guide.tsx

@@ -94,7 +94,6 @@ 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,6 +3,7 @@ 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";
@@ -10,6 +11,7 @@ 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";
@@ -21,16 +23,22 @@ export const HEADER_HEIGHT = 64;
 type Props = {
   left?: React.ReactNode;
   title: React.ReactNode;
-  actions?: React.ReactNode;
+  actions?:
+    | ((props: { isCompact: boolean }) => React.ReactNode)
+    | React.ReactNode;
   hasSidebar?: boolean;
   className?: string;
 };
 
-function Header({ left, title, actions, hasSidebar, className }: Props) {
+function Header(
+  { left, title, actions, hasSidebar, className }: Props,
+  ref: React.RefObject<HTMLDivElement> | null
+) {
   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);
@@ -53,8 +61,18 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
     });
   }, []);
 
+  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 (
     <Wrapper
+      ref={mergeRefs([ref, internalRef])}
       align="center"
       shrink={false}
       className={className}
@@ -62,7 +80,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
       $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
     >
       {left || hasMobileSidebar ? (
-        <Breadcrumbs>
+        <Breadcrumbs ref={setBreadcrumbRef}>
           {hasMobileSidebar && (
             <MobileMenuButton
               onClick={ui.toggleMobileSidebar}
@@ -74,7 +92,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
         </Breadcrumbs>
       ) : null}
 
-      {isScrolled ? (
+      {isScrolled && !isCompact ? (
         <Title onClick={handleClickTitle}>
           <Fade>{title}</Fade>
         </Title>
@@ -82,7 +100,7 @@ function Header({ left, title, actions, hasSidebar, className }: Props) {
         <div />
       )}
       <Actions align="center" justify="flex-end">
-        {actions}
+        {typeof actions === "function" ? actions({ isCompact }) : actions}
       </Actions>
     </Wrapper>
   );
@@ -130,7 +148,6 @@ 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;
@@ -152,7 +169,6 @@ const Wrapper = styled(Flex)<WrapperProps>`
 
   ${breakpoint("tablet")`
     padding: 16px;
-    justify-content: center;
     ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
     `};
 `;
@@ -191,4 +207,4 @@ const MobileMenuButton = styled(Button)`
   }
 `;
 
-export default observer(Header);
+export default observer(React.forwardRef(Header));

app/components/LanguagePrompt.tsx

@@ -47,14 +47,16 @@ export default function LanguagePrompt() {
           <br />
           <Link
             onClick={async () => {
-              ui.setLanguagePromptDismissed();
+              ui.set({ languagePromptDismissed: true });
               await user.save({ language });
             }}
           >
             {t("Change Language")}
           </Link>{" "}
           &middot;{" "}
-          <Link onClick={ui.setLanguagePromptDismissed}>{t("Dismiss")}</Link>
+          <Link onClick={() => ui.set({ languagePromptDismissed: true })}>
+            {t("Dismiss")}
+          </Link>
         </span>
       </Flex>
     </Wrapper>

app/components/Layout.tsx

@@ -76,7 +76,6 @@ 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/LocaleTime.tsx

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

app/components/Modal.tsx

@@ -174,7 +174,6 @@ const Fullscreen = styled.div<FullscreenProps>`
   justify-content: center;
   align-items: flex-start;
   background: ${s("background")};
-  transition: ${s("backgroundTransition")};
   outline: none;
 
   ${breakpoint("tablet")`
@@ -265,7 +264,6 @@ 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

@@ -52,11 +52,7 @@ function NotificationListItem({ notification, onNavigate }: Props) {
             <Text weight="bold">{notification.subject}</Text>
           </Text>
           <Text type="tertiary" size="xsmall">
-            <Time
-              dateTime={notification.createdAt}
-              tooltipDelay={1000}
-              addSuffix
-            />{" "}
+            <Time dateTime={notification.createdAt} addSuffix />{" "}
             {collection && <>&middot; {collection.name}</>}
           </Text>
           {notification.comment && (

app/components/Notifications/Notifications.tsx

@@ -60,7 +60,7 @@ function Notifications(
           </Text>
           <Flex gap={8}>
             {notifications.approximateUnreadCount > 0 && (
-              <Tooltip delay={500} content={t("Mark all as read")}>
+              <Tooltip content={t("Mark all as read")}>
                 <Button action={markNotificationsAsRead} context={context}>
                   <MarkAsReadIcon />
                 </Button>

app/components/PaginatedEventList.tsx

@@ -6,9 +6,11 @@ import PaginatedList from "~/components/PaginatedList";
 import EventListItem from "./EventListItem";
 
 type Props = {
-  events: Event[];
+  events: Event<Document>[];
   document: Document;
-  fetch: (options: Record<string, any> | undefined) => Promise<Event[]>;
+  fetch: (
+    options: Record<string, any> | undefined
+  ) => Promise<Event<Document>[]>;
   options?: Record<string, any>;
   heading?: React.ReactNode;
   empty?: React.ReactNode;
@@ -30,7 +32,7 @@ const PaginatedEventList = React.memo<Props>(function PaginatedEventList({
       heading={heading}
       fetch={fetch}
       options={options}
-      renderItem={(item: Event, index) => (
+      renderItem={(item: Event<Document>, index) => (
         <EventListItem
           key={item.id}
           event={item}

app/components/Reactions/Reaction.tsx

@@ -128,7 +128,7 @@ const Reaction: React.FC<Props> = ({
   );
 
   return tooltipContent ? (
-    <Tooltip content={tooltipContent} delay={250} placement="bottom">
+    <Tooltip content={tooltipContent} placement="bottom">
       {DisplayedEmoji}
     </Tooltip>
   ) : (
@@ -144,7 +144,6 @@ 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

@@ -2,7 +2,6 @@ import { ReactionIcon } from "outline-icons";
 import React from "react";
 import { useTranslation } from "react-i18next";
 import { PopoverDisclosure, usePopoverState } from "reakit";
-import styled from "styled-components";
 import EventBoundary from "@shared/components/EventBoundary";
 import Flex from "~/components/Flex";
 import NudeButton from "~/components/NudeButton";
@@ -11,6 +10,7 @@ import Popover from "~/components/Popover";
 import useMobile from "~/hooks/useMobile";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import useWindowSize from "~/hooks/useWindowSize";
+import Tooltip from "../Tooltip";
 
 const EmojiPanel = React.lazy(
   () => import("~/components/IconPicker/components/EmojiPanel")
@@ -98,15 +98,17 @@ const ReactionPicker: React.FC<Props> = ({
     <>
       <PopoverDisclosure {...popover}>
         {(props) => (
-          <PopoverButton
-            {...props}
-            aria-label={t("Reaction picker")}
-            className={className}
-            onClick={handlePopoverButtonClick}
-            size={size}
-          >
-            <ReactionIcon size={22} />
-          </PopoverButton>
+          <Tooltip content={t("Add reaction")} placement="top" hideOnClick>
+            <NudeButton
+              {...props}
+              aria-label={t("Reaction picker")}
+              className={className}
+              onClick={handlePopoverButtonClick}
+              size={size}
+            >
+              <ReactionIcon size={22} />
+            </NudeButton>
+          </Tooltip>
         )}
       </PopoverDisclosure>
       <Popover
@@ -151,8 +153,4 @@ const Placeholder = React.memo(
 );
 Placeholder.displayName = "ReactionPickerPlaceholder";
 
-const PopoverButton = styled(NudeButton)`
-  border-radius: 50%;
-`;
-
 export default ReactionPicker;

app/components/Sharing/Document/PublicAccess.tsx

@@ -1,12 +1,13 @@
 import debounce from "lodash/debounce";
 import isEmpty from "lodash/isEmpty";
 import { observer } from "mobx-react";
-import { CopyIcon, GlobeIcon, InfoIcon } from "outline-icons";
+import { CopyIcon, GlobeIcon, InfoIcon, QuestionMarkIcon } from "outline-icons";
 import * as React from "react";
 import { Trans, useTranslation } from "react-i18next";
 import { Link } from "react-router-dom";
 import { toast } from "sonner";
 import styled, { useTheme } from "styled-components";
+import Flex from "@shared/components/Flex";
 import Squircle from "@shared/components/Squircle";
 import { s } from "@shared/styles";
 import { UrlHelper } from "@shared/utils/UrlHelper";
@@ -50,6 +51,19 @@ function PublicAccess({ document, share, sharedParent }: Props) {
     setUrlId(share?.urlId);
   }, [share?.urlId]);
 
+  const handleIndexingChanged = React.useCallback(
+    async (event) => {
+      try {
+        await share?.save({
+          allowIndexing: event.currentTarget.checked,
+        });
+      } catch (err) {
+        toast.error(err.message);
+      }
+    },
+    [share]
+  );
+
   const handlePublishedChange = React.useCallback(
     async (event) => {
       try {
@@ -105,7 +119,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
     : share?.url ?? "";
 
   const copyButton = (
-    <Tooltip content={t("Copy public link")} delay={500} placement="top">
+    <Tooltip content={t("Copy public link")} placement="top">
       <CopyToClipboard text={shareUrl} onCopy={handleCopied}>
         <NudeButton type="button" disabled={!share} style={{ marginRight: 3 }}>
           <CopyIcon color={theme.placeholder} size={18} />
@@ -153,6 +167,32 @@ function PublicAccess({ document, share, sharedParent }: Props) {
       />
 
       <ResizingHeightContainer>
+        {share?.published && (
+          <ListItem
+            title={
+              <Text type="tertiary" as={Flex}>
+                {t("Search engine indexing")}&nbsp;
+                <Tooltip
+                  content={t(
+                    "Disable this setting to discourage search engines from indexing the page"
+                  )}
+                >
+                  <QuestionMarkIcon size={18} />
+                </Tooltip>
+              </Text>
+            }
+            actions={
+              <Switch
+                aria-label={t("Search engine indexing")}
+                checked={share?.allowIndexing ?? false}
+                onChange={handleIndexingChanged}
+                width={26}
+                height={14}
+              />
+            }
+          />
+        )}
+
         {sharedParent?.published ? (
           <ShareLinkInput type="text" disabled defaultValue={shareUrl}>
             {copyButton}

app/components/Sharing/components/CopyLinkButton.tsx

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

app/components/Sidebar/App.tsx

@@ -80,7 +80,6 @@ function AppSidebar() {
                 <Tooltip
                   content={t("Toggle sidebar")}
                   shortcut={`${metaDisplay}+.`}
-                  delay={500}
                 >
                   <ToggleButton
                     position="bottom"

app/components/Sidebar/Right.tsx

@@ -32,13 +32,13 @@ function Right({ children, border, className }: Props) {
         Math.min(window.innerWidth - event.pageX, maxWidth),
         minWidth
       );
-      ui.setRightSidebarWidth(width);
+      ui.set({ sidebarRightWidth: width });
     },
     [minWidth, maxWidth, ui]
   );
 
   const handleReset = React.useCallback(() => {
-    ui.setRightSidebarWidth(theme.sidebarRightWidth);
+    ui.set({ sidebarRightWidth: theme.sidebarRightWidth });
   }, [ui, theme.sidebarRightWidth]);
 
   const handleStopDrag = React.useCallback(() => {
@@ -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: 1;
+  z-index: ${depths.sidebar};
 
   ${breakpoint("mobile", "tablet")`
     display: flex;

app/components/Sidebar/Settings.tsx

@@ -42,11 +42,7 @@ function SettingsSidebar() {
         image={<StyledBackIcon />}
         onClick={returnToApp}
       >
-        <Tooltip
-          content={t("Toggle sidebar")}
-          shortcut={`${metaDisplay}+.`}
-          delay={500}
-        >
+        <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
           <ToggleButton
             position="bottom"
             image={<SidebarIcon />}

app/components/Sidebar/Shared.tsx

@@ -81,11 +81,7 @@ const ToggleSidebar = () => {
   const { ui } = useStores();
 
   return (
-    <Tooltip
-      content={t("Toggle sidebar")}
-      shortcut={`${metaDisplay}+.`}
-      delay={500}
-    >
+    <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
       <ToggleButton
         position="bottom"
         image={<SidebarIcon />}

app/components/Sidebar/Sidebar.tsx

@@ -46,7 +46,6 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   const maxWidth = theme.sidebarMaxWidth;
   const minWidth = theme.sidebarMinWidth + 16; // padding
 
-  const setWidth = ui.setSidebarWidth;
   const [offset, setOffset] = React.useState(0);
   const [isHovering, setHovering] = React.useState(false);
   const [isAnimating, setAnimating] = React.useState(false);
@@ -62,13 +61,13 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
       const width = Math.min(event.pageX - offset, maxWidth);
       const isSmallerThanCollapsePoint = width < minWidth / 2;
 
-      if (isSmallerThanCollapsePoint) {
-        setWidth(theme.sidebarCollapsedWidth);
-      } else {
-        setWidth(width);
-      }
+      ui.set({
+        sidebarWidth: isSmallerThanCollapsePoint
+          ? theme.sidebarCollapsedWidth
+          : width,
+      });
     },
-    [theme, offset, minWidth, maxWidth, setWidth]
+    [ui, theme, offset, minWidth, maxWidth]
   );
 
   const handleStopDrag = React.useCallback(() => {
@@ -86,13 +85,13 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
         setCollapsing(true);
         ui.collapseSidebar();
       } else {
-        setWidth(minWidth);
+        ui.set({ sidebarWidth: minWidth });
         setAnimating(true);
       }
     } else {
-      setWidth(width);
+      ui.set({ sidebarWidth: width });
     }
-  }, [ui, isSmallerThanMinimum, minWidth, width, setWidth]);
+  }, [ui, isSmallerThanMinimum, minWidth, width]);
 
   const handleBlur = React.useCallback(() => {
     setHovering(false);
@@ -149,11 +148,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   React.useEffect(() => {
     if (isCollapsing) {
       setTimeout(() => {
-        setWidth(minWidth);
+        ui.set({ sidebarWidth: minWidth });
         setCollapsing(false);
       }, ANIMATION_MS);
     }
-  }, [setWidth, minWidth, isCollapsing]);
+  }, [ui, minWidth, isCollapsing]);
 
   React.useEffect(() => {
     if (isResizing) {
@@ -174,7 +173,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
   }, [isResizing, handleDrag, handleBlur, handleStopDrag]);
 
   const handleReset = React.useCallback(() => {
-    ui.setSidebarWidth(theme.sidebarWidth);
+    ui.set({ sidebarWidth: theme.sidebarWidth });
   }, [ui, theme.sidebarWidth]);
 
   React.useEffect(() => {
@@ -299,9 +298,8 @@ const Container = styled(Flex)<ContainerProps>`
   width: 100%;
   background: ${s("sidebarBackground")};
   transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
-    ${s("backgroundTransition")}
-      ${(props: ContainerProps) =>
-        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
+    ${(props: ContainerProps) =>
+      props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
   transform: translateX(
     ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
   );

app/components/Sidebar/components/DocumentLink.tsx

@@ -278,7 +278,7 @@ function InnerDocumentLink(
                   !isDraggingAnyDocument ? (
                     <Fade>
                       {can.createChildDocument && (
-                        <Tooltip content={t("New doc")} delay={500}>
+                        <Tooltip content={t("New doc")}>
                           <NudeButton
                             type={undefined}
                             aria-label={t("New nested document")}

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")} delay={500}>
+      <Tooltip content={t("Go back")}>
         <NudeButton onClick={() => Desktop.bridge?.goBack()}>
           <Back $active={back} />
         </NudeButton>
       </Tooltip>
-      <Tooltip content={t("Go forward")} delay={500}>
+      <Tooltip content={t("Go forward")}>
         <NudeButton onClick={() => Desktop.bridge?.goForward()}>
           <Forward $active={forward} />
         </NudeButton>

app/components/Sidebar/components/NavLink.tsx

@@ -112,8 +112,9 @@ const NavLink = ({
       !rest.target &&
       !event.altKey &&
       !event.metaKey &&
-      !event.ctrlKey,
-    [rest.target]
+      !event.ctrlKey &&
+      !isActive,
+    [rest.target, isActive]
   );
 
   const navigateTo = React.useCallback(() => {
@@ -153,14 +154,13 @@ const NavLink = ({
     <Link
       key={isActive ? "active" : "inactive"}
       ref={linkRef}
-      // onMouseDown={handleClick}
+      onClick={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/SidebarButton.tsx

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

app/components/Sidebar/components/SidebarLink.tsx

@@ -78,7 +78,6 @@ function SidebarLink(
 
   const activeStyle = React.useMemo(
     () => ({
-      fontWeight: 600,
       color: theme.text,
       background: theme.sidebarActiveBackground,
       ...style,
@@ -202,10 +201,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/StarredLink.tsx

@@ -48,13 +48,20 @@ function StarredLink({ star }: Props) {
 
   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,

app/components/Subheading.tsx

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

app/components/Table.tsx

@@ -253,6 +253,7 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
   white-space: nowrap;
   margin: 0 -4px;
   padding: 0 4px;
+  cursor: ${(props) => (props.$sortable ? `var(--pointer)` : "")};
 
   &:hover {
     background: ${(props) =>
@@ -309,15 +310,13 @@ const Row = styled.tr`
 
 const Head = styled.th`
   text-align: left;
-  padding: 6px 6px 0;
+  padding: 6px 6px 2px;
   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;

app/components/Tabs.tsx

@@ -45,7 +45,6 @@ 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 tooltipDelay={250} {...props} />
+        <LocaleTime {...props} />
       </React.Suspense>
     </span>
   );

app/components/Tooltip.tsx

@@ -1,9 +1,9 @@
 import Tippy, { TippyProps } from "@tippyjs/react";
 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. */
@@ -12,8 +12,9 @@ export type Props = Omit<TippyProps, "content" | "theme"> & {
   shortcut?: React.ReactNode;
 };
 
-function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
+function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
   const isMobile = useMobile();
+  const singleton = useTooltipContext();
 
   let content = <>{tooltip}</>;
 
@@ -30,15 +31,7 @@ function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
   }
 
   return (
-    <Tippy
-      arrow={roundArrow}
-      animation="shift-away"
-      content={content}
-      delay={delay}
-      duration={[200, 150]}
-      inertia
-      {...rest}
-    />
+    <Tippy content={content} delay={delay} singleton={singleton} {...rest} />
   );
 }
 
@@ -132,7 +125,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

@@ -0,0 +1,36 @@
+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;
+  tippyProps?: TippyProps;
+};
+
+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

@@ -1,42 +0,0 @@
-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/WebsocketProvider.tsx

@@ -529,13 +529,6 @@ 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

@@ -25,10 +25,18 @@ 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({
@@ -36,6 +44,8 @@ export default function FindAndReplace({
   open,
   onOpen,
   onClose,
+  currentIndex,
+  totalResults,
 }: Props) {
   const editor = useEditor();
   const finalFocusRef = React.useRef<HTMLElement>(
@@ -270,25 +280,26 @@ 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 onClick={() => editor.commands.prevSearchMatch()}>
+        <ButtonLarge
+          disabled={disabled}
+          onClick={() => editor.commands.prevSearchMatch()}
+        >
           <CaretUpIcon />
         </ButtonLarge>
       </Tooltip>
-      <Tooltip
-        content={t("Next match")}
-        shortcut="enter"
-        delay={500}
-        placement="bottom"
-      >
-        <ButtonLarge onClick={() => editor.commands.nextSearchMatch()}>
+      <Tooltip content={t("Next match")} shortcut="enter" placement="bottom">
+        <ButtonLarge
+          disabled={disabled}
+          onClick={() => editor.commands.nextSearchMatch()}
+        >
           <CaretDownIcon />
         </ButtonLarge>
       </Tooltip>
@@ -306,7 +317,7 @@ export default function FindAndReplace({
         width={420}
       >
         <Content column>
-          <Flex gap={8}>
+          <Flex gap={4}>
             <StyledInput
               ref={inputRef}
               maxLength={255}
@@ -319,7 +330,6 @@ export default function FindAndReplace({
                 <Tooltip
                   content={t("Match case")}
                   shortcut={`${altDisplay}+${metaDisplay}+c`}
-                  delay={500}
                   placement="bottom"
                 >
                   <ButtonSmall onClick={handleCaseSensitive}>
@@ -331,7 +341,6 @@ export default function FindAndReplace({
                 <Tooltip
                   content={t("Enable regex")}
                   shortcut={`${altDisplay}+${metaDisplay}+r`}
-                  delay={500}
                   placement="bottom"
                 >
                   <ButtonSmall onClick={handleRegex}>
@@ -344,16 +353,15 @@ export default function FindAndReplace({
             </StyledInput>
             {navigation}
             {!readOnly && (
-              <Tooltip
-                content={t("Replace options")}
-                delay={500}
-                placement="bottom"
-              >
+              <Tooltip content={t("Replace options")} placement="bottom">
                 <ButtonLarge onClick={handleMore}>
                   <ReplaceIcon color={theme.textSecondary} />
                 </ButtonLarge>
               </Tooltip>
             )}
+            <Results>
+              {totalResults > 0 ? currentIndex + 1 : 0} / {totalResults}
+            </Results>
           </Flex>
           <ResizingHeightContainer>
             {showReplace && !readOnly && (
@@ -367,10 +375,10 @@ export default function FindAndReplace({
                   onRequestSubmit={handleReplaceAll}
                   onChange={(ev) => setReplaceTerm(ev.currentTarget.value)}
                 />
-                <Button onClick={handleReplace} neutral>
+                <Button onClick={handleReplace} disabled={disabled} neutral>
                   {t("Replace")}
                 </Button>
-                <Button onClick={handleReplaceAll} neutral>
+                <Button onClick={handleReplaceAll} disabled={disabled} neutral>
                   {t("Replace all")}
                 </Button>
               </Flex>
@@ -396,6 +404,12 @@ const ButtonSmall = styled(NudeButton)`
   &[aria-expanded="true"] {
     background: ${s("sidebarControlHoverBackground")};
   }
+
+  &:disabled {
+    color: ${s("textTertiary")};
+    background: none;
+    cursor: default;
+  }
 `;
 
 const ButtonLarge = styled(ButtonSmall)`
@@ -408,3 +422,15 @@ 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,13 +131,15 @@ function usePosition({
 
   // Images need their own positioning to get the toolbar in the center
   if (isImageSelection) {
-    const element = view.nodeDOM(selection.from) as HTMLElement;
+    const element = view.nodeDOM(selection.from);
 
     // Images are wrapped which impacts positioning - need to get the element
     // specifically tagged as the handle
-    const imageElement = element.getElementsByClassName(
-      EditorStyleHelper.imageHandle
-    )[0];
+    const imageElement = element
+      ? (element as HTMLElement).getElementsByClassName(
+          EditorStyleHelper.imageHandle
+        )[0]
+      : undefined;
     if (imageElement) {
       const { left, top, width } = imageElement.getBoundingClientRect();
 

app/editor/components/SelectionToolbar.tsx

@@ -216,8 +216,7 @@ export default function SelectionToolbar(props: Props) {
   const colIndex = getColumnIndex(state);
   const rowIndex = getRowIndex(state);
   const isTableSelection = colIndex !== undefined && rowIndex !== undefined;
-  const link = isMarkActive(state.schema.marks.link)(state);
-  const range = getMarkRange(selection.$from, state.schema.marks.link);
+  const link = getMarkRange(selection.$from, state.schema.marks.link);
   const isImageSelection =
     selection instanceof NodeSelection && selection.node.type.name === "image";
   const isAttachmentSelection =
@@ -266,7 +265,8 @@ export default function SelectionToolbar(props: Props) {
     return null;
   }
 
-  const showLinkToolbar = link && range;
+  const showLinkToolbar =
+    link && link.from === selection.from && link.to === selection.to;
 
   return (
     <FloatingToolbar
@@ -276,12 +276,12 @@ export default function SelectionToolbar(props: Props) {
     >
       {showLinkToolbar ? (
         <LinkEditor
-          key={`${range.from}-${range.to}`}
+          key={`${link.from}-${link.to}`}
           dictionary={dictionary}
           view={view}
-          mark={range.mark}
-          from={range.from}
-          to={range.to}
+          mark={link.mark}
+          from={link.from}
+          to={link.to}
           onClickLink={props.onClickLink}
           onSearchLink={props.onSearchLink}
           onCreateLink={onCreateLink ? handleOnCreateLink : undefined}

app/editor/components/ToolbarMenu.tsx

@@ -1,3 +1,4 @@
+import { TippyProps } from "@tippyjs/react";
 import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
@@ -7,6 +8,7 @@ import { MenuItem } from "@shared/editor/types";
 import { s } from "@shared/styles";
 import ContextMenu from "~/components/ContextMenu";
 import Template from "~/components/ContextMenu/Template";
+import { TooltipProvider } from "~/components/TooltipContext";
 import { MenuItem as TMenuItem } from "~/types";
 import { useEditor } from "./EditorContext";
 import ToolbarButton from "./ToolbarButton";
@@ -75,6 +77,8 @@ function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
   );
 }
 
+const tippyProps = { placement: "top" } as TippyProps;
+
 function ToolbarMenu(props: Props) {
   const { commands, view } = useEditor();
   const { items } = props;
@@ -91,36 +95,38 @@ function ToolbarMenu(props: Props) {
   };
 
   return (
-    <FlexibleWrapper>
-      {items.map((item, index) => {
-        if (item.name === "separator" && item.visible !== false) {
-          return <ToolbarSeparator key={index} />;
-        }
-        if (item.visible === false || !item.icon) {
-          return null;
-        }
-        const isActive = item.active ? item.active(state) : false;
+    <TooltipProvider tippyProps={tippyProps}>
+      <FlexibleWrapper>
+        {items.map((item, index) => {
+          if (item.name === "separator" && item.visible !== false) {
+            return <ToolbarSeparator key={index} />;
+          }
+          if (item.visible === false || !item.icon) {
+            return null;
+          }
+          const isActive = item.active ? item.active(state) : false;
 
-        return (
-          <Tooltip
-            content={item.label === item.tooltip ? undefined : item.tooltip}
-            key={index}
-          >
-            {item.children ? (
-              <ToolbarDropdown active={isActive && !item.label} item={item} />
-            ) : (
-              <ToolbarButton
-                onClick={handleClick(item)}
-                active={isActive && !item.label}
-              >
-                {item.label && <Label>{item.label}</Label>}
-                {item.icon}
-              </ToolbarButton>
-            )}
-          </Tooltip>
-        );
-      })}
-    </FlexibleWrapper>
+          return (
+            <Tooltip
+              content={item.label === item.tooltip ? undefined : item.tooltip}
+              key={index}
+            >
+              {item.children ? (
+                <ToolbarDropdown active={isActive && !item.label} item={item} />
+              ) : (
+                <ToolbarButton
+                  onClick={handleClick(item)}
+                  active={isActive && !item.label}
+                >
+                  {item.label && <Label>{item.label}</Label>}
+                  {item.icon}
+                </ToolbarButton>
+              )}
+            </Tooltip>
+          );
+        })}
+      </FlexibleWrapper>
+    </TooltipProvider>
   );
 }
 

app/editor/components/Tooltip.tsx

@@ -8,8 +8,18 @@ type Props = {
   children?: React.ReactNode;
 };
 
-const WrappedTooltip: React.FC<Props> = ({ children, content }: Props) => (
-  <Tooltip offset={[0, 16]} delay={150} content={content} placement="top">
+const WrappedTooltip: React.FC<Props> = ({
+  children,
+  content,
+  ...rest
+}: Props) => (
+  <Tooltip
+    offset={[0, 16]}
+    delay={150}
+    content={content}
+    placement="top"
+    {...rest}
+  >
     <TooltipContent>{children}</TooltipContent>
   </Tooltip>
 );

app/editor/extensions/FindAndReplace.tsx

@@ -92,6 +92,10 @@ export default class FindAndReplaceExtension extends Extension {
 
   public replace(replace: string): Command {
     return (state, dispatch) => {
+      // Redo the search to ensure we have the latest results, the document may
+      // have changed underneath us since the last search.
+      this.search(state.doc);
+
       const result = this.results[this.currentResultIndex];
 
       if (!result) {
@@ -106,7 +110,12 @@ export default class FindAndReplaceExtension extends Extension {
   }
 
   public replaceAll(replace: string): Command {
-    return ({ tr }, dispatch) => {
+    return (state, dispatch) => {
+      // Redo the search to ensure we have the latest results, the document may
+      // have changed underneath us since the last search.
+      this.search(state.doc);
+
+      const tr = state.tr;
       let offset: number | undefined;
 
       if (!this.results.length) {
@@ -248,15 +257,25 @@ export default class FindAndReplaceExtension extends Extension {
         let m;
         const search = this.findRegExp;
 
-        while ((m = search.exec(deburr(text)))) {
+        // We construct a string with the text stripped of diacritics plus the original text for
+        // search  allowing to search for diacritics-insensitive matches easily.
+        while ((m = search.exec(deburr(text) + text))) {
           if (m[0] === "") {
             break;
           }
 
-          this.results.push({
-            from: pos + m.index,
-            to: pos + m.index + m[0].length,
-          });
+          // Reconstruct the correct match position
+          const i = m.index >= text.length ? m.index - text.length : m.index;
+          const from = pos + i;
+          const to = from + m[0].length;
+
+          // Check if already exists in results, possible due to duplicated
+          // search string on L257
+          if (this.results.some((r) => r.from === from && r.to === to)) {
+            continue;
+          }
+
+          this.results.push({ from, to });
         }
       } catch (e) {
         // Invalid RegExp
@@ -313,6 +332,8 @@ export default class FindAndReplaceExtension extends Extension {
 
   public widget = ({ readOnly }: WidgetProps) => (
     <FindAndReplace
+      currentIndex={this.currentResultIndex}
+      totalResults={this.results.length}
       readOnly={readOnly}
       open={this.open}
       onOpen={() => {
@@ -327,7 +348,11 @@ export default class FindAndReplaceExtension extends Extension {
   @observable
   private open = false;
 
+  @observable
   private results: { from: number; to: number }[] = [];
+
+  @observable
   private currentResultIndex = 0;
+
   private searchTerm = "";
 }

app/editor/extensions/Multiplayer.ts

@@ -1,5 +1,4 @@
 import isEqual from "lodash/isEqual";
-import { keymap } from "prosemirror-keymap";
 import {
   ySyncPlugin,
   yCursorPlugin,
@@ -104,11 +103,13 @@ export default class Multiplayer extends Extension {
         selectionBuilder,
       }),
       yUndoPlugin(),
-      keymap({
-        "Mod-z": undo,
-        "Mod-y": redo,
-        "Mod-Shift-z": redo,
-      }),
     ];
   }
+
+  commands() {
+    return {
+      undo: () => undo,
+      redo: () => redo,
+    };
+  }
 }

app/editor/index.tsx

@@ -4,7 +4,6 @@ import { darken, transparentize } from "polished";
 import { baseKeymap } from "prosemirror-commands";
 import { dropCursor } from "prosemirror-dropcursor";
 import { gapCursor } from "prosemirror-gapcursor";
-import { redo, undo } from "prosemirror-history";
 import { inputRules, InputRule } from "prosemirror-inputrules";
 import { keymap } from "prosemirror-keymap";
 import { MarkdownParser } from "prosemirror-markdown";
@@ -608,20 +607,6 @@ export class Editor extends React.PureComponent<
       this.props
     );
 
-  /**
-   * Undo the last change in the editor.
-   *
-   * @returns True if the undo was successful
-   */
-  public undo = () => undo(this.view.state, this.view.dispatch, this.view);
-
-  /**
-   * Redo the last change in the editor.
-   *
-   * @returns True if the change was successful
-   */
-  public redo = () => redo(this.view.state, this.view.dispatch, this.view);
-
   /**
    * Returns true if the trimmed content of the editor is an empty string.
    *
@@ -690,7 +675,10 @@ export class Editor extends React.PureComponent<
    * @param commentId The id of the comment to remove
    * @param attrs The attributes to update
    */
-  public updateComment = (commentId: string, attrs: { resolved: boolean }) => {
+  public updateComment = (
+    commentId: string,
+    attrs: { resolved?: boolean; draft?: boolean }
+  ) => {
     const { state, dispatch } = this.view;
     const tr = state.tr;
 

app/editor/menus/formatting.tsx

@@ -214,7 +214,6 @@ export default function formattingMenuItems(
       name: "link",
       tooltip: dictionary.createLink,
       icon: <LinkIcon />,
-      active: isMarkActive(schema.marks.link),
       attrs: { href: "" },
       visible: !isCodeBlock && (!isMobile || !isEmpty),
     },

app/hooks/useAutoRefresh.ts

@@ -31,7 +31,7 @@ export default function useAutoRefresh() {
         return;
       }
       if (isReloaded) {
-        Logger.error("lifecycle", new Error("Attempted to reload twice"));
+        Logger.warn("Attempted to reload twice");
         return;
       }
 

app/hooks/useComponentSize.ts

@@ -6,10 +6,7 @@ export default function useComponentSize(
   width: number;
   height: number;
 } {
-  const [size, setSize] = useState({
-    width: ref.current?.clientWidth || 0,
-    height: ref.current?.clientHeight || 0,
-  });
+  const [size, setSize] = useState({ width: 0, height: 0 });
 
   useLayoutEffect(() => {
     const sizeObserver = new ResizeObserver((entries) => {
@@ -24,6 +21,10 @@ export default function useComponentSize(
     });
 
     if (ref.current) {
+      setSize({
+        width: ref.current?.clientWidth,
+        height: ref.current?.clientHeight,
+      });
       sizeObserver.observe(ref.current);
     }
 

app/hooks/useSettingsConfig.ts

@@ -29,6 +29,7 @@ import useCurrentUser from "./useCurrentUser";
 import usePolicy from "./usePolicy";
 
 const ApiKeys = lazy(() => import("~/scenes/Settings/ApiKeys"));
+const PersonalApiKeys = lazy(() => import("~/scenes/Settings/PersonalApiKeys"));
 const Details = lazy(() => import("~/scenes/Settings/Details"));
 const Export = lazy(() => import("~/scenes/Settings/Export"));
 const Features = lazy(() => import("~/scenes/Settings/Features"));
@@ -87,10 +88,10 @@ const useSettingsConfig = () => {
         icon: EmailIcon,
       },
       {
-        name: t("API"),
-        path: settingsPath("tokens"),
-        component: ApiKeys,
-        enabled: can.createApiKey,
+        name: t("API Keys"),
+        path: settingsPath("personal-api-keys"),
+        component: PersonalApiKeys,
+        enabled: can.createApiKey && !can.listApiKeys,
         group: t("Account"),
         icon: CodeIcon,
       },
@@ -143,6 +144,14 @@ const useSettingsConfig = () => {
         group: t("Workspace"),
         icon: ShapesIcon,
       },
+      {
+        name: t("API Keys"),
+        path: settingsPath("api-keys"),
+        component: ApiKeys,
+        enabled: can.listApiKeys,
+        group: t("Workspace"),
+        icon: CodeIcon,
+      },
       {
         name: t("Shared Links"),
         path: settingsPath("shares"),

app/index.tsx

@@ -20,6 +20,7 @@ import { initI18n } from "~/utils/i18n";
 import Desktop from "./components/DesktopEventHandler";
 import LazyPolyfill from "./components/LazyPolyfills";
 import PageScroll from "./components/PageScroll";
+import { TooltipProvider } from "./components/TooltipContext";
 import Routes from "./routes";
 import Logger from "./utils/Logger";
 import { PluginManager } from "./utils/PluginManager";
@@ -55,21 +56,23 @@ if (element) {
             <Theme>
               <ErrorBoundary showTitle>
                 <KBarProvider actions={[]} options={commandBarOptions}>
-                  <LazyPolyfill>
-                    <LazyMotion features={loadFeatures}>
-                      <Router history={history}>
-                        <PageScroll>
-                          <PageTheme />
-                          <ScrollToTop>
-                            <Routes />
-                          </ScrollToTop>
-                          <Toasts />
-                          <Dialogs />
-                          <Desktop />
-                        </PageScroll>
-                      </Router>
-                    </LazyMotion>
-                  </LazyPolyfill>
+                  <TooltipProvider>
+                    <LazyPolyfill>
+                      <LazyMotion features={loadFeatures}>
+                        <Router history={history}>
+                          <PageScroll>
+                            <PageTheme />
+                            <ScrollToTop>
+                              <Routes />
+                            </ScrollToTop>
+                            <Toasts />
+                            <Dialogs />
+                            <Desktop />
+                          </PageScroll>
+                        </Router>
+                      </LazyMotion>
+                    </LazyPolyfill>
+                  </TooltipProvider>
                 </KBarProvider>
               </ErrorBoundary>
             </Theme>

app/menus/DocumentMenu.tsx

@@ -47,6 +47,7 @@ import {
   shareDocument,
   copyDocument,
   searchInDocument,
+  leaveDocument,
   moveTemplate,
 } from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
@@ -298,6 +299,7 @@ const MenuContent: React.FC<MenuContentProps> = ({
           },
           actionToMenuItem(deleteDocument, context),
           actionToMenuItem(permanentlyDeleteDocument, context),
+          actionToMenuItem(leaveDocument, context),
         ]}
       />
       {(showDisplayOptions || showToggleEmbeds) && can.update && (

app/menus/NewDocumentMenu.tsx

@@ -19,12 +19,7 @@ function NewDocumentMenu() {
   }
 
   return (
-    <Tooltip
-      content={t("New document")}
-      shortcut="n"
-      delay={500}
-      placement="bottom"
-    >
+    <Tooltip content={t("New document")} shortcut="n" placement="bottom">
       <Button as={Link} to={newDocumentPath()} icon={<PlusIcon />}>
         {t("New doc")}
       </Button>

app/menus/TemplatesMenu.tsx

@@ -1,8 +1,9 @@
 import { observer } from "mobx-react";
-import { DocumentIcon } from "outline-icons";
+import { DocumentIcon, ShapesIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { MenuButton, useMenuState } from "reakit/Menu";
+import { TextHelper } from "@shared/utils/TextHelper";
 import Document from "~/models/Document";
 import Button from "~/components/Button";
 import ContextMenu from "~/components/ContextMenu";
@@ -11,14 +12,17 @@ import Icon from "~/components/Icon";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { MenuItem } from "~/types";
-import { replaceTitleVariables } from "~/utils/date";
 
 type Props = {
+  /** The document to which the templates will be applied */
   document: Document;
+  /** Whether to render the button as a compact icon */
+  isCompact?: boolean;
+  /** Callback to handle when a template is selected */
   onSelectTemplate: (template: Document) => void;
 };
 
-function TemplatesMenu({ onSelectTemplate, document }: Props) {
+function TemplatesMenu({ isCompact, onSelectTemplate, document }: Props) {
   const menu = useMenuState({
     modal: true,
   });
@@ -29,7 +33,7 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
   const templateToMenuItem = React.useCallback(
     (tmpl: Document): MenuItem => ({
       type: "button",
-      title: replaceTitleVariables(tmpl.titleWithDefault, user),
+      title: TextHelper.replaceTemplateVariables(tmpl.titleWithDefault, user),
       icon: tmpl.icon ? (
         <Icon value={tmpl.icon} color={tmpl.color ?? undefined} />
       ) : (
@@ -79,8 +83,13 @@ function TemplatesMenu({ onSelectTemplate, document }: Props) {
     <>
       <MenuButton {...menu}>
         {(props) => (
-          <Button {...props} disclosure neutral>
-            {t("Templates")}
+          <Button
+            {...props}
+            icon={isCompact ? <ShapesIcon /> : undefined}
+            disclosure={!isCompact}
+            neutral
+          >
+            {isCompact ? undefined : t("Templates")}
           </Button>
         )}
       </MenuButton>

app/models/Comment.ts

@@ -1,8 +1,6 @@
-import { subSeconds } from "date-fns";
 import invariant from "invariant";
 import uniq from "lodash/uniq";
 import { action, computed, observable } from "mobx";
-import { now } from "mobx-utils";
 import { Pagination } from "@shared/constants";
 import type { ProsemirrorData, ReactionSummary } from "@shared/types";
 import User from "~/models/User";
@@ -15,17 +13,6 @@ import Relation from "./decorators/Relation";
 class Comment extends Model {
   static modelName = "Comment";
 
-  /**
-   * Map to keep track of which users are currently typing a reply in this
-   * comments thread.
-   */
-  @observable
-  typingUsers: Map<string, Date> = new Map();
-
-  @Field
-  @observable
-  id: string;
-
   /**
    * The Prosemirror data representing the comment content
    */
@@ -107,17 +94,6 @@ class Comment extends Model {
    */
   private reactedUsersLoading = false;
 
-  /**
-   * An array of users that are currently typing a reply in this comments thread.
-   */
-  @computed
-  public get currentlyTypingUsers(): User[] {
-    return Array.from(this.typingUsers.entries())
-      .filter(([, lastReceivedDate]) => lastReceivedDate > subSeconds(now(), 3))
-      .map(([userId]) => this.store.rootStore.users.get(userId))
-      .filter(Boolean) as User[];
-  }
-
   /**
    * Whether the comment is resolved
    */

app/models/Document.ts

@@ -65,10 +65,6 @@ export default class Document extends ArchivableModel {
 
   store: DocumentsStore;
 
-  @Field
-  @observable
-  id: string;
-
   @observable.shallow
   data: ProsemirrorData;
 
@@ -254,7 +250,8 @@ export default class Document extends ArchivableModel {
 
   @computed
   get path(): string {
-    const prefix = this.template ? settingsPath("templates") : "/doc";
+    const prefix =
+      this.template && !this.isDeleted ? settingsPath("templates") : "/doc";
 
     if (!this.title) {
       return `${prefix}/untitled-${this.urlId}`;
@@ -576,6 +573,8 @@ export default class Document extends ArchivableModel {
     title?: string;
     publish?: boolean;
     recursive?: boolean;
+    collectionId?: string | null;
+    parentDocumentId?: string;
   }) => this.store.duplicate(this, options);
 
   /**

app/models/Event.ts

@@ -1,21 +1,29 @@
+import Collection from "./Collection";
+import Document from "./Document";
 import User from "./User";
 import Model from "./base/Model";
 import Relation from "./decorators/Relation";
 
-class Event extends Model {
+class Event<T extends Model> extends Model {
   static modelName = "Event";
 
   id: string;
 
   name: string;
 
-  modelId: string | null | undefined;
+  modelId: string | undefined;
 
   actorIpAddress: string | null | undefined;
 
-  documentId: string;
+  @Relation(() => Document)
+  document: Document;
 
-  collectionId: string | null | undefined;
+  documentId: string | undefined;
+
+  @Relation(() => Collection)
+  collection: Collection;
+
+  collectionId: string | undefined;
 
   @Relation(() => User)
   user: User;
@@ -27,13 +35,12 @@ class Event extends Model {
 
   actorId: string;
 
-  data: {
-    name: string;
-    email: string;
-    title: string;
-    published: boolean;
-    templateId: string;
-  };
+  data: Partial<T> | null;
+
+  changes: {
+    attributes: Partial<T>;
+    previous: Partial<T>;
+  } | null;
 }
 
 export default Event;

app/models/Group.ts

@@ -6,10 +6,6 @@ import Field from "./decorators/Field";
 class Group extends Model {
   static modelName = "Group";
 
-  @Field
-  @observable
-  id: string;
-
   @Field
   @observable
   name: string;

app/models/Notification.ts

@@ -18,10 +18,6 @@ import Relation from "./decorators/Relation";
 class Notification extends Model {
   static modelName = "Notification";
 
-  @Field
-  @observable
-  id: string;
-
   /**
    * The date the notification was marked as read.
    */
@@ -123,6 +119,8 @@ class Notification extends Model {
         return t("mentioned you in");
       case NotificationEventType.CreateComment:
         return t("left a comment on");
+      case NotificationEventType.ResolveComment:
+        return t("resolved a comment on");
       case NotificationEventType.AddUserToDocument:
         return t("shared");
       case NotificationEventType.AddUserToCollection:
@@ -174,6 +172,7 @@ class Notification extends Model {
         return this.document?.path;
       }
       case NotificationEventType.MentionedInComment:
+      case NotificationEventType.ResolveComment:
       case NotificationEventType.CreateComment: {
         return this.document && this.comment
           ? commentPath(this.document, this.comment)

app/models/Share.ts

@@ -55,6 +55,10 @@ class Share extends Model {
   @observable
   url: string;
 
+  @Field
+  @observable
+  allowIndexing: boolean;
+
   /** The user that shared the document. */
   @Relation(() => User, { onDelete: "null" })
   createdBy: User;

app/models/Team.ts

@@ -8,10 +8,6 @@ import Field from "./decorators/Field";
 class Team extends Model {
   static modelName = "Team";
 
-  @Field
-  @observable
-  id: string;
-
   @Field
   @observable
   name: string;

app/models/User.ts

@@ -22,10 +22,6 @@ import Field from "./decorators/Field";
 class User extends ParanoidModel {
   static modelName = "User";
 
-  @Field
-  @observable
-  id: string;
-
   @Field
   @observable
   avatarUrl: string;

app/models/WebhookSubscription.ts

@@ -5,10 +5,6 @@ import Field from "./decorators/Field";
 class WebhookSubscription extends Model {
   static modelName = "WebhookSubscription";
 
-  @Field
-  @observable
-  id: string;
-
   @Field
   @observable
   name: string;

app/scenes/Collection/components/Actions.tsx

@@ -27,7 +27,6 @@ function Actions({ collection }: Props) {
             <Tooltip
               content={t("New document")}
               shortcut="n"
-              delay={500}
               placement="bottom"
             >
               <Button

app/scenes/Document/components/CommentForm.tsx

@@ -27,6 +27,8 @@ import { Bubble } from "./CommentThreadItem";
 import { HighlightedText } from "./HighlightText";
 
 type Props = {
+  /** Callback when the form is submitted. */
+  onSubmit?: () => void;
   /** Callback when the draft should be saved. */
   onSaveDraft: (data: ProsemirrorData | undefined) => void;
   /** A draft comment for this thread. */
@@ -47,8 +49,6 @@ type Props = {
   highlightedText?: string;
   /** The text direction of the editor */
   dir?: "rtl" | "ltr";
-  /** Callback when the user is typing in the editor */
-  onTyping?: () => void;
   /** Callback when the editor is focused */
   onFocus?: () => void;
   /** Callback when the editor is blurred */
@@ -59,8 +59,8 @@ function CommentForm({
   documentId,
   thread,
   draft,
+  onSubmit,
   onSaveDraft,
-  onTyping,
   onFocus,
   onBlur,
   autoFocus,
@@ -119,6 +119,7 @@ function CommentForm({
         documentId,
         data: draft,
       })
+      .then(() => onSubmit?.())
       .catch(() => {
         comment.isNew = true;
         toast.error(t("Error creating comment"));
@@ -153,11 +154,14 @@ function CommentForm({
     comment.id = uuidv4();
     comments.add(comment);
 
-    comment.save().catch(() => {
-      comments.remove(comment.id);
-      comment.isNew = true;
-      toast.error(t("Error creating comment"));
-    });
+    comment
+      .save()
+      .then(() => onSubmit?.())
+      .catch(() => {
+        comments.remove(comment.id);
+        comment.isNew = true;
+        toast.error(t("Error creating comment"));
+      });
 
     // optimistically update the comment model
     comment.isNew = false;
@@ -175,7 +179,6 @@ function CommentForm({
   ) => {
     const text = value(true, true);
     onSaveDraft(text ? value(false, true) : undefined);
-    onTyping?.();
   };
 
   const handleSave = () => {
@@ -313,7 +316,7 @@ function CommentForm({
                   {t("Cancel")}
                 </ButtonSmall>
               </Flex>
-              <Tooltip delay={500} content={t("Upload image")} placement="top">
+              <Tooltip content={t("Upload image")} placement="top">
                 <NudeButton onClick={handleImageUpload}>
                   <ImageIcon color={theme.textTertiary} />
                 </NudeButton>

app/scenes/Document/components/CommentThread.tsx

@@ -1,5 +1,5 @@
-import throttle from "lodash/throttle";
 import { observer } from "mobx-react";
+import { darken } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { useHistory, useLocation } from "react-router-dom";
@@ -10,14 +10,11 @@ import { s } from "@shared/styles";
 import { ProsemirrorData } from "@shared/types";
 import Comment from "~/models/Comment";
 import Document from "~/models/Document";
-import { Avatar } from "~/components/Avatar";
+import { Avatar, AvatarSize } from "~/components/Avatar";
 import { useDocumentContext } from "~/components/DocumentContext";
+import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
-import Flex from "~/components/Flex";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
-import Typing from "~/components/Typing";
-import { WebsocketContext } from "~/components/WebsocketProvider";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
 import usePolicy from "~/hooks/usePolicy";
@@ -40,28 +37,12 @@ type Props = {
   enableScroll: () => void;
   /** Disable scroll for the comments container */
   disableScroll: () => void;
+  /** Number of replies before collapsing */
+  collapseThreshold?: number;
+  /** Number of replies to display when collapsed */
+  collapseNumDisplayed?: number;
 };
 
-function useTypingIndicator({
-  document,
-  comment,
-}: Pick<Props, "document" | "comment">): [undefined, () => void] {
-  const socket = React.useContext(WebsocketContext);
-
-  const setIsTyping = React.useMemo(
-    () =>
-      throttle(() => {
-        socket?.emit("typing", {
-          documentId: document.id,
-          commentId: comment.id,
-        });
-      }, 500),
-    [socket, document.id, comment.id]
-  );
-
-  return [undefined, setIsTyping];
-}
-
 function CommentThread({
   comment: thread,
   document,
@@ -69,23 +50,26 @@ function CommentThread({
   focused,
   enableScroll,
   disableScroll,
+  collapseThreshold = 5,
+  collapseNumDisplayed = 3,
 }: Props) {
   const [focusedOnMount] = React.useState(focused);
   const { editor } = useDocumentContext();
   const { comments } = useStores();
   const topRef = React.useRef<HTMLDivElement>(null);
   const replyRef = React.useRef<HTMLDivElement>(null);
-  const user = useCurrentUser();
   const { t } = useTranslation();
   const history = useHistory();
   const location = useLocation();
   const [autoFocus, setAutoFocus] = React.useState(thread.isNew);
-  const [, setIsTyping] = useTypingIndicator({
-    document,
-    comment: thread,
-  });
+
   const can = usePolicy(document);
 
+  const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
+    `draft-${document.id}-${thread.id}`,
+    undefined
+  );
+
   const canReply = can.comment && !thread.isResolved;
 
   const highlightedCommentMarks = editor
@@ -97,6 +81,17 @@ function CommentThread({
     .inThread(thread.id)
     .filter((comment) => !comment.isNew);
 
+  const [collapse, setCollapse] = React.useState(() => {
+    const numReplies = commentsInThread.length - 1;
+    if (numReplies >= collapseThreshold) {
+      return {
+        begin: 1,
+        final: commentsInThread.length - collapseNumDisplayed - 1,
+      };
+    }
+    return null;
+  });
+
   useOnClickOutside(topRef, (event) => {
     if (
       focused &&
@@ -111,6 +106,10 @@ function CommentThread({
     }
   });
 
+  const handleSubmit = React.useCallback(() => {
+    editor?.updateComment(thread.id, { draft: false });
+  }, [editor, thread.id]);
+
   const handleClickThread = () => {
     history.replace({
       // Clear any commentId from the URL when explicitly focusing a thread
@@ -120,6 +119,36 @@ function CommentThread({
     });
   };
 
+  const handleClickExpand = (ev: React.SyntheticEvent) => {
+    ev.stopPropagation();
+    setCollapse(null);
+  };
+
+  const renderShowMore = (collapse: { begin: number; final: number }) => {
+    const count = collapse.final - collapse.begin + 1;
+    const createdBy = commentsInThread
+      .slice(collapse.begin, collapse.final + 1)
+      .map((c) => c.createdBy);
+    const users = Array.from(new Set(createdBy));
+    const limit = 3;
+    const overflow = users.length - limit;
+
+    return (
+      <ShowMore onClick={handleClickExpand} key="show-more">
+        {t("Show {{ count }} reply", { count })}
+        <Facepile
+          users={users}
+          limit={limit}
+          overflow={overflow}
+          size={AvatarSize.Medium}
+          renderAvatar={(item) => (
+            <Avatar size={AvatarSize.Medium} model={item} />
+          )}
+        />
+      </ShowMore>
+    );
+  };
+
   React.useEffect(() => {
     if (!focused && autoFocus) {
       setAutoFocus(false);
@@ -174,11 +203,6 @@ function CommentThread({
     }
   }, [focused, focusedOnMount, thread.id]);
 
-  const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
-    `draft-${document.id}-${thread.id}`,
-    undefined
-  );
-
   return (
     <Thread
       ref={topRef}
@@ -188,8 +212,17 @@ function CommentThread({
       onClick={handleClickThread}
     >
       {commentsInThread.map((comment, index) => {
+        if (collapse !== null) {
+          if (index === collapse.begin) {
+            return renderShowMore(collapse);
+          } else if (index > collapse.begin && index <= collapse.final) {
+            return null;
+          }
+        }
+
         const firstOfAuthor =
           index === 0 ||
+          (collapse && index === collapse.final + 1) ||
           comment.createdById !== commentsInThread[index - 1].createdById;
         const lastOfAuthor =
           index === commentsInThread.length - 1 ||
@@ -215,24 +248,15 @@ function CommentThread({
         );
       })}
 
-      {thread.currentlyTypingUsers
-        .filter((typing) => typing.id !== user.id)
-        .map((typing) => (
-          <Flex gap={8} key={typing.id}>
-            <Avatar model={typing} size={24} />
-            <Typing />
-          </Flex>
-        ))}
-
       <ResizingHeightContainer hideOverflow={false} ref={replyRef}>
         {(focused || draft || commentsInThread.length === 0) && canReply && (
           <Fade timing={100}>
             <CommentForm
+              onSubmit={handleSubmit}
               onSaveDraft={onSaveDraft}
               draft={draft}
               documentId={document.id}
               thread={thread}
-              onTyping={setIsTyping}
               standalone={commentsInThread.length === 0}
               dir={document.dir}
               autoFocus={autoFocus}
@@ -271,6 +295,29 @@ const Reply = styled.button`
   `}
 `;
 
+const ShowMore = styled.div<{ $dir?: "rtl" | "ltr" }>`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1px;
+  margin-left: ${(props) => (props.$dir === "rtl" ? 0 : 32)}px;
+  margin-right: ${(props) => (props.$dir !== "rtl" ? 0 : 32)}px;
+  padding: 8px 12px;
+  color: ${s("textTertiary")};
+  background: ${(props) => darken(0.015, props.theme.backgroundSecondary)};
+  cursor: var(--pointer);
+  font-size: 13px;
+
+  &: ${hover} {
+    color: ${s("textSecondary")};
+    background: ${s("backgroundTertiary")};
+  }
+
+  * {
+    border-color: ${(props) => darken(0.015, props.theme.backgroundSecondary)};
+  }
+`;
+
 const Thread = styled.div<{
   $focused: boolean;
   $recessed: boolean;

app/scenes/Document/components/CommentThreadItem.tsx

@@ -1,6 +1,7 @@
 import { differenceInMilliseconds } from "date-fns";
 import { action } from "mobx";
 import { observer } from "mobx-react";
+import { DoneIcon } from "outline-icons";
 import { darken } from "polished";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
@@ -16,10 +17,14 @@ import Comment from "~/models/Comment";
 import { Avatar } from "~/components/Avatar";
 import ButtonSmall from "~/components/ButtonSmall";
 import Flex from "~/components/Flex";
+import NudeButton from "~/components/NudeButton";
 import ReactionList from "~/components/Reactions/ReactionList";
 import ReactionPicker from "~/components/Reactions/ReactionPicker";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
+import Tooltip from "~/components/Tooltip";
+import { resolveCommentFactory } from "~/actions/definitions/comments";
+import useActionContext from "~/hooks/useActionContext";
 import useBoolean from "~/hooks/useBoolean";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import CommentMenu from "~/menus/CommentMenu";
@@ -192,21 +197,12 @@ function CommentThreadItem({
             {showAuthor && <em>{comment.createdBy.name}</em>}
             {showAuthor && showTime && <> &middot; </>}
             {showTime && (
-              <Time
-                dateTime={comment.createdAt}
-                tooltipDelay={500}
-                addSuffix
-                shorten
-              />
+              <Time dateTime={comment.createdAt} addSuffix shorten />
             )}
             {showEdited && (
               <>
                 {" "}
-                (
-                <Time dateTime={comment.updatedAt} tooltipDelay={500}>
-                  {t("edited")}
-                </Time>
-                )
+                (<Time dateTime={comment.updatedAt}>{t("edited")}</Time>)
               </>
             )}
           </Meta>
@@ -242,11 +238,13 @@ function CommentThreadItem({
                 onRemoveReaction={handleRemoveReaction}
                 picker={
                   !comment.isResolved ? (
-                    <StyledReactionPicker
+                    <Action
+                      as={ReactionPicker}
                       onSelect={handleAddReaction}
                       onOpen={disableScroll}
                       onClose={enableScroll}
                       size={28}
+                      rounded
                     />
                   ) : undefined
                 }
@@ -258,13 +256,21 @@ function CommentThreadItem({
           {!isEditing && (
             <Actions gap={4} dir={dir}>
               {!comment.isResolved && (
-                <StyledReactionPicker
-                  onSelect={handleAddReaction}
-                  onOpen={disableScroll}
-                  onClose={enableScroll}
-                />
+                <>
+                  {firstOfThread && (
+                    <ResolveButton onUpdate={handleUpdate} comment={comment} />
+                  )}
+                  <Action
+                    as={ReactionPicker}
+                    onSelect={handleAddReaction}
+                    onOpen={disableScroll}
+                    onClose={enableScroll}
+                    rounded
+                  />
+                </>
               )}
-              <StyledMenu
+              <Action
+                as={CommentMenu}
                 comment={comment}
                 onEdit={setEditing}
                 onDelete={handleDelete}
@@ -278,6 +284,33 @@ function CommentThreadItem({
   );
 }
 
+const ResolveButton = ({
+  comment,
+  onUpdate,
+}: {
+  comment: Comment;
+  onUpdate: (attrs: { resolved: boolean }) => void;
+}) => {
+  const context = useActionContext();
+  const { t } = useTranslation();
+
+  return (
+    <Tooltip content={t("Mark as resolved")} placement="top" hideOnClick>
+      <Action
+        as={NudeButton}
+        context={context}
+        action={resolveCommentFactory({
+          comment,
+          onResolve: () => onUpdate({ resolved: true }),
+        })}
+        rounded
+      >
+        <DoneIcon size={22} outline />
+      </Action>
+    </Tooltip>
+  );
+};
+
 const StyledCommentEditor = styled(CommentEditor)`
   ${(props) =>
     !props.readOnly &&
@@ -308,25 +341,13 @@ const Body = styled.form`
   border-radius: 2px;
 `;
 
-const StyledMenu = styled(CommentMenu)`
-  color: ${s("textSecondary")};
-
-  svg {
-    fill: currentColor;
-    opacity: 0.5;
-  }
-
-  &: ${hover}, &[aria-expanded= "true"] {
-    background: ${s("backgroundQuaternary")};
-
-    svg {
-      opacity: 0.75;
-    }
-  }
-`;
-
-const StyledReactionPicker = styled(ReactionPicker)`
+const Action = styled.span<{ rounded?: boolean }>`
   color: ${s("textSecondary")};
+  ${(props) =>
+    props.rounded &&
+    css`
+      border-radius: 50%;
+    `}
 
   svg {
     fill: currentColor;
@@ -352,7 +373,7 @@ const Actions = styled(Flex)<{ dir?: "rtl" | "ltr" }>`
   background: ${s("backgroundSecondary")};
   padding-left: 4px;
 
-  &:has(${StyledReactionPicker}[aria-expanded="true"], ${StyledMenu}[aria-expanded="true"]) {
+  &:has(${Action}[aria-expanded="true"]) {
     opacity: 1;
   }
 `;
@@ -386,7 +407,7 @@ export const Bubble = styled(Flex)<{
   min-width: 2em;
   margin-bottom: 1px;
   padding: 8px 12px;
-  transition: color 100ms ease-out, ${s("backgroundTransition")};
+  transition: color 100ms ease-out, background 100ms ease-out;
 
   ${({ $lastOfThread, $canReply }) =>
     $lastOfThread &&

app/scenes/Document/components/Comments.tsx

@@ -44,7 +44,7 @@ function Comments() {
   const isAtBottom = React.useRef(true);
   const [showJumpToRecentBtn, setShowJumpToRecentBtn] = React.useState(false);
 
-  useKeyDown("Escape", () => document && ui.collapseComments(document?.id));
+  useKeyDown("Escape", () => document && ui.set({ commentsExpanded: false }));
 
   const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
     `draft-${document?.id}-new`,
@@ -94,14 +94,18 @@ function Comments() {
   React.useEffect(() => {
     // Handles: 1. on refresh 2. when switching sort setting
     const readyToDisplay = Boolean(document && isEditorInitialized);
-    if (readyToDisplay && sortOption.type === CommentSortType.MostRecent) {
+    if (
+      readyToDisplay &&
+      sortOption.type === CommentSortType.MostRecent &&
+      !viewingResolved
+    ) {
       scrollToBottom();
     }
-  }, [sortOption.type, document, isEditorInitialized]);
+  }, [sortOption.type, document, isEditorInitialized, viewingResolved]);
 
   React.useEffect(() => {
     setShowJumpToRecentBtn(false);
-    if (sortOption.type === CommentSortType.MostRecent) {
+    if (sortOption.type === CommentSortType.MostRecent && !viewingResolved) {
       const commentsAdded = threads.length > prevThreadCount.current;
       if (commentsAdded) {
         if (isAtBottom.current) {
@@ -112,7 +116,7 @@ function Comments() {
       }
     }
     prevThreadCount.current = threads.length;
-  }, [sortOption.type, threads.length]);
+  }, [sortOption.type, threads.length, viewingResolved]);
 
   if (!document || !isEditorInitialized) {
     return null;
@@ -126,7 +130,7 @@ function Comments() {
           <CommentSortMenu />
         </Flex>
       }
-      onClose={() => ui.collapseComments(document?.id)}
+      onClose={() => ui.set({ commentsExpanded: false })}
       scrollable={false}
     >
       <Scrollable

app/scenes/Document/components/Contents.tsx

@@ -87,7 +87,6 @@ const StickyWrapper = styled.div`
   border-radius: 8px;
 
   background: ${s("background")};
-  transition: ${s("backgroundTransition")};
 
   @supports (backdrop-filter: blur(20px)) {
     backdrop-filter: blur(20px);

app/scenes/Document/components/DataLoader.tsx

@@ -218,11 +218,11 @@ function DataLoader({ match, children }: Props) {
     );
   }
 
-  const readOnly =
-    !isEditing || !can.update || document.isArchived || !!revisionId;
+  const canEdit = can.update && !document.isArchived && !revisionId;
+  const readOnly = !isEditing || !canEdit;
 
   return (
-    <React.Fragment key={readOnly ? "readOnly" : ""}>
+    <React.Fragment key={canEdit ? "edit" : "read"}>
       {children({
         document,
         revision,

app/scenes/Document/components/Document.tsx

@@ -26,6 +26,7 @@ import {
   TeamPreference,
 } from "@shared/types";
 import { ProsemirrorHelper } from "@shared/utils/ProsemirrorHelper";
+import { TextHelper } from "@shared/utils/TextHelper";
 import { parseDomain } from "@shared/utils/domains";
 import { determineIconType } from "@shared/utils/icon";
 import RootStore from "~/stores/RootStore";
@@ -44,7 +45,6 @@ import withStores from "~/components/withStores";
 import type { Editor as TEditor } from "~/editor";
 import { SearchResult } from "~/editor/components/LinkEditor";
 import { client } from "~/utils/ApiClient";
-import { replaceTitleVariables } from "~/utils/date";
 import { emojiToUrl } from "~/utils/emoji";
 import { isModKey } from "~/utils/keyboard";
 
@@ -151,7 +151,13 @@ class DocumentScene extends React.Component<Props> {
     }
 
     const { view, schema } = editorRef;
-    const doc = Node.fromJSON(schema, template.data);
+    const doc = Node.fromJSON(
+      schema,
+      ProsemirrorHelper.replaceTemplateVariables(
+        template.data,
+        this.props.auth.user!
+      )
+    );
 
     if (doc) {
       view.dispatch(
@@ -168,9 +174,9 @@ class DocumentScene extends React.Component<Props> {
     }
 
     if (!this.title) {
-      const title = replaceTitleVariables(
+      const title = TextHelper.replaceTemplateVariables(
         template.title,
-        this.props.auth.user || undefined
+        this.props.auth.user!
       );
       this.title = title;
       this.props.document.title = title;
@@ -215,13 +221,15 @@ class DocumentScene extends React.Component<Props> {
 
   onUndoRedo = (event: KeyboardEvent) => {
     if (isModKey(event)) {
+      event.preventDefault();
+
       if (event.shiftKey) {
-        if (this.editor.current?.redo()) {
-          event.preventDefault();
+        if (!this.props.readOnly) {
+          this.editor.current?.commands.redo();
         }
       } else {
-        if (this.editor.current?.undo()) {
-          event.preventDefault();
+        if (!this.props.readOnly) {
+          this.editor.current?.commands.undo();
         }
       }
     }
@@ -410,7 +418,8 @@ class DocumentScene extends React.Component<Props> {
       (team && team.documentEmbeds === false) || document.embedsDisabled;
 
     const showContents =
-      ui.tocVisible === true || (isShare && ui.tocVisible !== false);
+      (ui.tocVisible === true && !document.isTemplate) ||
+      (isShare && ui.tocVisible !== false);
     const tocPos =
       tocPosition ??
       ((team?.getPreference(TeamPreference.TocPosition) as TOCPosition) ||
@@ -695,7 +704,6 @@ const Footer = styled.div`
 const Background = styled(Container)`
   position: relative;
   background: ${s("background")};
-  transition: ${s("backgroundTransition")};
 `;
 
 const ReferencesWrapper = styled.div`

app/scenes/Document/components/DocumentMeta.tsx

@@ -46,7 +46,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
            • 
           <CommentLink
             to={documentPath(document)}
-            onClick={() => ui.toggleComments(document.id)}
+            onClick={() => ui.toggleComments()}
           >
             <CommentIcon size={18} />
             {commentsCount

app/scenes/Document/components/Editor.tsx

@@ -27,6 +27,7 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useFocusedComment from "~/hooks/useFocusedComment";
 import usePolicy from "~/hooks/usePolicy";
+import useQuery from "~/hooks/useQuery";
 import useStores from "~/hooks/useStores";
 import {
   documentHistoryPath,
@@ -81,6 +82,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
   const user = useCurrentUser({ rejectOnEmpty: false });
   const team = useCurrentTeam({ rejectOnEmpty: false });
   const history = useHistory();
+  const params = useQuery();
   const {
     document,
     onChangeTitle,
@@ -103,9 +105,20 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
 
   React.useEffect(() => {
     if (focusedComment) {
-      ui.expandComments(document.id);
+      const viewingResolved = params.get("resolved") === "";
+      if (
+        (focusedComment.isResolved && !viewingResolved) ||
+        (!focusedComment.isResolved && viewingResolved)
+      ) {
+        history.replace({
+          search: focusedComment.isResolved ? "resolved=" : "",
+          pathname: location.pathname,
+          state: { commentId: focusedComment.id },
+        });
+      }
+      ui.set({ commentsExpanded: true });
     }
-  }, [focusedComment, ui, document.id]);
+  }, [focusedComment, ui, document.id, history, params]);
 
   // Save document when blurring title, but delay so that if clicking on a
   // button this is allowed to execute first.

app/scenes/Document/components/Header.tsx

@@ -30,6 +30,7 @@ import { publishDocument } from "~/actions/definitions/documents";
 import { navigateToTemplateSettings } from "~/actions/definitions/navigation";
 import { restoreRevision } from "~/actions/definitions/revisions";
 import useActionContext from "~/hooks/useActionContext";
+import useComponentSize from "~/hooks/useComponentSize";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useEditingFocus from "~/hooks/useEditingFocus";
@@ -86,11 +87,13 @@ function DocumentHeader({
   const team = useCurrentTeam({ rejectOnEmpty: false });
   const user = useCurrentUser({ rejectOnEmpty: false });
   const { resolvedTheme } = ui;
-  const isMobile = useMobile();
+  const isMobileMedia = useMobile();
   const isRevision = !!revision;
   const isEditingFocus = useEditingFocus();
-  const { editor } = useDocumentContext();
-  const { hasHeadings } = useDocumentContext();
+  const { hasHeadings, editor } = useDocumentContext();
+  const ref = React.useRef<HTMLDivElement | null>(null);
+  const size = useComponentSize(ref);
+  const isMobile = isMobileMedia || size.width < 700;
 
   // We cache this value for as long as the component is mounted so that if you
   // apply a template there is still the option to replace it until the user
@@ -103,6 +106,10 @@ function DocumentHeader({
     });
   }, [onSave]);
 
+  const handleToggle = React.useCallback(() => {
+    ui.set({ tocVisible: !ui.tocVisible });
+  }, [ui]);
+
   const context = useActionContext({
     activeDocumentId: document?.id,
   });
@@ -113,7 +120,8 @@ function DocumentHeader({
   const canToggleEmbeds = team?.documentEmbeds;
   const isShare = !!shareId;
   const showContents =
-    ui.tocVisible === true || (isShare && ui.tocVisible !== false);
+    (ui.tocVisible === true && !document.isTemplate) ||
+    (isShare && ui.tocVisible !== false);
 
   const toc = (
     <Tooltip
@@ -125,11 +133,10 @@ function DocumentHeader({
           : `${t("Show contents")} (${t("available when headings are added")})`
       }
       shortcut={`ctrl+${altDisplay}+h`}
-      delay={250}
       placement="bottom"
     >
       <Button
-        onClick={showContents ? ui.hideTableOfContents : ui.showTableOfContents}
+        onClick={handleToggle}
         icon={<TableOfContentsIcon />}
         borderOnHover
         neutral
@@ -143,7 +150,6 @@ function DocumentHeader({
           noun: document.noun,
         })}
         shortcut="e"
-        delay={500}
         placement="bottom"
       >
         <Button
@@ -163,7 +169,6 @@ function DocumentHeader({
         content={
           resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light")
         }
-        delay={500}
         placement="bottom"
       >
         <Button
@@ -180,7 +185,7 @@ function DocumentHeader({
 
   useKeyDown(
     (event) => event.ctrlKey && event.altKey && event.key === "˙",
-    ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents,
+    handleToggle,
     {
       allowInInput: true,
     }
@@ -225,6 +230,7 @@ function DocumentHeader({
   return (
     <>
       <StyledHeader
+        ref={ref}
         $hidden={isEditingFocus}
         hasSidebar
         left={
@@ -232,7 +238,11 @@ function DocumentHeader({
             <TableOfContentsMenu />
           ) : (
             <DocumentBreadcrumb document={document}>
-              {toc} <Star document={document} color={theme.textSecondary} />
+              {document.isTemplate ? null : (
+                <>
+                  {toc} <Star document={document} color={theme.textSecondary} />
+                </>
+              )}
             </DocumentBreadcrumb>
           )
         }
@@ -245,7 +255,7 @@ function DocumentHeader({
             {document.isArchived && <Badge>{t("Archived")}</Badge>}
           </Flex>
         }
-        actions={
+        actions={({ isCompact }) => (
           <>
             <ObservingBanner />
 
@@ -253,11 +263,15 @@ function DocumentHeader({
               <Status>{t("Saving")}…</Status>
             )}
             {!isDeleted && !isRevision && can.listViews && (
-              <Collaborators document={document} />
+              <Collaborators
+                document={document}
+                limit={isCompact ? 3 : undefined}
+              />
             )}
             {(isEditing || !user?.separateEditMode) && !isTemplate && isNew && (
               <Action>
                 <TemplatesMenu
+                  isCompact={isCompact}
                   document={document}
                   onSelectTemplate={onSelectTemplate}
                 />
@@ -273,7 +287,6 @@ function DocumentHeader({
                 <Tooltip
                   content={t("Save")}
                   shortcut={`${metaDisplay}+enter`}
-                  delay={500}
                   placement="bottom"
                 >
                   <Button
@@ -297,6 +310,7 @@ function DocumentHeader({
             {can.update &&
               can.createChildDocument &&
               !isRevision &&
+              !isCompact &&
               !isMobile && (
                 <Action>
                   <NewChildDocumentMenu
@@ -305,7 +319,6 @@ function DocumentHeader({
                       <Tooltip
                         content={t("New document")}
                         shortcut="n"
-                        delay={500}
                         placement="bottom"
                       >
                         <Button icon={<PlusIcon />} {...props} neutral>
@@ -318,11 +331,7 @@ function DocumentHeader({
               )}
             {revision && revision.createdAt !== document.updatedAt && (
               <Action>
-                <Tooltip
-                  content={t("Restore version")}
-                  delay={500}
-                  placement="bottom"
-                >
+                <Tooltip content={t("Restore version")} placement="bottom">
                   <Button
                     action={restoreRevision}
                     context={context}
@@ -368,7 +377,7 @@ function DocumentHeader({
               />
             </Action>
           </>
-        }
+        )}
       />
     </>
   );

app/scenes/Document/components/History.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from "react-i18next";
 import { useHistory, useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
 import { RevisionHelper } from "@shared/utils/RevisionHelper";
+import Document from "~/models/Document";
 import Event from "~/models/Event";
 import Empty from "~/components/Empty";
 import PaginatedEventList from "~/components/PaginatedEventList";
@@ -12,7 +13,7 @@ import useStores from "~/hooks/useStores";
 import { documentPath } from "~/utils/routeHelpers";
 import Sidebar from "./SidebarLayout";
 
-const EMPTY_ARRAY: Event[] = [];
+const EMPTY_ARRAY: Event<Document>[] = [];
 
 function History() {
   const { events, documents } = useStores();

app/scenes/Document/components/KeyboardShortcutsButton.tsx

@@ -23,7 +23,7 @@ function KeyboardShortcutsButton() {
   };
 
   return (
-    <Tooltip content={t("Keyboard shortcuts")} shortcut="?" delay={500}>
+    <Tooltip content={t("Keyboard shortcuts")} shortcut="?">
       <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
         <KeyboardIcon />
       </Button>

app/scenes/Document/components/MultiplayerEditor.tsx

@@ -273,6 +273,7 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
     <>
       {showCache && (
         <Editor
+          editorStyle={props.editorStyle}
           embedsDisabled={props.embedsDisabled}
           defaultValue={props.defaultValue}
           extensions={props.extensions}
@@ -290,8 +291,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
         style={
           showCache
             ? {
+                height: 0,
                 opacity: 0,
-                pointerEvents: "none",
               }
             : undefined
         }

app/scenes/Document/components/ReferenceListItem.tsx

@@ -61,6 +61,8 @@ function ReferenceListItem({
 }: Props) {
   const { icon, color } = document;
   const isEmoji = determineIconType(icon) === IconType.Emoji;
+  const title =
+    document instanceof Document ? document.titleWithDefault : document.title;
 
   return (
     <DocumentLink
@@ -81,9 +83,7 @@ function ReferenceListItem({
         ) : (
           <DocumentIcon />
         )}
-        <Title>
-          {isEmoji ? document.title.replace(icon!, "") : document.title}
-        </Title>
+        <Title>{isEmoji ? title.replace(icon!, "") : title}</Title>
       </Content>
     </DocumentLink>
   );

app/scenes/Document/components/References.tsx

@@ -31,11 +31,13 @@ function References({ document }: Props) {
     : [];
   const showBacklinks = !!backlinks.length;
   const showChildDocuments = !!children.length;
+  const shouldFade = React.useRef(!showBacklinks && !showChildDocuments);
   const isBacklinksTab = location.hash === "#backlinks" || !showChildDocuments;
   const height = Math.max(backlinks.length, children.length) * 40;
+  const Component = shouldFade.current ? Fade : React.Fragment;
 
   return showBacklinks || showChildDocuments ? (
-    <Fade>
+    <Component>
       <Tabs>
         {showChildDocuments && (
           <Tab to="#children" isActive={() => !isBacklinksTab}>
@@ -80,7 +82,7 @@ function References({ document }: Props) {
           </List>
         )}
       </Content>
-    </Fade>
+    </Component>
   ) : null;
 }
 

app/scenes/Document/components/SidebarLayout.tsx

@@ -32,7 +32,7 @@ function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
     <>
       <Header>
         <Title>{title}</Title>
-        <Tooltip content={t("Close")} shortcut="Esc" delay={500}>
+        <Tooltip content={t("Close")} shortcut="Esc">
           <Button
             icon={<ForwardIcon />}
             onClick={onClose}

app/scenes/DocumentMove.tsx

@@ -28,12 +28,24 @@ function DocumentMove({ document }: Props) {
   );
 
   const items = React.useMemo(() => {
+    // Recursively filter out the document itself and its existing parent doc, if any.
+    const filterSourceDocument = (node: NavigationNode): NavigationNode => ({
+      ...node,
+      children: node.children
+        ?.filter(
+          (c) => c.id !== document.id && c.id !== document.parentDocumentId
+        )
+        .map(filterSourceDocument),
+    });
+
     // Filter out the document itself and its existing parent doc, if any.
     const nodes = flatten(collectionTrees.map(flattenTree))
       .filter(
         (node) =>
           node.id !== document.id && node.id !== document.parentDocumentId
       )
+      .map(filterSourceDocument)
+      // Filter out collections that we don't have permission to create documents in.
       .filter((node) =>
         node.collectionId
           ? policies.get(node.collectionId)?.abilities.createDocument
@@ -108,21 +120,21 @@ function DocumentMove({ document }: Props) {
   );
 }
 
-const FlexContainer = styled(Flex)`
+export const FlexContainer = styled(Flex)`
   margin-left: -24px;
   margin-right: -24px;
   margin-bottom: -24px;
   outline: none;
 `;
 
-const Footer = styled(Flex)`
+export const Footer = styled(Flex)`
   height: 64px;
   border-top: 1px solid ${(props) => props.theme.horizontalRule};
   padding-left: 24px;
   padding-right: 24px;
 `;
 
-const StyledText = styled(Text)`
+export const StyledText = styled(Text)`
   ${ellipsis()}
   margin-bottom: 0;
 `;

app/scenes/Home.tsx

@@ -118,7 +118,6 @@ function Home() {
 const Documents = styled.div`
   position: relative;
   background: ${s("background")};
-  transition: ${s("backgroundTransition")};
 `;
 
 export default observer(Home);

app/scenes/Invite.tsx

@@ -127,7 +127,7 @@ function Invite({ onSubmit }: Props) {
           <Trans>{{ collectionCount }} collections</Trans>
         </strong>
       </Tooltip>
-      .
+      .{" "}
     </span>
   ) : undefined;
 

app/scenes/Login/components/Notices.tsx

@@ -5,6 +5,124 @@ import { Trans } from "react-i18next";
 import Notice from "~/components/Notice";
 import useQuery from "~/hooks/useQuery";
 
+function Message({ notice }: { notice: string }) {
+  switch (notice) {
+    case "domain-not-allowed":
+      return (
+        <Trans>
+          The domain associated with your email address has not been allowed for
+          this workspace.
+        </Trans>
+      );
+    case "domain-required":
+      return (
+        <Trans>
+          Unable to sign-in. Please navigate to your workspace's custom URL,
+          then try to sign-in again.
+          <hr />
+          If you were invited to a workspace, you will find a link to it in the
+          invite email.
+        </Trans>
+      );
+    case "gmail-account-creation":
+      return (
+        <Trans>
+          Sorry, a new account cannot be created with a personal Gmail address.
+          <hr />
+          Please use a Google Workspaces account instead.
+        </Trans>
+      );
+    case "pending-deletion":
+      return (
+        <Trans>
+          The workspace associated with your user is scheduled for deletion and
+          cannot be accessed at this time.
+        </Trans>
+      );
+    case "maximum-reached":
+      return (
+        <Trans>
+          The workspace you authenticated with is not authorized on this
+          installation. Try another?
+        </Trans>
+      );
+    case "malformed-user-info":
+      return (
+        <Trans>
+          We could not read the user info supplied by your identity provider.
+        </Trans>
+      );
+    case "email-auth-required":
+      return (
+        <Trans>
+          Your account uses email sign-in, please sign-in with email to
+          continue.
+        </Trans>
+      );
+    case "email-auth-ratelimit":
+      return (
+        <Trans>
+          An email sign-in link was recently sent, please check your inbox or
+          try again in a few minutes.
+        </Trans>
+      );
+    case "auth-error":
+    case "state-mismatch":
+      return (
+        <Trans>
+          Authentication failed – we were unable to sign you in at this time.
+          Please try again.
+        </Trans>
+      );
+    case "invalid-authentication":
+      return (
+        <Trans>
+          Authentication failed – you do not have permission to access this
+          workspace.
+        </Trans>
+      );
+    case "expired-token":
+      return (
+        <Trans>
+          Sorry, it looks like that sign-in link is no longer valid, please try
+          requesting another.
+        </Trans>
+      );
+    case "user-suspended":
+      return (
+        <Trans>
+          Your account has been suspended. To re-activate your account, please
+          contact a workspace admin.
+        </Trans>
+      );
+    case "team-suspended":
+      return (
+        <Trans>
+          This workspace has been suspended. Please contact support to restore
+          access.
+        </Trans>
+      );
+    case "authentication-provider-disabled":
+      return (
+        <Trans>
+          Authentication failed – this login method was disabled by a team
+          admin.
+        </Trans>
+      );
+    case "invite-required":
+      return (
+        <Trans>
+          The workspace you are trying to join requires an invite before you can
+          create an account.
+          <hr />
+          Please request an invite from your workspace admin and try again.
+        </Trans>
+      );
+    default:
+      return <Trans>Sorry, an unknown error occurred.</Trans>;
+  }
+}
+
 export default function Notices() {
   const query = useQuery();
   const notice = query.get("notice");
@@ -15,107 +133,7 @@ export default function Notices() {
 
   return (
     <Notice icon={<WarningIcon color="currentcolor" />}>
-      {notice === "domain-not-allowed" && (
-        <Trans>
-          The domain associated with your email address has not been allowed for
-          this workspace.
-        </Trans>
-      )}
-      {notice === "domain-required" && (
-        <Trans>
-          Unable to sign-in. Please navigate to your workspace's custom URL,
-          then try to sign-in again.
-          <hr />
-          If you were invited to a workspace, you will find a link to it in the
-          invite email.
-        </Trans>
-      )}
-      {notice === "gmail-account-creation" && (
-        <Trans>
-          Sorry, a new account cannot be created with a personal Gmail address.
-          <hr />
-          Please use a Google Workspaces account instead.
-        </Trans>
-      )}
-      {notice === "pending-deletion" && (
-        <Trans>
-          The workspace associated with your user is scheduled for deletion and
-          cannot be accessed at this time.
-        </Trans>
-      )}
-      {notice === "maximum-reached" && (
-        <Trans>
-          The workspace you authenticated with is not authorized on this
-          installation. Try another?
-        </Trans>
-      )}
-      {notice === "malformed-user-info" && (
-        <Trans>
-          We could not read the user info supplied by your identity provider.
-        </Trans>
-      )}
-      {notice === "email-auth-required" && (
-        <Trans>
-          Your account uses email sign-in, please sign-in with email to
-          continue.
-        </Trans>
-      )}
-      {notice === "email-auth-ratelimit" && (
-        <Trans>
-          An email sign-in link was recently sent, please check your inbox or
-          try again in a few minutes.
-        </Trans>
-      )}
-      {(notice === "auth-error" || notice === "state-mismatch") && (
-        <Trans>
-          Authentication failed – we were unable to sign you in at this time.
-          Please try again.
-        </Trans>
-      )}
-      {notice === "invalid-authentication" && (
-        <Trans>
-          Authentication failed – you do not have permission to access this
-          workspace.
-        </Trans>
-      )}
-      {notice === "expired-token" && (
-        <Trans>
-          Sorry, it looks like that sign-in link is no longer valid, please try
-          requesting another.
-        </Trans>
-      )}
-      {notice === "user-suspended" && (
-        <Trans>
-          Your account has been suspended. To re-activate your account, please
-          contact a workspace admin.
-        </Trans>
-      )}
-      {notice === "team-suspended" && (
-        <Trans>
-          This workspace has been suspended. Please contact support to restore
-          access.
-        </Trans>
-      )}
-      {notice === "authentication-provider-disabled" && (
-        <Trans>
-          Authentication failed – this login method was disabled by a team
-          admin.
-        </Trans>
-      )}
-      {notice === "invite-required" && (
-        <Trans>
-          The workspace you are trying to join requires an invite before you can
-          create an account.
-          <hr />
-          Please request an invite from your workspace admin and try again.
-        </Trans>
-      )}
-      {notice === "domain-not-allowed" && (
-        <Trans>
-          Sorry, your domain is not allowed. Please try again with an allowed
-          workspace domain.
-        </Trans>
-      )}
+      <Message notice={notice} />
     </Notice>
   );
 }

app/scenes/Login/index.tsx

@@ -231,7 +231,8 @@ function Login({ children }: Props) {
     config.providers.length === 1 &&
     config.providers[0].id === "oidc" &&
     !env.OIDC_DISABLE_REDIRECT &&
-    !query.get("notice")
+    !query.get("notice") &&
+    !query.get("logout")
   ) {
     window.location.href = getRedirectUrl(config.providers[0].authUrl);
     return null;