wip

Test using xlarge
2026-06-13 19:35:02 +03:00 · 2024-11-16 13:34:04 -05:00 · 2024-11-16 13:30:39 -05:00 · 2024-11-16 13:27:46 -05:00
177 changed files with 2219 additions and 2990 deletions
@@ -45,7 +45,7 @@ import DocumentPermanentDelete from "~/scenes/DocumentPermanentDelete";
 import DocumentPublish from "~/scenes/DocumentPublish";
 import DeleteDocumentsInTrash from "~/scenes/Trash/components/DeleteDocumentsInTrash";
 import ConfirmationDialog from "~/components/ConfirmationDialog";
-import DocumentCopy from "~/components/DocumentCopy";
+import DuplicateDialog from "~/components/DuplicateDialog";
 import Icon from "~/components/Icon";
 import MarkdownIcon from "~/components/Icons/MarkdownIcon";
 import SharePopover from "~/components/Sharing/Document";
@@ -562,7 +562,7 @@ export const duplicateDocument = createAction({
    stores.dialogs.openModal({
      title: t("Copy document"),
      content: (
-        <DocumentCopy
+        <DuplicateDialog
          document={document}
          onSubmit={(response) => {
            stores.dialogs.closeAllModals();
@@ -1054,7 +1054,7 @@ export const openDocumentComments = createAction({
      return;
    }

-    stores.ui.toggleComments();
+    stores.ui.toggleComments(activeDocumentId);
  },
 });

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

@@ -5,7 +5,6 @@ import { Redirect } from "react-router-dom";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useStores from "~/hooks/useStores";
 import { changeLanguage } from "~/utils/language";
-import { logoutPath } from "~/utils/routeHelpers";
 import LoadingIndicator from "./LoadingIndicator";

 type Props = {
@@ -33,7 +32,7 @@ const Authenticated = ({ children }: Props) => {
  }

  void auth.logout(true);
-  return <Redirect to={logoutPath()} />;
+  return <Redirect to="/" />;
 };

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

  const sidebarRight = (
@@ -8,16 +8,18 @@ import BreadcrumbMenu from "~/menus/BreadcrumbMenu";
 import { undraggableOnDesktop } from "~/styles";
 import { MenuInternalLink } from "~/types";

-type Props = React.PropsWithChildren<{
+type Props = {
  items: MenuInternalLink[];
  max?: number;
  highlightFirstItem?: boolean;
-}>;
+};

-function Breadcrumb(
-  { items, highlightFirstItem, children, max = 2 }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Breadcrumb({
+  items,
+  highlightFirstItem,
+  children,
+  max = 2,
+}: React.PropsWithChildren<Props>) {
  const totalItems = items.length;
  const topLevelItems: MenuInternalLink[] = [...items];
  let overflowItems;
@@ -35,7 +37,7 @@ function Breadcrumb(
  }

  return (
-    <Flex justify="flex-start" align="center" ref={ref}>
+    <Flex justify="flex-start" align="center">
      {topLevelItems.map((item, index) => (
        <React.Fragment key={String(item.to) || index}>
          {item.icon}
@@ -65,8 +67,6 @@ const Slash = styled(GoToIcon)`

 const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  ${ellipsis()}
-  ${undraggableOnDesktop()}
-
  display: flex;
  flex-shrink: 1;
  min-width: 0;
@@ -76,6 +76,7 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  height: 24px;
  font-weight: ${(props) => (props.$highlight ? "500" : "inherit")};
  margin-left: ${(props) => (props.$withIcon ? "4px" : "0")};
+  ${undraggableOnDesktop()}

  svg {
    flex-shrink: 0;
@@ -86,4 +87,4 @@ const Item = styled(Link)<{ $highlight: boolean; $withIcon: boolean }>`
  }
 `;

-export default React.forwardRef<HTMLDivElement, Props>(Breadcrumb);
+export default Breadcrumb;
@@ -18,8 +18,6 @@ import useStores from "~/hooks/useStores";
 type Props = {
  /** The document to display live collaborators for */
  document: Document;
-  /** The maximum number of collaborators to display, defaults to 6 */
-  limit?: number;
 };

 /**
@@ -27,7 +25,6 @@ type Props = {
 * and presence status.
 */
 function Collaborators(props: Props) {
-  const { limit = 6 } = props;
  const { t } = useTranslation();
  const user = useCurrentUser();
  const currentUserId = user?.id;
@@ -78,6 +75,8 @@ function Collaborators(props: Props) {
    placement: "bottom-end",
  });

+  const limit = 8;
+
  return (
    <>
      <PopoverDisclosure {...popover}>
@@ -89,7 +88,6 @@ function Collaborators(props: Props) {
          >
            <Facepile
              limit={limit}
-              overflow={collaborators.length - limit}
              users={collaborators}
              renderAvatar={(collaborator) => {
                const isPresent = presentIds.includes(collaborator.id);
@@ -201,6 +201,7 @@ const Input = styled.div`
  margin: -8px;
  padding: 8px;
  border-radius: 8px;
+  transition: ${s("backgroundTransition")};

  &:after {
    content: "";
@@ -182,6 +182,7 @@ function placeCaret(element: HTMLElement, atStart: boolean) {

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

  /*
@@ -57,10 +57,11 @@ function useCategory(document: Document): MenuInternalLink | null {
  return null;
 }

-function DocumentBreadcrumb(
-  { document, children, onlyText }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+const DocumentBreadcrumb: React.FC<Props> = ({
+  document,
+  children,
+  onlyText,
+}: Props) => {
  const { collections } = useStores();
  const { t } = useTranslation();
  const category = useCategory(document);
@@ -139,11 +140,11 @@ function DocumentBreadcrumb(
  }

  return (
-    <Breadcrumb items={items} ref={ref} highlightFirstItem>
+    <Breadcrumb items={items} highlightFirstItem>
      {children}
    </Breadcrumb>
  );
-}
+};

 const StyledIcon = styled(Icon)`
  margin-right: 2px;
@@ -159,4 +160,4 @@ const SmallSlash = styled(GoToIcon)`
  opacity: 0.5;
 `;

-export default observer(React.forwardRef(DocumentBreadcrumb));
+export default observer(DocumentBreadcrumb);
@@ -39,7 +39,6 @@ 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;
@@ -123,13 +122,13 @@ function DocumentCard(props: Props) {
              <Squircle
                color={
                  collection?.color ??
-                  (pinnedToHome ? theme.slateLight : theme.slateDark)
+                  (!pin?.collectionId ? theme.slateLight : theme.slateDark)
                }
              >
                {collection?.icon &&
                collection?.icon !== "letter" &&
                collection?.icon !== "collection" &&
-                pinnedToHome ? (
+                !pin?.collectionId ? (
                  <CollectionIcon collection={collection} color="white" />
                ) : (
                  <DocumentIcon color="white" />
@@ -144,7 +143,12 @@ function DocumentCard(props: Props) {
              </Heading>
              <DocumentMeta size="xsmall">
                <Clock size={18} />
-                <Time dateTime={document.updatedAt} addSuffix shorten />
+                <Time
+                  dateTime={document.updatedAt}
+                  tooltipDelay={500}
+                  addSuffix
+                  shorten
+                />
              </DocumentMeta>
            </div>
          </Content>
@@ -1,149 +0,0 @@
-import flatten from "lodash/flatten";
-import { observer } from "mobx-react";
-import * as React from "react";
-import { Trans, useTranslation } from "react-i18next";
-import { toast } from "sonner";
-import styled from "styled-components";
-import { NavigationNode } from "@shared/types";
-import Document from "~/models/Document";
-import { FlexContainer, Footer, StyledText } from "~/scenes/DocumentMove";
-import Button from "~/components/Button";
-import DocumentExplorer from "~/components/DocumentExplorer";
-import useCollectionTrees from "~/hooks/useCollectionTrees";
-import useStores from "~/hooks/useStores";
-import { flattenTree } from "~/utils/tree";
-import Switch from "./Switch";
-import Text from "./Text";
-
-type Props = {
-  /** The original document to duplicate */
-  document: Document;
-  onSubmit: (documents: Document[]) => void;
-};
-
-function DocumentCopy({ document, onSubmit }: Props) {
-  const { t } = useTranslation();
-  const { policies } = useStores();
-  const collectionTrees = useCollectionTrees();
-  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
-  const [recursive, setRecursive] = React.useState<boolean>(true);
-  const [selectedPath, selectPath] = React.useState<NavigationNode | null>(
-    null
-  );
-
-  const items = React.useMemo(() => {
-    const nodes = flatten(collectionTrees.map(flattenTree)).filter((node) =>
-      node.collectionId
-        ? policies.get(node.collectionId)?.abilities.createDocument
-        : true
-    );
-
-    if (document.isTemplate) {
-      return nodes
-        .filter((node) => node.type === "collection")
-        .map((node) => ({ ...node, children: [] }));
-    }
-    return nodes;
-  }, [policies, collectionTrees, document.isTemplate]);
-
-  const handlePublishChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setPublish(ev.target.checked);
-    },
-    []
-  );
-
-  const handleRecursiveChange = React.useCallback(
-    (ev: React.ChangeEvent<HTMLInputElement>) => {
-      setRecursive(ev.target.checked);
-    },
-    []
-  );
-
-  const copy = async () => {
-    if (!selectedPath) {
-      toast.message(t("Select a location to copy"));
-      return;
-    }
-
-    try {
-      const result = await document.duplicate({
-        publish,
-        recursive,
-        title: document.title,
-        collectionId: selectedPath.collectionId,
-        ...(selectedPath.type === "document"
-          ? { parentDocumentId: selectedPath.id }
-          : {}),
-      });
-
-      toast.success(t("Document copied"));
-      onSubmit(result);
-    } catch (err) {
-      toast.error(t("Couldn’t copy the document, try again?"));
-    }
-  };
-
-  return (
-    <FlexContainer column>
-      <DocumentExplorer
-        items={items}
-        onSubmit={copy}
-        onSelect={selectPath}
-        defaultValue={document.parentDocumentId || document.collectionId || ""}
-      />
-      <OptionsContainer>
-        {!document.isTemplate && (
-          <>
-            {document.collectionId && (
-              <Text size="small">
-                <Switch
-                  name="publish"
-                  label={t("Publish")}
-                  labelPosition="right"
-                  checked={publish}
-                  onChange={handlePublishChange}
-                />
-              </Text>
-            )}
-            {document.publishedAt && document.childDocuments.length > 0 && (
-              <Text size="small">
-                <Switch
-                  name="recursive"
-                  label={t("Include nested documents")}
-                  labelPosition="right"
-                  checked={recursive}
-                  onChange={handleRecursiveChange}
-                />
-              </Text>
-            )}
-          </>
-        )}
-      </OptionsContainer>
-      <Footer justify="space-between" align="center" gap={8}>
-        <StyledText type="secondary">
-          {selectedPath ? (
-            <Trans
-              defaults="Copy to <em>{{ location }}</em>"
-              values={{ location: selectedPath.title }}
-              components={{ em: <strong /> }}
-            />
-          ) : (
-            t("Select a location to copy")
-          )}
-        </StyledText>
-        <Button disabled={!selectedPath} onClick={copy}>
-          {t("Copy")}
-        </Button>
-      </Footer>
-    </FlexContainer>
-  );
-}
-
-const OptionsContainer = styled.div`
-  margin: 16px 0 8px 0;
-  padding-left: 24px;
-  padding-right: 24px;
-`;
-
-export default observer(DocumentCopy);
@@ -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, defaultValue }: Props) {
+function DocumentExplorer({ onSubmit, onSelect, items }: Props) {
  const isMobile = useMobile();
  const { collections, documents } = useStores();
  const { t } = useTranslation();
@@ -47,25 +47,12 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {

  const [searchTerm, setSearchTerm] = React.useState<string>();
  const [selectedNode, selectNode] = React.useState<NavigationNode | null>(
-    () => {
-      const node =
-        defaultValue && items.find((item) => item.id === defaultValue);
-      return node || null;
-    }
+    null
  );
  const [initialScrollOffset, setInitialScrollOffset] =
    React.useState<number>(0);
  const [activeNode, setActiveNode] = React.useState<number>(0);
-  const [expandedNodes, setExpandedNodes] = React.useState<string[]>(() => {
-    if (defaultValue) {
-      const node = items.find((item) => item.id === defaultValue);
-      if (node) {
-        return ancestors(node).map((node) => node.id);
-      }
-    }
-    return [];
-  });
-
+  const [expandedNodes, setExpandedNodes] = React.useState<string[]>([]);
  const [itemRefs, setItemRefs] = React.useState<
    React.RefObject<HTMLSpanElement>[]
  >([]);
@@ -107,15 +94,6 @@ function DocumentExplorer({ onSubmit, onSelect, items, defaultValue }: Props) {
    onSelect(selectedNode);
  }, [selectedNode, onSelect]);

-  React.useEffect(() => {
-    if (defaultValue && selectedNode && listRef) {
-      const index = nodes.findIndex((node) => node.id === selectedNode.id);
-      if (index > 0) {
-        setTimeout(() => listRef.current?.scrollToItem(index, "center"), 50);
-      }
-    }
-  }, []);
-
  function getNodes() {
    function includeDescendants(item: NavigationNode): NavigationNode[] {
      return expandedNodes.includes(item.id)
@@ -111,7 +111,11 @@ function DocumentListItem(
            <Badge yellow>{t("New")}</Badge>
          )}
          {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
+            <Tooltip
+              content={t("Only visible to you")}
+              delay={500}
+              placement="top"
+            >
              <Badge>{t("Draft")}</Badge>
            </Tooltip>
          )}
@@ -0,0 +1,97 @@
+import { observer } from "mobx-react";
+import * as React from "react";
+import { useTranslation } from "react-i18next";
+import { DocumentValidation } from "@shared/validations";
+import Document from "~/models/Document";
+import ConfirmationDialog from "~/components/ConfirmationDialog";
+import Input from "./Input";
+import Switch from "./Switch";
+import Text from "./Text";
+
+type Props = {
+  /** The original document to duplicate */
+  document: Document;
+  onSubmit: (documents: Document[]) => void;
+};
+
+function DuplicateDialog({ document, onSubmit }: Props) {
+  const { t } = useTranslation();
+  const defaultTitle = t(`Copy of {{ documentName }}`, {
+    documentName: document.title,
+  });
+  const [publish, setPublish] = React.useState<boolean>(!!document.publishedAt);
+  const [recursive, setRecursive] = React.useState<boolean>(true);
+  const [title, setTitle] = React.useState<string>(defaultTitle);
+
+  const handlePublishChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setPublish(ev.target.checked);
+    },
+    []
+  );
+
+  const handleRecursiveChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setRecursive(ev.target.checked);
+    },
+    []
+  );
+
+  const handleTitleChange = React.useCallback(
+    (ev: React.ChangeEvent<HTMLInputElement>) => {
+      setTitle(ev.target.value);
+    },
+    []
+  );
+
+  const handleSubmit = async () => {
+    const result = await document.duplicate({
+      publish,
+      recursive,
+      title,
+    });
+    onSubmit(result);
+  };
+
+  return (
+    <ConfirmationDialog onSubmit={handleSubmit} submitText={t("Duplicate")}>
+      <Input
+        autoFocus
+        autoSelect
+        name="title"
+        label={t("Title")}
+        onChange={handleTitleChange}
+        maxLength={DocumentValidation.maxTitleLength}
+        defaultValue={defaultTitle}
+      />
+      {!document.isTemplate && (
+        <>
+          {document.collectionId && (
+            <Text size="small">
+              <Switch
+                name="publish"
+                label={t("Publish")}
+                labelPosition="right"
+                checked={publish}
+                onChange={handlePublishChange}
+              />
+            </Text>
+          )}
+          {document.publishedAt && document.childDocuments.length > 0 && (
+            <Text size="small">
+              <Switch
+                name="recursive"
+                label={t("Include nested documents")}
+                labelPosition="right"
+                checked={recursive}
+                onChange={handleRecursiveChange}
+              />
+            </Text>
+          )}
+        </>
+      )}
+    </ConfirmationDialog>
+  );
+}
+
+export default observer(DuplicateDialog);
@@ -140,6 +140,7 @@ const EventListItem = ({ event, latest, document, ...rest }: Props) => {
      title={
        <Time
          dateTime={event.createdAt}
+          tooltipDelay={500}
          format={{
            en_US: "MMM do, h:mm a",
            fr_FR: "'Le 'd MMMM 'à' H:mm",
@@ -229,7 +229,7 @@ const SearchInput = styled(Input)`
  ${Outline} {
    border: none;
    border-radius: 0;
-    border-bottom: 1px solid rgb(34 40 52);
+    border-bottom: 1px solid ${s("inputBorder")};
    background: ${s("menuBackground")};
  }

@@ -94,6 +94,7 @@ const Scene = styled.div`
  align-items: flex-start;
  width: 350px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  border-radius: 8px;
  outline: none;
  opacity: 0;
@@ -3,7 +3,6 @@ import { observer } from "mobx-react";
 import { MenuIcon } from "outline-icons";
 import { transparentize } from "polished";
 import * as React from "react";
-import { mergeRefs } from "react-merge-refs";
 import styled from "styled-components";
 import breakpoint from "styled-components-breakpoint";
 import { depths, s } from "@shared/styles";
@@ -11,7 +10,6 @@ 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";
@@ -23,22 +21,16 @@ export const HEADER_HEIGHT = 64;
 type Props = {
  left?: React.ReactNode;
  title: React.ReactNode;
-  actions?:
-    | ((props: { isCompact: boolean }) => React.ReactNode)
-    | React.ReactNode;
+  actions?: React.ReactNode;
  hasSidebar?: boolean;
  className?: string;
 };

-function Header(
-  { left, title, actions, hasSidebar, className }: Props,
-  ref: React.RefObject<HTMLDivElement> | null
-) {
+function Header({ left, title, actions, hasSidebar, className }: Props) {
  const { ui } = useStores();
  const isMobile = useMobile();
  const hasMobileSidebar = hasSidebar && isMobile;
-  const internalRef = React.useRef<HTMLDivElement | null>(null);
-  const breadcrumbsRef = React.useRef<HTMLDivElement | null>(null);
+
  const passThrough = !actions && !left && !title;

  const [isScrolled, setScrolled] = React.useState(false);
@@ -61,18 +53,8 @@ function Header(
    });
  }, []);

-  const setBreadcrumbRef = React.useCallback((node: HTMLDivElement | null) => {
-    breadcrumbsRef.current = node?.firstElementChild as HTMLDivElement;
-  }, []);
-
-  const size = useComponentSize(internalRef);
-  const breadcrumbsSize = useComponentSize(breadcrumbsRef);
-  const breadcrumbMakesCompact = breadcrumbsSize.width > size.width / 3;
-  const isCompact = size.width < 1000 || breadcrumbMakesCompact;
-
  return (
    <Wrapper
-      ref={mergeRefs([ref, internalRef])}
      align="center"
      shrink={false}
      className={className}
@@ -80,7 +62,7 @@ function Header(
      $insetTitleAdjust={ui.sidebarIsClosed && Desktop.hasInsetTitlebar()}
    >
      {left || hasMobileSidebar ? (
-        <Breadcrumbs ref={setBreadcrumbRef}>
+        <Breadcrumbs>
          {hasMobileSidebar && (
            <MobileMenuButton
              onClick={ui.toggleMobileSidebar}
@@ -92,7 +74,7 @@ function Header(
        </Breadcrumbs>
      ) : null}

-      {isScrolled && !isCompact ? (
+      {isScrolled ? (
        <Title onClick={handleClickTitle}>
          <Fade>{title}</Fade>
        </Title>
@@ -100,7 +82,7 @@ function Header(
        <div />
      )}
      <Actions align="center" justify="flex-end">
-        {typeof actions === "function" ? actions({ isCompact }) : actions}
+        {actions}
      </Actions>
    </Wrapper>
  );
@@ -148,6 +130,7 @@ const Wrapper = styled(Flex)<WrapperProps>`
      `};

  padding: 12px;
+  transition: all 100ms ease-out;
  transform: translate3d(0, 0, 0);
  min-height: ${HEADER_HEIGHT}px;
  justify-content: flex-start;
@@ -169,6 +152,7 @@ const Wrapper = styled(Flex)<WrapperProps>`

  ${breakpoint("tablet")`
    padding: 16px;
+    justify-content: center;
    ${(props: WrapperProps) => props.$insetTitleAdjust && `padding-left: 64px;`}
    `};
 `;
@@ -207,4 +191,4 @@ const MobileMenuButton = styled(Button)`
  }
 `;

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

 const Container = styled(Flex)`
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  position: relative;
  width: 100%;
  min-height: 100%;
@@ -23,6 +23,7 @@ function eachMinute(fn: () => void) {
 export type Props = {
  children?: React.ReactNode;
  dateTime: string;
+  tooltipDelay?: number;
  addSuffix?: boolean;
  shorten?: boolean;
  relative?: boolean;
@@ -36,6 +37,7 @@ const LocaleTime: React.FC<Props> = ({
  shorten,
  format,
  relative,
+  tooltipDelay,
 }: Props) => {
  const userLocale = useUserLocale();
  const dateFormatLong: Record<string, string> = {
@@ -80,7 +82,7 @@ const LocaleTime: React.FC<Props> = ({
        });

  return (
-    <Tooltip content={tooltipContent} placement="bottom">
+    <Tooltip content={tooltipContent} delay={tooltipDelay} placement="bottom">
      <time dateTime={dateTime}>{children || content}</time>
    </Tooltip>
  );
@@ -174,6 +174,7 @@ const Fullscreen = styled.div<FullscreenProps>`
  justify-content: center;
  align-items: flex-start;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  outline: none;

  ${breakpoint("tablet")`
@@ -264,6 +265,7 @@ const Small = styled.div`
  justify-content: center;
  align-items: flex-start;
  background: ${s("modalBackground")};
+  transition: ${s("backgroundTransition")};
  box-shadow: ${s("modalShadow")};
  border-radius: 8px;
  outline: none;
@@ -52,7 +52,11 @@ function NotificationListItem({ notification, onNavigate }: Props) {
            <Text weight="bold">{notification.subject}</Text>
          </Text>
          <Text type="tertiary" size="xsmall">
-            <Time dateTime={notification.createdAt} addSuffix />{" "}
+            <Time
+              dateTime={notification.createdAt}
+              tooltipDelay={1000}
+              addSuffix
+            />{" "}
            {collection && <>&middot; {collection.name}</>}
          </Text>
          {notification.comment && (
@@ -60,7 +60,7 @@ function Notifications(
          </Text>
          <Flex gap={8}>
            {notifications.approximateUnreadCount > 0 && (
-              <Tooltip content={t("Mark all as read")}>
+              <Tooltip delay={500} content={t("Mark all as read")}>
                <Button action={markNotificationsAsRead} context={context}>
                  <MarkAsReadIcon />
                </Button>
@@ -128,7 +128,7 @@ const Reaction: React.FC<Props> = ({
  );

  return tooltipContent ? (
-    <Tooltip content={tooltipContent} placement="bottom">
+    <Tooltip content={tooltipContent} delay={250} placement="bottom">
      {DisplayedEmoji}
    </Tooltip>
  ) : (
@@ -144,6 +144,7 @@ const EmojiButton = styled(NudeButton)<{
  height: 28px;
  padding: 6px;
  border-radius: 12px;
+  transition: ${s("backgroundTransition")};
  background: ${s("backgroundTertiary")};
  pointer-events: ${({ disabled }) => disabled && "none"};

@@ -2,6 +2,7 @@ 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";
@@ -10,7 +11,6 @@ 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,17 +98,15 @@ const ReactionPicker: React.FC<Props> = ({
    <>
      <PopoverDisclosure {...popover}>
        {(props) => (
-          <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>
+          <PopoverButton
+            {...props}
+            aria-label={t("Reaction picker")}
+            className={className}
+            onClick={handlePopoverButtonClick}
+            size={size}
+          >
+            <ReactionIcon size={22} />
+          </PopoverButton>
        )}
      </PopoverDisclosure>
      <Popover
@@ -153,4 +151,8 @@ const Placeholder = React.memo(
 );
 Placeholder.displayName = "ReactionPickerPlaceholder";

+const PopoverButton = styled(NudeButton)`
+  border-radius: 50%;
+`;
+
 export default ReactionPicker;
@@ -119,7 +119,7 @@ function PublicAccess({ document, share, sharedParent }: Props) {
    : share?.url ?? "";

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

  return (
-    <Tooltip content={t("Copy link")} placement="top">
+    <Tooltip content={t("Copy link")} delay={500} placement="top">
      <CopyToClipboard text={url} onCopy={handleCopied}>
        <NudeButton type="button">
          <LinkIcon size={20} />
@@ -80,6 +80,7 @@ function AppSidebar() {
                <Tooltip
                  content={t("Toggle sidebar")}
                  shortcut={`${metaDisplay}+.`}
+                  delay={500}
                >
                  <ToggleButton
                    position="bottom"
@@ -32,13 +32,13 @@ function Right({ children, border, className }: Props) {
        Math.min(window.innerWidth - event.pageX, maxWidth),
        minWidth
      );
-      ui.set({ sidebarRightWidth: width });
+      ui.setRightSidebarWidth(width);
    },
    [minWidth, maxWidth, ui]
  );

  const handleReset = React.useCallback(() => {
-    ui.set({ sidebarRightWidth: theme.sidebarRightWidth });
+    ui.setRightSidebarWidth(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: ${depths.sidebar};
+  z-index: 1;

  ${breakpoint("mobile", "tablet")`
    display: flex;
@@ -42,7 +42,11 @@ function SettingsSidebar() {
        image={<StyledBackIcon />}
        onClick={returnToApp}
      >
-        <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
+        <Tooltip
+          content={t("Toggle sidebar")}
+          shortcut={`${metaDisplay}+.`}
+          delay={500}
+        >
          <ToggleButton
            position="bottom"
            image={<SidebarIcon />}
@@ -81,7 +81,11 @@ const ToggleSidebar = () => {
  const { ui } = useStores();

  return (
-    <Tooltip content={t("Toggle sidebar")} shortcut={`${metaDisplay}+.`}>
+    <Tooltip
+      content={t("Toggle sidebar")}
+      shortcut={`${metaDisplay}+.`}
+      delay={500}
+    >
      <ToggleButton
        position="bottom"
        image={<SidebarIcon />}
@@ -46,6 +46,7 @@ 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);
@@ -61,13 +62,13 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
      const width = Math.min(event.pageX - offset, maxWidth);
      const isSmallerThanCollapsePoint = width < minWidth / 2;

-      ui.set({
-        sidebarWidth: isSmallerThanCollapsePoint
-          ? theme.sidebarCollapsedWidth
-          : width,
-      });
+      if (isSmallerThanCollapsePoint) {
+        setWidth(theme.sidebarCollapsedWidth);
+      } else {
+        setWidth(width);
+      }
    },
-    [ui, theme, offset, minWidth, maxWidth]
+    [theme, offset, minWidth, maxWidth, setWidth]
  );

  const handleStopDrag = React.useCallback(() => {
@@ -85,13 +86,13 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
        setCollapsing(true);
        ui.collapseSidebar();
      } else {
-        ui.set({ sidebarWidth: minWidth });
+        setWidth(minWidth);
        setAnimating(true);
      }
    } else {
-      ui.set({ sidebarWidth: width });
+      setWidth(width);
    }
-  }, [ui, isSmallerThanMinimum, minWidth, width]);
+  }, [ui, isSmallerThanMinimum, minWidth, width, setWidth]);

  const handleBlur = React.useCallback(() => {
    setHovering(false);
@@ -148,11 +149,11 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  React.useEffect(() => {
    if (isCollapsing) {
      setTimeout(() => {
-        ui.set({ sidebarWidth: minWidth });
+        setWidth(minWidth);
        setCollapsing(false);
      }, ANIMATION_MS);
    }
-  }, [ui, minWidth, isCollapsing]);
+  }, [setWidth, minWidth, isCollapsing]);

  React.useEffect(() => {
    if (isResizing) {
@@ -173,7 +174,7 @@ const Sidebar = React.forwardRef<HTMLDivElement, Props>(function _Sidebar(
  }, [isResizing, handleDrag, handleBlur, handleStopDrag]);

  const handleReset = React.useCallback(() => {
-    ui.set({ sidebarWidth: theme.sidebarWidth });
+    ui.setSidebarWidth(theme.sidebarWidth);
  }, [ui, theme.sidebarWidth]);

  React.useEffect(() => {
@@ -298,8 +299,9 @@ const Container = styled(Flex)<ContainerProps>`
  width: 100%;
  background: ${s("sidebarBackground")};
  transition: box-shadow 150ms ease-in-out, transform 150ms ease-out,
-    ${(props: ContainerProps) =>
-      props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
+    ${s("backgroundTransition")}
+      ${(props: ContainerProps) =>
+        props.$isAnimating ? `,width ${ANIMATION_MS}ms ease-out` : ""};
  transform: translateX(
    ${(props) => (props.$mobileSidebarVisible ? 0 : "-100%")}
  );
@@ -278,7 +278,7 @@ function InnerDocumentLink(
                  !isDraggingAnyDocument ? (
                    <Fade>
                      {can.createChildDocument && (
-                        <Tooltip content={t("New doc")}>
+                        <Tooltip content={t("New doc")} delay={500}>
                          <NudeButton
                            type={undefined}
                            aria-label={t("New nested document")}
@@ -43,12 +43,12 @@ function HistoryNavigation(props: React.ComponentProps<typeof Flex>) {

  return (
    <Navigation gap={4} {...props}>
-      <Tooltip content={t("Go back")}>
+      <Tooltip content={t("Go back")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge?.goBack()}>
          <Back $active={back} />
        </NudeButton>
      </Tooltip>
-      <Tooltip content={t("Go forward")}>
+      <Tooltip content={t("Go forward")} delay={500}>
        <NudeButton onClick={() => Desktop.bridge?.goForward()}>
          <Forward $active={forward} />
        </NudeButton>
@@ -112,9 +112,8 @@ const NavLink = ({
      !rest.target &&
      !event.altKey &&
      !event.metaKey &&
-      !event.ctrlKey &&
-      !isActive,
-    [rest.target, isActive]
+      !event.ctrlKey,
+    [rest.target]
  );

  const navigateTo = React.useCallback(() => {
@@ -154,13 +153,14 @@ const NavLink = ({
    <Link
      key={isActive ? "active" : "inactive"}
      ref={linkRef}
-      onClick={handleClick}
+      // onMouseDown={handleClick}
      onKeyDown={(event) => {
        if (["Enter", " "].includes(event.key)) {
          navigateTo();
          event.currentTarget?.blur();
        }
      }}
+      onClick={handleClick}
      aria-current={(isActive && ariaCurrent) || undefined}
      className={className}
      style={style}
@@ -105,6 +105,7 @@ const Button = styled(Flex)<{
  &:hover,
  &[aria-expanded="true"] {
    color: ${s("sidebarText")};
+    transition: background 100ms ease-in-out;
    background: ${s("sidebarActiveBackground")};
  }

@@ -78,6 +78,7 @@ function SidebarLink(

  const activeStyle = React.useMemo(
    () => ({
+      fontWeight: 600,
      color: theme.text,
      background: theme.sidebarActiveBackground,
      ...style,
@@ -201,10 +202,10 @@ const Link = styled(NavLink)<{
  display: flex;
  position: relative;
  text-overflow: ellipsis;
-  font-weight: 475;
  padding: 6px 16px;
  border-radius: 4px;
  min-height: 32px;
+  transition: background 50ms, color 50ms;
  user-select: none;
  background: ${(props) =>
    props.$isActiveDrop ? props.theme.slateDark : "inherit"};
@@ -48,20 +48,13 @@ 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,
@@ -31,6 +31,7 @@ const Background = styled.div<{ sticky?: boolean }>`
  margin: 0 -8px;
  padding: 0 8px;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  z-index: 1;
 `;

@@ -253,7 +253,6 @@ const SortWrapper = styled(Flex)<{ $sortable: boolean }>`
  white-space: nowrap;
  margin: 0 -4px;
  padding: 0 4px;
-  cursor: ${(props) => (props.$sortable ? `var(--pointer)` : "")};

  &:hover {
    background: ${(props) =>
@@ -310,13 +309,15 @@ const Row = styled.tr`

 const Head = styled.th`
  text-align: left;
-  padding: 6px 6px 2px;
+  padding: 6px 6px 0;
  border-bottom: 1px solid ${s("divider")};
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
  font-size: 14px;
  color: ${s("textSecondary")};
  font-weight: 500;
  z-index: 1;
+  cursor: var(--pointer) !important;

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

@@ -22,7 +22,7 @@ function Time({ onClick, ...props }: Props) {
          <time dateTime={props.dateTime}>{props.children || content}</time>
        }
      >
-        <LocaleTime {...props} />
+        <LocaleTime tooltipDelay={250} {...props} />
      </React.Suspense>
    </span>
  );
@@ -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,9 +12,8 @@ export type Props = Omit<TippyProps, "content" | "theme"> & {
  shortcut?: React.ReactNode;
 };

-function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
+function Tooltip({ shortcut, content: tooltip, delay = 50, ...rest }: Props) {
  const isMobile = useMobile();
-  const singleton = useTooltipContext();

  let content = <>{tooltip}</>;

@@ -31,7 +30,15 @@ function Tooltip({ shortcut, content: tooltip, delay = 500, ...rest }: Props) {
  }

  return (
-    <Tippy content={content} delay={delay} singleton={singleton} {...rest} />
+    <Tippy
+      arrow={roundArrow}
+      animation="shift-away"
+      content={content}
+      delay={delay}
+      duration={[200, 150]}
+      inertia
+      {...rest}
+    />
  );
 }

@@ -125,7 +132,7 @@ export const TooltipStyles = createGlobalStyle`
      padding:5px 9px;
      z-index:1
  }
-
+ 
  /* Arrow Styles */
  .tippy-box[data-placement^=top]>.tippy-svg-arrow{
    bottom:0
@@ -1,36 +0,0 @@
-import Tippy, { useSingleton, TippyProps } from "@tippyjs/react";
-import * as React from "react";
-import { roundArrow } from "tippy.js";
-
-export const TooltipContext =
-  React.createContext<TippyProps["singleton"]>(undefined);
-
-export function useTooltipContext() {
-  return React.useContext(TooltipContext);
-}
-
-type Props = {
-  children: React.ReactNode;
-  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>
-    </>
-  );
-}
@@ -0,0 +1,42 @@
+import * as React from "react";
+import styled from "styled-components";
+import { s } from "@shared/styles";
+
+type Props = {
+  /** The size to render the indicator, defaults to 24px */
+  size?: number;
+};
+
+/**
+ * A component to show an animated typing indicator.
+ */
+export default function Typing({ size = 24 }: Props) {
+  return (
+    <Wrapper height={size} width={size}>
+      <Circle cx={size / 4} cy={size / 2} r="2" />
+      <Circle cx={size / 2} cy={size / 2} r="2" />
+      <Circle cx={size / 1.33333} cy={size / 2} r="2" />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.svg`
+  fill: ${s("textTertiary")};
+
+  @keyframes blink {
+    50% {
+      fill: transparent;
+    }
+  }
+`;
+
+const Circle = styled.circle`
+  animation: 1s blink infinite;
+
+  &:nth-child(2) {
+    animation-delay: 250ms;
+  }
+  &:nth-child(3) {
+    animation-delay: 500ms;
+  }
+`;
@@ -529,6 +529,13 @@ class WebsocketProvider extends React.Component<Props> {
      stars.remove(event.modelId);
    });

+    this.socket.on(
+      "user.typing",
+      (event: { userId: string; documentId: string; commentId: string }) => {
+        comments.setTyping(event);
+      }
+    );
+
    this.socket.on("collections.add_user", async (event: Membership) => {
      memberships.add(event);
      await collections.fetch(event.collectionId, {
@@ -25,18 +25,10 @@ import { altDisplay, isModKey, metaDisplay } from "~/utils/keyboard";
 import { useEditor } from "./EditorContext";

 type Props = {
-  /** Whether the find and replace popover is open */
  open: boolean;
-  /** Callback when the find and replace popover is opened */
  onOpen: () => void;
-  /** Callback when the find and replace popover is closed */
  onClose: () => void;
-  /** Whether the editor is in read-only mode */
  readOnly?: boolean;
-  /** The current highlighted index in the search results */
-  currentIndex: number;
-  /** The total number of search results */
-  totalResults: number;
 };

 export default function FindAndReplace({
@@ -44,8 +36,6 @@ export default function FindAndReplace({
  open,
  onOpen,
  onClose,
-  currentIndex,
-  totalResults,
 }: Props) {
  const editor = useEditor();
  const finalFocusRef = React.useRef<HTMLElement>(
@@ -280,26 +270,25 @@ export default function FindAndReplace({
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [popover.visible]);

-  const disabled = totalResults === 0;
  const navigation = (
    <>
      <Tooltip
        content={t("Previous match")}
        shortcut="shift+enter"
+        delay={500}
        placement="bottom"
      >
-        <ButtonLarge
-          disabled={disabled}
-          onClick={() => editor.commands.prevSearchMatch()}
-        >
+        <ButtonLarge onClick={() => editor.commands.prevSearchMatch()}>
          <CaretUpIcon />
        </ButtonLarge>
      </Tooltip>
-      <Tooltip content={t("Next match")} shortcut="enter" placement="bottom">
-        <ButtonLarge
-          disabled={disabled}
-          onClick={() => editor.commands.nextSearchMatch()}
-        >
+      <Tooltip
+        content={t("Next match")}
+        shortcut="enter"
+        delay={500}
+        placement="bottom"
+      >
+        <ButtonLarge onClick={() => editor.commands.nextSearchMatch()}>
          <CaretDownIcon />
        </ButtonLarge>
      </Tooltip>
@@ -317,7 +306,7 @@ export default function FindAndReplace({
        width={420}
      >
        <Content column>
-          <Flex gap={4}>
+          <Flex gap={8}>
            <StyledInput
              ref={inputRef}
              maxLength={255}
@@ -330,6 +319,7 @@ export default function FindAndReplace({
                <Tooltip
                  content={t("Match case")}
                  shortcut={`${altDisplay}+${metaDisplay}+c`}
+                  delay={500}
                  placement="bottom"
                >
                  <ButtonSmall onClick={handleCaseSensitive}>
@@ -341,6 +331,7 @@ export default function FindAndReplace({
                <Tooltip
                  content={t("Enable regex")}
                  shortcut={`${altDisplay}+${metaDisplay}+r`}
+                  delay={500}
                  placement="bottom"
                >
                  <ButtonSmall onClick={handleRegex}>
@@ -353,15 +344,16 @@ export default function FindAndReplace({
            </StyledInput>
            {navigation}
            {!readOnly && (
-              <Tooltip content={t("Replace options")} placement="bottom">
+              <Tooltip
+                content={t("Replace options")}
+                delay={500}
+                placement="bottom"
+              >
                <ButtonLarge onClick={handleMore}>
                  <ReplaceIcon color={theme.textSecondary} />
                </ButtonLarge>
              </Tooltip>
            )}
-            <Results>
-              {totalResults > 0 ? currentIndex + 1 : 0} / {totalResults}
-            </Results>
          </Flex>
          <ResizingHeightContainer>
            {showReplace && !readOnly && (
@@ -375,10 +367,10 @@ export default function FindAndReplace({
                  onRequestSubmit={handleReplaceAll}
                  onChange={(ev) => setReplaceTerm(ev.currentTarget.value)}
                />
-                <Button onClick={handleReplace} disabled={disabled} neutral>
+                <Button onClick={handleReplace} neutral>
                  {t("Replace")}
                </Button>
-                <Button onClick={handleReplaceAll} disabled={disabled} neutral>
+                <Button onClick={handleReplaceAll} neutral>
                  {t("Replace all")}
                </Button>
              </Flex>
@@ -404,12 +396,6 @@ const ButtonSmall = styled(NudeButton)`
  &[aria-expanded="true"] {
    background: ${s("sidebarControlHoverBackground")};
  }
-
-  &:disabled {
-    color: ${s("textTertiary")};
-    background: none;
-    cursor: default;
-  }
 `;

 const ButtonLarge = styled(ButtonSmall)`
@@ -422,15 +408,3 @@ const Content = styled(Flex)`
  margin-bottom: -16px;
  position: static;
 `;
-
-const Results = styled.span`
-  color: ${s("textSecondary")};
-  font-size: 12px;
-  font-weight: 500;
-  font-variant-numeric: tabular-nums;
-  line-height: 32px;
-  min-width: 32px;
-  letter-spacing: -0.5px;
-  text-align: right;
-  user-select: none;
-`;
@@ -131,15 +131,13 @@ function usePosition({

  // Images need their own positioning to get the toolbar in the center
  if (isImageSelection) {
-    const element = view.nodeDOM(selection.from);
+    const element = view.nodeDOM(selection.from) as HTMLElement;

    // Images are wrapped which impacts positioning - need to get the element
    // specifically tagged as the handle
-    const imageElement = element
-      ? (element as HTMLElement).getElementsByClassName(
-          EditorStyleHelper.imageHandle
-        )[0]
-      : undefined;
+    const imageElement = element.getElementsByClassName(
+      EditorStyleHelper.imageHandle
+    )[0];
    if (imageElement) {
      const { left, top, width } = imageElement.getBoundingClientRect();

@@ -1,4 +1,3 @@
-import { TippyProps } from "@tippyjs/react";
 import * as React from "react";
 import { useMenuState } from "reakit";
 import { MenuButton } from "reakit/Menu";
@@ -8,7 +7,6 @@ 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";
@@ -77,8 +75,6 @@ function ToolbarDropdown(props: { active: boolean; item: MenuItem }) {
  );
 }

-const tippyProps = { placement: "top" } as TippyProps;
-
 function ToolbarMenu(props: Props) {
  const { commands, view } = useEditor();
  const { items } = props;
@@ -95,38 +91,36 @@ function ToolbarMenu(props: Props) {
  };

  return (
-    <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;
+    <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>
-    </TooltipProvider>
+        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>
  );
 }

@@ -8,18 +8,8 @@ type Props = {
  children?: React.ReactNode;
 };

-const WrappedTooltip: React.FC<Props> = ({
-  children,
-  content,
-  ...rest
-}: Props) => (
-  <Tooltip
-    offset={[0, 16]}
-    delay={150}
-    content={content}
-    placement="top"
-    {...rest}
-  >
+const WrappedTooltip: React.FC<Props> = ({ children, content }: Props) => (
+  <Tooltip offset={[0, 16]} delay={150} content={content} placement="top">
    <TooltipContent>{children}</TooltipContent>
  </Tooltip>
 );
@@ -92,10 +92,6 @@ 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) {
@@ -110,12 +106,7 @@ export default class FindAndReplaceExtension extends Extension {
  }

  public replaceAll(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 tr = state.tr;
+    return ({ tr }, dispatch) => {
      let offset: number | undefined;

      if (!this.results.length) {
@@ -257,25 +248,15 @@ export default class FindAndReplaceExtension extends Extension {
        let m;
        const search = this.findRegExp;

-        // 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))) {
+        while ((m = search.exec(deburr(text)))) {
          if (m[0] === "") {
            break;
          }

-          // 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 });
+          this.results.push({
+            from: pos + m.index,
+            to: pos + m.index + m[0].length,
+          });
        }
      } catch (e) {
        // Invalid RegExp
@@ -332,8 +313,6 @@ export default class FindAndReplaceExtension extends Extension {

  public widget = ({ readOnly }: WidgetProps) => (
    <FindAndReplace
-      currentIndex={this.currentResultIndex}
-      totalResults={this.results.length}
      readOnly={readOnly}
      open={this.open}
      onOpen={() => {
@@ -348,11 +327,7 @@ export default class FindAndReplaceExtension extends Extension {
  @observable
  private open = false;

-  @observable
  private results: { from: number; to: number }[] = [];
-
-  @observable
  private currentResultIndex = 0;
-
  private searchTerm = "";
 }
@@ -1,4 +1,5 @@
 import isEqual from "lodash/isEqual";
+import { keymap } from "prosemirror-keymap";
 import {
  ySyncPlugin,
  yCursorPlugin,
@@ -103,13 +104,11 @@ 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,
-    };
-  }
 }
@@ -4,6 +4,7 @@ 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";
@@ -607,6 +608,20 @@ 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.
   *
@@ -31,7 +31,7 @@ export default function useAutoRefresh() {
        return;
      }
      if (isReloaded) {
-        Logger.warn("Attempted to reload twice");
+        Logger.error("lifecycle", new Error("Attempted to reload twice"));
        return;
      }

@@ -6,7 +6,10 @@ export default function useComponentSize(
  width: number;
  height: number;
 } {
-  const [size, setSize] = useState({ width: 0, height: 0 });
+  const [size, setSize] = useState({
+    width: ref.current?.clientWidth || 0,
+    height: ref.current?.clientHeight || 0,
+  });

  useLayoutEffect(() => {
    const sizeObserver = new ResizeObserver((entries) => {
@@ -21,10 +24,6 @@ export default function useComponentSize(
    });

    if (ref.current) {
-      setSize({
-        width: ref.current?.clientWidth,
-        height: ref.current?.clientHeight,
-      });
      sizeObserver.observe(ref.current);
    }

@@ -29,7 +29,6 @@ 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"));
@@ -88,10 +87,10 @@ const useSettingsConfig = () => {
        icon: EmailIcon,
      },
      {
-        name: t("API Keys"),
-        path: settingsPath("personal-api-keys"),
-        component: PersonalApiKeys,
-        enabled: can.createApiKey && !can.listApiKeys,
+        name: t("API"),
+        path: settingsPath("tokens"),
+        component: ApiKeys,
+        enabled: can.createApiKey,
        group: t("Account"),
        icon: CodeIcon,
      },
@@ -144,14 +143,6 @@ 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"),
@@ -20,7 +20,6 @@ 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";
@@ -56,23 +55,21 @@ if (element) {
            <Theme>
              <ErrorBoundary showTitle>
                <KBarProvider actions={[]} options={commandBarOptions}>
-                  <TooltipProvider>
-                    <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>
                </KBarProvider>
              </ErrorBoundary>
            </Theme>
@@ -19,7 +19,12 @@ function NewDocumentMenu() {
  }

  return (
-    <Tooltip content={t("New document")} shortcut="n" placement="bottom">
+    <Tooltip
+      content={t("New document")}
+      shortcut="n"
+      delay={500}
+      placement="bottom"
+    >
      <Button as={Link} to={newDocumentPath()} icon={<PlusIcon />}>
        {t("New doc")}
      </Button>
@@ -1,9 +1,8 @@
 import { observer } from "mobx-react";
-import { DocumentIcon, ShapesIcon } from "outline-icons";
+import { DocumentIcon } 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";
@@ -12,17 +11,14 @@ 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({ isCompact, onSelectTemplate, document }: Props) {
+function TemplatesMenu({ onSelectTemplate, document }: Props) {
  const menu = useMenuState({
    modal: true,
  });
@@ -33,7 +29,7 @@ function TemplatesMenu({ isCompact, onSelectTemplate, document }: Props) {
  const templateToMenuItem = React.useCallback(
    (tmpl: Document): MenuItem => ({
      type: "button",
-      title: TextHelper.replaceTemplateVariables(tmpl.titleWithDefault, user),
+      title: replaceTitleVariables(tmpl.titleWithDefault, user),
      icon: tmpl.icon ? (
        <Icon value={tmpl.icon} color={tmpl.color ?? undefined} />
      ) : (
@@ -83,13 +79,8 @@ function TemplatesMenu({ isCompact, onSelectTemplate, document }: Props) {
    <>
      <MenuButton {...menu}>
        {(props) => (
-          <Button
-            {...props}
-            icon={isCompact ? <ShapesIcon /> : undefined}
-            disclosure={!isCompact}
-            neutral
-          >
-            {isCompact ? undefined : t("Templates")}
+          <Button {...props} disclosure neutral>
+            {t("Templates")}
          </Button>
        )}
      </MenuButton>
@@ -1,6 +1,8 @@
+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";
@@ -13,6 +15,17 @@ 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
   */
@@ -94,6 +107,17 @@ 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
   */
@@ -65,6 +65,10 @@ export default class Document extends ArchivableModel {

  store: DocumentsStore;

+  @Field
+  @observable
+  id: string;
+
  @observable.shallow
  data: ProsemirrorData;

@@ -573,8 +577,6 @@ export default class Document extends ArchivableModel {
    title?: string;
    publish?: boolean;
    recursive?: boolean;
-    collectionId?: string | null;
-    parentDocumentId?: string;
  }) => this.store.duplicate(this, options);

  /**
@@ -6,6 +6,10 @@ import Field from "./decorators/Field";
 class Group extends Model {
  static modelName = "Group";

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

+  @Field
+  @observable
+  id: string;
+
  /**
   * The date the notification was marked as read.
   */
@@ -119,8 +123,6 @@ 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:
@@ -172,7 +174,6 @@ 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)
@@ -8,6 +8,10 @@ import Field from "./decorators/Field";
 class Team extends Model {
  static modelName = "Team";

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

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

+  @Field
+  @observable
+  id: string;
+
  @Field
  @observable
  name: string;
@@ -27,6 +27,7 @@ function Actions({ collection }: Props) {
            <Tooltip
              content={t("New document")}
              shortcut="n"
+              delay={500}
              placement="bottom"
            >
              <Button
@@ -49,6 +49,8 @@ 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 */
@@ -61,6 +63,7 @@ function CommentForm({
  draft,
  onSubmit,
  onSaveDraft,
+  onTyping,
  onFocus,
  onBlur,
  autoFocus,
@@ -179,6 +182,7 @@ function CommentForm({
  ) => {
    const text = value(true, true);
    onSaveDraft(text ? value(false, true) : undefined);
+    onTyping?.();
  };

  const handleSave = () => {
@@ -316,7 +320,7 @@ function CommentForm({
                  {t("Cancel")}
                </ButtonSmall>
              </Flex>
-              <Tooltip content={t("Upload image")} placement="top">
+              <Tooltip delay={500} content={t("Upload image")} placement="top">
                <NudeButton onClick={handleImageUpload}>
                  <ImageIcon color={theme.textTertiary} />
                </NudeButton>
@@ -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,11 +10,14 @@ import { s } from "@shared/styles";
 import { ProsemirrorData } from "@shared/types";
 import Comment from "~/models/Comment";
 import Document from "~/models/Document";
-import { Avatar, AvatarSize } from "~/components/Avatar";
+import { Avatar } 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";
@@ -37,12 +40,28 @@ 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,
@@ -50,19 +69,21 @@ 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>(
@@ -81,17 +102,6 @@ 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 &&
@@ -119,36 +129,6 @@ 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);
@@ -212,17 +192,8 @@ 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 ||
@@ -248,6 +219,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}>
@@ -257,6 +237,7 @@ function CommentThread({
              draft={draft}
              documentId={document.id}
              thread={thread}
+              onTyping={setIsTyping}
              standalone={commentsInThread.length === 0}
              dir={document.dir}
              autoFocus={autoFocus}
@@ -295,29 +276,6 @@ 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;
@@ -1,7 +1,6 @@
 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";
@@ -17,14 +16,10 @@ 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";
@@ -197,12 +192,21 @@ function CommentThreadItem({
            {showAuthor && <em>{comment.createdBy.name}</em>}
            {showAuthor && showTime && <> &middot; </>}
            {showTime && (
-              <Time dateTime={comment.createdAt} addSuffix shorten />
+              <Time
+                dateTime={comment.createdAt}
+                tooltipDelay={500}
+                addSuffix
+                shorten
+              />
            )}
            {showEdited && (
              <>
                {" "}
-                (<Time dateTime={comment.updatedAt}>{t("edited")}</Time>)
+                (
+                <Time dateTime={comment.updatedAt} tooltipDelay={500}>
+                  {t("edited")}
+                </Time>
+                )
              </>
            )}
          </Meta>
@@ -238,13 +242,11 @@ function CommentThreadItem({
                onRemoveReaction={handleRemoveReaction}
                picker={
                  !comment.isResolved ? (
-                    <Action
-                      as={ReactionPicker}
+                    <StyledReactionPicker
                      onSelect={handleAddReaction}
                      onOpen={disableScroll}
                      onClose={enableScroll}
                      size={28}
-                      rounded
                    />
                  ) : undefined
                }
@@ -256,21 +258,13 @@ function CommentThreadItem({
          {!isEditing && (
            <Actions gap={4} dir={dir}>
              {!comment.isResolved && (
-                <>
-                  {firstOfThread && (
-                    <ResolveButton onUpdate={handleUpdate} comment={comment} />
-                  )}
-                  <Action
-                    as={ReactionPicker}
-                    onSelect={handleAddReaction}
-                    onOpen={disableScroll}
-                    onClose={enableScroll}
-                    rounded
-                  />
-                </>
+                <StyledReactionPicker
+                  onSelect={handleAddReaction}
+                  onOpen={disableScroll}
+                  onClose={enableScroll}
+                />
              )}
-              <Action
-                as={CommentMenu}
+              <StyledMenu
                comment={comment}
                onEdit={setEditing}
                onDelete={handleDelete}
@@ -284,33 +278,6 @@ 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 &&
@@ -341,13 +308,25 @@ const Body = styled.form`
  border-radius: 2px;
 `;

-const Action = styled.span<{ rounded?: boolean }>`
+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)`
  color: ${s("textSecondary")};
-  ${(props) =>
-    props.rounded &&
-    css`
-      border-radius: 50%;
-    `}

  svg {
    fill: currentColor;
@@ -373,7 +352,7 @@ const Actions = styled(Flex)<{ dir?: "rtl" | "ltr" }>`
  background: ${s("backgroundSecondary")};
  padding-left: 4px;

-  &:has(${Action}[aria-expanded="true"]) {
+  &:has(${StyledReactionPicker}[aria-expanded="true"], ${StyledMenu}[aria-expanded="true"]) {
    opacity: 1;
  }
 `;
@@ -407,7 +386,7 @@ export const Bubble = styled(Flex)<{
  min-width: 2em;
  margin-bottom: 1px;
  padding: 8px 12px;
-  transition: color 100ms ease-out, background 100ms ease-out;
+  transition: color 100ms ease-out, ${s("backgroundTransition")};

  ${({ $lastOfThread, $canReply }) =>
    $lastOfThread &&
@@ -44,7 +44,7 @@ function Comments() {
  const isAtBottom = React.useRef(true);
  const [showJumpToRecentBtn, setShowJumpToRecentBtn] = React.useState(false);

-  useKeyDown("Escape", () => document && ui.set({ commentsExpanded: false }));
+  useKeyDown("Escape", () => document && ui.collapseComments(document?.id));

  const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
    `draft-${document?.id}-new`,
@@ -94,18 +94,14 @@ function Comments() {
  React.useEffect(() => {
    // Handles: 1. on refresh 2. when switching sort setting
    const readyToDisplay = Boolean(document && isEditorInitialized);
-    if (
-      readyToDisplay &&
-      sortOption.type === CommentSortType.MostRecent &&
-      !viewingResolved
-    ) {
+    if (readyToDisplay && sortOption.type === CommentSortType.MostRecent) {
      scrollToBottom();
    }
-  }, [sortOption.type, document, isEditorInitialized, viewingResolved]);
+  }, [sortOption.type, document, isEditorInitialized]);

  React.useEffect(() => {
    setShowJumpToRecentBtn(false);
-    if (sortOption.type === CommentSortType.MostRecent && !viewingResolved) {
+    if (sortOption.type === CommentSortType.MostRecent) {
      const commentsAdded = threads.length > prevThreadCount.current;
      if (commentsAdded) {
        if (isAtBottom.current) {
@@ -116,7 +112,7 @@ function Comments() {
      }
    }
    prevThreadCount.current = threads.length;
-  }, [sortOption.type, threads.length, viewingResolved]);
+  }, [sortOption.type, threads.length]);

  if (!document || !isEditorInitialized) {
    return null;
@@ -130,7 +126,7 @@ function Comments() {
          <CommentSortMenu />
        </Flex>
      }
-      onClose={() => ui.set({ commentsExpanded: false })}
+      onClose={() => ui.collapseComments(document?.id)}
      scrollable={false}
    >
      <Scrollable
@@ -87,6 +87,7 @@ const StickyWrapper = styled.div`
  border-radius: 8px;

  background: ${s("background")};
+  transition: ${s("backgroundTransition")};

  @supports (backdrop-filter: blur(20px)) {
    backdrop-filter: blur(20px);
@@ -26,7 +26,6 @@ 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";
@@ -45,6 +44,7 @@ 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,13 +151,7 @@ class DocumentScene extends React.Component<Props> {
    }

    const { view, schema } = editorRef;
-    const doc = Node.fromJSON(
-      schema,
-      ProsemirrorHelper.replaceTemplateVariables(
-        template.data,
-        this.props.auth.user!
-      )
-    );
+    const doc = Node.fromJSON(schema, template.data);

    if (doc) {
      view.dispatch(
@@ -174,9 +168,9 @@ class DocumentScene extends React.Component<Props> {
    }

    if (!this.title) {
-      const title = TextHelper.replaceTemplateVariables(
+      const title = replaceTitleVariables(
        template.title,
-        this.props.auth.user!
+        this.props.auth.user || undefined
      );
      this.title = title;
      this.props.document.title = title;
@@ -221,15 +215,13 @@ class DocumentScene extends React.Component<Props> {

  onUndoRedo = (event: KeyboardEvent) => {
    if (isModKey(event)) {
-      event.preventDefault();
-
      if (event.shiftKey) {
-        if (!this.props.readOnly) {
-          this.editor.current?.commands.redo();
+        if (this.editor.current?.redo()) {
+          event.preventDefault();
        }
      } else {
-        if (!this.props.readOnly) {
-          this.editor.current?.commands.undo();
+        if (this.editor.current?.undo()) {
+          event.preventDefault();
        }
      }
    }
@@ -418,8 +410,7 @@ class DocumentScene extends React.Component<Props> {
      (team && team.documentEmbeds === false) || document.embedsDisabled;

    const showContents =
-      (ui.tocVisible === true && !document.isTemplate) ||
-      (isShare && ui.tocVisible !== false);
+      ui.tocVisible === true || (isShare && ui.tocVisible !== false);
    const tocPos =
      tocPosition ??
      ((team?.getPreference(TeamPreference.TocPosition) as TOCPosition) ||
@@ -704,6 +695,7 @@ const Footer = styled.div`
 const Background = styled(Container)`
  position: relative;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 `;

 const ReferencesWrapper = styled.div`
@@ -46,7 +46,7 @@ function TitleDocumentMeta({ to, document, revision, ...rest }: Props) {
          &nbsp;•&nbsp;
          <CommentLink
            to={documentPath(document)}
-            onClick={() => ui.toggleComments()}
+            onClick={() => ui.toggleComments(document.id)}
          >
            <CommentIcon size={18} />
            {commentsCount
@@ -116,7 +116,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
          state: { commentId: focusedComment.id },
        });
      }
-      ui.set({ commentsExpanded: true });
+      ui.expandComments(document.id);
    }
  }, [focusedComment, ui, document.id, history, params]);

@@ -30,7 +30,6 @@ 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";
@@ -87,13 +86,11 @@ function DocumentHeader({
  const team = useCurrentTeam({ rejectOnEmpty: false });
  const user = useCurrentUser({ rejectOnEmpty: false });
  const { resolvedTheme } = ui;
-  const isMobileMedia = useMobile();
+  const isMobile = useMobile();
  const isRevision = !!revision;
  const isEditingFocus = useEditingFocus();
-  const { hasHeadings, editor } = useDocumentContext();
-  const ref = React.useRef<HTMLDivElement | null>(null);
-  const size = useComponentSize(ref);
-  const isMobile = isMobileMedia || size.width < 700;
+  const { editor } = useDocumentContext();
+  const { hasHeadings } = useDocumentContext();

  // 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
@@ -106,10 +103,6 @@ function DocumentHeader({
    });
  }, [onSave]);

-  const handleToggle = React.useCallback(() => {
-    ui.set({ tocVisible: !ui.tocVisible });
-  }, [ui]);
-
  const context = useActionContext({
    activeDocumentId: document?.id,
  });
@@ -120,8 +113,7 @@ function DocumentHeader({
  const canToggleEmbeds = team?.documentEmbeds;
  const isShare = !!shareId;
  const showContents =
-    (ui.tocVisible === true && !document.isTemplate) ||
-    (isShare && ui.tocVisible !== false);
+    ui.tocVisible === true || (isShare && ui.tocVisible !== false);

  const toc = (
    <Tooltip
@@ -133,10 +125,11 @@ function DocumentHeader({
          : `${t("Show contents")} (${t("available when headings are added")})`
      }
      shortcut={`ctrl+${altDisplay}+h`}
+      delay={250}
      placement="bottom"
    >
      <Button
-        onClick={handleToggle}
+        onClick={showContents ? ui.hideTableOfContents : ui.showTableOfContents}
        icon={<TableOfContentsIcon />}
        borderOnHover
        neutral
@@ -150,6 +143,7 @@ function DocumentHeader({
          noun: document.noun,
        })}
        shortcut="e"
+        delay={500}
        placement="bottom"
      >
        <Button
@@ -169,6 +163,7 @@ function DocumentHeader({
        content={
          resolvedTheme === "light" ? t("Switch to dark") : t("Switch to light")
        }
+        delay={500}
        placement="bottom"
      >
        <Button
@@ -185,7 +180,7 @@ function DocumentHeader({

  useKeyDown(
    (event) => event.ctrlKey && event.altKey && event.key === "˙",
-    handleToggle,
+    ui.tocVisible ? ui.hideTableOfContents : ui.showTableOfContents,
    {
      allowInInput: true,
    }
@@ -230,7 +225,6 @@ function DocumentHeader({
  return (
    <>
      <StyledHeader
-        ref={ref}
        $hidden={isEditingFocus}
        hasSidebar
        left={
@@ -238,11 +232,7 @@ function DocumentHeader({
            <TableOfContentsMenu />
          ) : (
            <DocumentBreadcrumb document={document}>
-              {document.isTemplate ? null : (
-                <>
-                  {toc} <Star document={document} color={theme.textSecondary} />
-                </>
-              )}
+              {toc} <Star document={document} color={theme.textSecondary} />
            </DocumentBreadcrumb>
          )
        }
@@ -255,7 +245,7 @@ function DocumentHeader({
            {document.isArchived && <Badge>{t("Archived")}</Badge>}
          </Flex>
        }
-        actions={({ isCompact }) => (
+        actions={
          <>
            <ObservingBanner />

@@ -263,15 +253,11 @@ function DocumentHeader({
              <Status>{t("Saving")}…</Status>
            )}
            {!isDeleted && !isRevision && can.listViews && (
-              <Collaborators
-                document={document}
-                limit={isCompact ? 3 : undefined}
-              />
+              <Collaborators document={document} />
            )}
            {(isEditing || !user?.separateEditMode) && !isTemplate && isNew && (
              <Action>
                <TemplatesMenu
-                  isCompact={isCompact}
                  document={document}
                  onSelectTemplate={onSelectTemplate}
                />
@@ -287,6 +273,7 @@ function DocumentHeader({
                <Tooltip
                  content={t("Save")}
                  shortcut={`${metaDisplay}+enter`}
+                  delay={500}
                  placement="bottom"
                >
                  <Button
@@ -310,7 +297,6 @@ function DocumentHeader({
            {can.update &&
              can.createChildDocument &&
              !isRevision &&
-              !isCompact &&
              !isMobile && (
                <Action>
                  <NewChildDocumentMenu
@@ -319,6 +305,7 @@ function DocumentHeader({
                      <Tooltip
                        content={t("New document")}
                        shortcut="n"
+                        delay={500}
                        placement="bottom"
                      >
                        <Button icon={<PlusIcon />} {...props} neutral>
@@ -331,7 +318,11 @@ function DocumentHeader({
              )}
            {revision && revision.createdAt !== document.updatedAt && (
              <Action>
-                <Tooltip content={t("Restore version")} placement="bottom">
+                <Tooltip
+                  content={t("Restore version")}
+                  delay={500}
+                  placement="bottom"
+                >
                  <Button
                    action={restoreRevision}
                    context={context}
@@ -377,7 +368,7 @@ function DocumentHeader({
              />
            </Action>
          </>
-        )}
+        }
      />
    </>
  );
@@ -23,7 +23,7 @@ function KeyboardShortcutsButton() {
  };

  return (
-    <Tooltip content={t("Keyboard shortcuts")} shortcut="?">
+    <Tooltip content={t("Keyboard shortcuts")} shortcut="?" delay={500}>
      <Button onClick={handleOpenKeyboardShortcuts} $hidden={isEditingFocus}>
        <KeyboardIcon />
      </Button>
@@ -273,7 +273,6 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
    <>
      {showCache && (
        <Editor
-          editorStyle={props.editorStyle}
          embedsDisabled={props.embedsDisabled}
          defaultValue={props.defaultValue}
          extensions={props.extensions}
@@ -291,8 +290,8 @@ function MultiplayerEditor({ onSynced, ...props }: Props, ref: any) {
        style={
          showCache
            ? {
-                height: 0,
                opacity: 0,
+                pointerEvents: "none",
              }
            : undefined
        }
@@ -31,13 +31,11 @@ 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 ? (
-    <Component>
+    <Fade>
      <Tabs>
        {showChildDocuments && (
          <Tab to="#children" isActive={() => !isBacklinksTab}>
@@ -82,7 +80,7 @@ function References({ document }: Props) {
          </List>
        )}
      </Content>
-    </Component>
+    </Fade>
  ) : null;
 }

@@ -32,7 +32,7 @@ function SidebarLayout({ title, onClose, children, scrollable = true }: Props) {
    <>
      <Header>
        <Title>{title}</Title>
-        <Tooltip content={t("Close")} shortcut="Esc">
+        <Tooltip content={t("Close")} shortcut="Esc" delay={500}>
          <Button
            icon={<ForwardIcon />}
            onClick={onClose}
@@ -28,24 +28,12 @@ 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
@@ -120,21 +108,21 @@ function DocumentMove({ document }: Props) {
  );
 }

-export const FlexContainer = styled(Flex)`
+const FlexContainer = styled(Flex)`
  margin-left: -24px;
  margin-right: -24px;
  margin-bottom: -24px;
  outline: none;
 `;

-export const Footer = styled(Flex)`
+const Footer = styled(Flex)`
  height: 64px;
  border-top: 1px solid ${(props) => props.theme.horizontalRule};
  padding-left: 24px;
  padding-right: 24px;
 `;

-export const StyledText = styled(Text)`
+const StyledText = styled(Text)`
  ${ellipsis()}
  margin-bottom: 0;
 `;
@@ -118,6 +118,7 @@ function Home() {
 const Documents = styled.div`
  position: relative;
  background: ${s("background")};
+  transition: ${s("backgroundTransition")};
 `;

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

@@ -231,8 +231,7 @@ function Login({ children }: Props) {
    config.providers.length === 1 &&
    config.providers[0].id === "oidc" &&
    !env.OIDC_DISABLE_REDIRECT &&
-    !query.get("notice") &&
-    !query.get("logout")
+    !query.get("notice")
  ) {
    window.location.href = getRedirectUrl(config.providers[0].authUrl);
    return null;
@@ -2,7 +2,6 @@ import * as React from "react";
 import { Redirect } from "react-router-dom";
 import env from "~/env";
 import useStores from "~/hooks/useStores";
-import { logoutPath } from "~/utils/routeHelpers";

 const Logout = () => {
  const { auth } = useStores();
@@ -18,7 +17,7 @@ const Logout = () => {
  if (env.OIDC_LOGOUT_URI) {
    return null; // user will be redirected to logout URI after logout
  }
-  return <Redirect to={logoutPath()} />;
+  return <Redirect to="/" />;
 };

 export default Logout;
@@ -17,7 +17,7 @@ export function DocumentFilter(props: Props) {

  return (
    <div>
-      <Tooltip content={t("Remove document filter")}>
+      <Tooltip content={t("Remove document filter")} delay={350}>
        <StyledButton onClick={props.onClick} icon={<CloseIcon />} neutral>
          {props.document.title}
        </StyledButton>
@@ -33,7 +33,7 @@ function RecentSearchListItem({ searchQuery }: Props) {
      {...rovingTabIndex}
    >
      {searchQuery.query}
-      <Tooltip content={t("Remove search")}>
+      <Tooltip content={t("Remove search")} delay={150}>
        <RemoveButton
          aria-label={t("Remove search")}
          onClick={async (ev) => {
@@ -59,6 +59,7 @@ const StyledInput = styled.input`
  outline: none;
  border: 0;
  background: ${s("sidebarBackground")};
+  transition: ${s("backgroundTransition")};
  border-radius: 4px;

  color: ${s("text")};
@@ -2,6 +2,7 @@ import { observer } from "mobx-react";
 import { CodeIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation, Trans } from "react-i18next";
+import { toast } from "sonner";
 import ApiKey from "~/models/ApiKey";
 import { Action } from "~/components/Actions";
 import Button from "~/components/Button";
@@ -12,17 +13,36 @@ import Text from "~/components/Text";
 import { createApiKey } from "~/actions/definitions/apiKeys";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
+import useCurrentUser from "~/hooks/useCurrentUser";
 import usePolicy from "~/hooks/usePolicy";
 import useStores from "~/hooks/useStores";
 import ApiKeyListItem from "./components/ApiKeyListItem";

 function ApiKeys() {
  const team = useCurrentTeam();
+  const user = useCurrentUser();
  const { t } = useTranslation();
  const { apiKeys } = useStores();
  const can = usePolicy(team);
  const context = useActionContext();

+  const [copiedKeyId, setCopiedKeyId] = React.useState<string | null>();
+  const copyTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();
+
+  const handleCopy = React.useCallback(
+    (keyId: string) => {
+      if (copyTimeoutIdRef.current) {
+        clearTimeout(copyTimeoutIdRef.current);
+      }
+      setCopiedKeyId(keyId);
+      copyTimeoutIdRef.current = setTimeout(() => {
+        setCopiedKeyId(null);
+      }, 3000);
+      toast.message(t("API key copied to clipboard"));
+    },
+    [t]
+  );
+
  return (
    <Scene
      title={t("API")}
@@ -42,11 +62,12 @@ function ApiKeys() {
        </>
      }
    >
-      <Heading>{t("API Keys")}</Heading>
+      <Heading>{t("API")}</Heading>
      <Text as="p" type="secondary">
        <Trans
-          defaults="API keys can be used to authenticate with the API and programatically control
-          your workspace's data. For more details see the <em>developer documentation</em>."
+          defaults="Create personal API keys to authenticate with the API and programatically control
+          your workspace's data. API keys have the same permissions as your user account.
+          For more details see the <em>developer documentation</em>."
          components={{
            em: (
              <a
@@ -60,10 +81,16 @@ function ApiKeys() {
      </Text>
      <PaginatedList
        fetch={apiKeys.fetchPage}
-        items={apiKeys.orderedData}
-        heading={<h2>{t("All")}</h2>}
+        items={apiKeys.personalApiKeys}
+        options={{ userId: user.id }}
+        heading={<h2>{t("Personal keys")}</h2>}
        renderItem={(apiKey: ApiKey) => (
-          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
+          <ApiKeyListItem
+            key={apiKey.id}
+            apiKey={apiKey}
+            isCopied={apiKey.id === copiedKeyId}
+            onCopy={handleCopy}
+          />
        )}
      />
    </Scene>
@@ -6,7 +6,6 @@ import {
  CollectionIcon,
  CommentIcon,
  DocumentIcon,
-  DoneIcon,
  EditIcon,
  EmailIcon,
  PublishIcon,
@@ -66,14 +65,6 @@ function Notifications() {
        "Receive a notification when someone mentions you in a document or comment"
      ),
    },
-    {
-      event: NotificationEventType.ResolveComment,
-      icon: <DoneIcon />,
-      title: t("Resolved"),
-      description: t(
-        "Receive a notification when a comment thread you were involved in is resolved"
-      ),
-    },
    {
      event: NotificationEventType.CreateCollection,
      icon: <CollectionIcon />,
@@ -1,77 +0,0 @@
-import { observer } from "mobx-react";
-import { CodeIcon } from "outline-icons";
-import * as React from "react";
-import { useTranslation, Trans } from "react-i18next";
-import ApiKey from "~/models/ApiKey";
-import { Action } from "~/components/Actions";
-import Button from "~/components/Button";
-import Heading from "~/components/Heading";
-import PaginatedList from "~/components/PaginatedList";
-import Scene from "~/components/Scene";
-import Text from "~/components/Text";
-import { createApiKey } from "~/actions/definitions/apiKeys";
-import useActionContext from "~/hooks/useActionContext";
-import useCurrentTeam from "~/hooks/useCurrentTeam";
-import useCurrentUser from "~/hooks/useCurrentUser";
-import usePolicy from "~/hooks/usePolicy";
-import useStores from "~/hooks/useStores";
-import ApiKeyListItem from "./components/ApiKeyListItem";
-
-function PersonalApiKeys() {
-  const team = useCurrentTeam();
-  const user = useCurrentUser();
-  const { t } = useTranslation();
-  const { apiKeys } = useStores();
-  const can = usePolicy(team);
-  const context = useActionContext();
-
-  return (
-    <Scene
-      title={t("API")}
-      icon={<CodeIcon />}
-      actions={
-        <>
-          {can.createApiKey && (
-            <Action>
-              <Button
-                type="submit"
-                value={`${t("New API key")}…`}
-                action={createApiKey}
-                context={context}
-              />
-            </Action>
-          )}
-        </>
-      }
-    >
-      <Heading>{t("API")}</Heading>
-      <Text as="p" type="secondary">
-        <Trans
-          defaults="Create personal API keys to authenticate with the API and programatically control
-          your workspace's data. API keys have the same permissions as your user account.
-          For more details see the <em>developer documentation</em>."
-          components={{
-            em: (
-              <a
-                href="https://www.getoutline.com/developers"
-                target="_blank"
-                rel="noreferrer"
-              />
-            ),
-          }}
-        />
-      </Text>
-      <PaginatedList
-        fetch={apiKeys.fetchPage}
-        items={apiKeys.personalApiKeys}
-        options={{ userId: user.id }}
-        heading={<h2>{t("Personal keys")}</h2>}
-        renderItem={(apiKey: ApiKey) => (
-          <ApiKeyListItem key={apiKey.id} apiKey={apiKey} />
-        )}
-      />
-    </Scene>
-  );
-}
-
-export default observer(PersonalApiKeys);
@@ -220,6 +220,9 @@ function Security() {
        </SettingRow>
      )}

+      {!data.inviteRequired && (
+        <DomainManagement onSuccess={showSuccessMessage} />
+      )}
      {!data.inviteRequired && (
        <SettingRow
          label={t("Default role")}
@@ -249,8 +252,6 @@ function Security() {
        </SettingRow>
      )}

-      <DomainManagement onSuccess={showSuccessMessage} />
-
      <h2>{t("Behavior")}</h2>
      <SettingRow
        label={t("Public document sharing")}
@@ -12,6 +12,7 @@ export const ActionRow = styled.div`
  margin: 0 -50vw;

  background: ${s("background")};
+  transition: ${s("backgroundTransition")};

  @supports (backdrop-filter: blur(20px)) {
    backdrop-filter: blur(20px);
@@ -1,8 +1,6 @@
-import { observer } from "mobx-react";
 import { CopyIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
-import { toast } from "sonner";
 import ApiKey from "~/models/ApiKey";
 import Button from "~/components/Button";
 import CopyToClipboard from "~/components/CopyToClipboard";
@@ -10,29 +8,24 @@ import Flex from "~/components/Flex";
 import ListItem from "~/components/List/Item";
 import Text from "~/components/Text";
 import Time from "~/components/Time";
-import useCurrentUser from "~/hooks/useCurrentUser";
 import useUserLocale from "~/hooks/useUserLocale";
 import ApiKeyMenu from "~/menus/ApiKeyMenu";
 import { dateToExpiry } from "~/utils/date";

 type Props = {
-  /** The API key to display */
  apiKey: ApiKey;
+  isCopied: boolean;
+  onCopy: (keyId: string) => void;
 };

-const ApiKeyListItem = ({ apiKey }: Props) => {
+const ApiKeyListItem = ({ apiKey, isCopied, onCopy }: Props) => {
  const { t } = useTranslation();
  const userLocale = useUserLocale();
-  const user = useCurrentUser();

  const subtitle = (
    <>
      <Text type="tertiary">
-        {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix />{" "}
-        {apiKey.userId === user.id
-          ? ""
-          : t(`by {{ name }}`, { name: user.name })}{" "}
-        &middot;{" "}
+        {t(`Created`)} <Time dateTime={apiKey.createdAt} addSuffix /> &middot;{" "}
      </Text>
      {apiKey.lastActiveAt && (
        <Text type={"tertiary"}>
@@ -48,19 +41,9 @@ const ApiKeyListItem = ({ apiKey }: Props) => {
    </>
  );

-  const [copied, setCopied] = React.useState<boolean>(false);
-  const copyTimeoutIdRef = React.useRef<ReturnType<typeof setTimeout>>();
-
  const handleCopy = React.useCallback(() => {
-    if (copyTimeoutIdRef.current) {
-      clearTimeout(copyTimeoutIdRef.current);
-    }
-    setCopied(true);
-    copyTimeoutIdRef.current = setTimeout(() => {
-      setCopied(false);
-    }, 3000);
-    toast.message(t("API key copied to clipboard"));
-  }, [t]);
+    onCopy(apiKey.id);
+  }, [apiKey.id, onCopy]);

  return (
    <ListItem
@@ -69,10 +52,10 @@ const ApiKeyListItem = ({ apiKey }: Props) => {
      subtitle={subtitle}
      actions={
        <Flex align="center" gap={8}>
-          {apiKey.value && handleCopy && (
+          {apiKey.value && (
            <CopyToClipboard text={apiKey.value} onCopy={handleCopy}>
              <Button type="button" icon={<CopyIcon />} neutral borderOnHover>
-                {copied ? t("Copied") : t("Copy")}
+                {isCopied ? t("Copied") : t("Copy")}
              </Button>
            </CopyToClipboard>
          )}
@@ -91,4 +74,4 @@ const ApiKeyListItem = ({ apiKey }: Props) => {
  );
 };

-export default observer(ApiKeyListItem);
+export default ApiKeyListItem;
@@ -5,6 +5,7 @@ import { Trans, useTranslation } from "react-i18next";
 import { toast } from "sonner";
 import styled from "styled-components";
 import Button from "~/components/Button";
+import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Input from "~/components/Input";
 import NudeButton from "~/components/NudeButton";
@@ -109,25 +110,29 @@ function DomainManagement({ onSuccess }: Props) {
      <Flex justify="space-between" gap={4} style={{ flexWrap: "wrap" }}>
        {!allowedDomains.length ||
        allowedDomains[allowedDomains.length - 1] !== "" ? (
-          <Button type="button" onClick={handleAddDomain} neutral>
-            {allowedDomains.length ? (
-              <Trans>Add another</Trans>
-            ) : (
-              <Trans>Add a domain</Trans>
-            )}
-          </Button>
+          <Fade>
+            <Button type="button" onClick={handleAddDomain} neutral>
+              {allowedDomains.length ? (
+                <Trans>Add another</Trans>
+              ) : (
+                <Trans>Add a domain</Trans>
+              )}
+            </Button>
+          </Fade>
        ) : (
          <span />
        )}

        {showSaveChanges && (
-          <Button
-            type="button"
-            onClick={handleSaveDomains}
-            disabled={team.isSaving}
-          >
-            <Trans>Save changes</Trans>
-          </Button>
+          <Fade>
+            <Button
+              type="button"
+              onClick={handleSaveDomains}
+              disabled={team.isSaving}
+            >
+              <Trans>Save changes</Trans>
+            </Button>
+          </Fade>
        )}
      </Flex>
    </SettingRow>
@@ -52,7 +52,7 @@ function PeopleTable({ canManage, ...rest }: Props) {
          ),
        },
        {
-          id: "role",
+          id: "isAdmin",
          Header: t("Role"),
          accessor: "rank",
          Cell: observer(({ row }: { row: { original: User } }) => (
@@ -7,19 +7,31 @@ import { CustomTheme } from "@shared/types";
 import Storage from "@shared/utils/Storage";
 import { getCookieDomain, parseDomain } from "@shared/utils/domains";
 import RootStore from "~/stores/RootStore";
+import Policy from "~/models/Policy";
 import Team from "~/models/Team";
+import User from "~/models/User";
 import env from "~/env";
 import { setPostLoginPath } from "~/hooks/useLastVisitedPath";
+import { PartialExcept } from "~/types";
 import { client } from "~/utils/ApiClient";
 import Desktop from "~/utils/Desktop";
 import Logger from "~/utils/Logger";
 import isCloudHosted from "~/utils/isCloudHosted";
 import Store from "./base/Store";

-type PersistedData = Pick<
-  AuthStore,
-  "user" | "team" | "collaborationToken" | "availableTeams" | "policies"
->;
+type PersistedData = {
+  user?: PartialExcept<User, "id">;
+  team?: PartialExcept<Team, "id">;
+  collaborationToken?: string;
+  availableTeams?: {
+    id: string;
+    name: string;
+    avatarUrl: string;
+    url: string;
+    isSignedIn: boolean;
+  }[];
+  policies?: Policy[];
+};

 type Provider = {
  id: string;
@@ -153,10 +165,9 @@ export default class AuthStore extends Store<Team> {
  /** The current team's policies */
  @computed
  get policies() {
-    const policy = this.currentTeamId
-      ? this.rootStore.policies.get(this.currentTeamId)
-      : undefined;
-    return policy ? [policy] : [];
+    return this.currentTeamId
+      ? [this.rootStore.policies.get(this.currentTeamId)]
+      : [];
  }

  /** Whether the user is signed in */
@@ -166,7 +177,7 @@ export default class AuthStore extends Store<Team> {
  }

  @computed
-  get asJson(): PersistedData {
+  get asJson() {
    return {
      user: this.user,
      team: this.team,
@@ -150,6 +150,20 @@ export default class CommentsStore extends Store<Comment> {
    return this.data.get(res.data.id) as Comment;
  };

+  @action
+  setTyping({
+    commentId,
+    userId,
+  }: {
+    commentId: string;
+    userId: string;
+  }): void {
+    const comment = this.get(commentId);
+    if (comment) {
+      comment.typingUsers.set(userId, new Date());
+    }
+  }
+
  @computed
  get orderedData(): Comment[] {
    return orderBy(Array.from(this.data.values()), "createdAt", "asc");
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Tom Moor	a508ec8380	wip	2024-11-16 13:34:04 -05:00
Tom Moor	c7dde8fbd7	wip	2024-11-16 13:30:39 -05:00
Tom Moor	827d4e5ad9	Test using xlarge	2024-11-16 13:27:46 -05:00