chore: Compressed inefficient images automatically

Co-authored-by: tommoor <tommoor@users.noreply.github.com>

.github/dependabot.yml

@@ -26,3 +26,6 @@ updates:
       aws:
         patterns:
           - "@aws-sdk/*"
+      radix-ui:
+        patterns:
+          - "@radix-ui/*"

.github/workflows/ci.yml

@@ -44,7 +44,7 @@ jobs:
           node-version: 22.x
           cache: "yarn"
       - run: yarn install --frozen-lockfile --prefer-offline
-      - run: yarn lint
+      - run: yarn lint --quiet
 
   types:
     needs: build

.jestconfig.json

@@ -7,8 +7,7 @@
       "roots": ["<rootDir>/server", "<rootDir>/plugins"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
       "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "setupFilesAfterEnv": ["<rootDir>/server/test/setup.ts"],
@@ -22,8 +21,7 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
       },
       "modulePaths": ["<rootDir>/app"],
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
@@ -38,8 +36,7 @@
       "roots": ["<rootDir>/shared"],
       "moduleNameMapper": {
         "^@server/(.*)$": "<rootDir>/server/$1",
-        "^@shared/(.*)$": "<rootDir>/shared/$1",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^@shared/(.*)$": "<rootDir>/shared/$1"
       },
       "setupFiles": ["<rootDir>/__mocks__/console.js"],
       "setupFilesAfterEnv": ["<rootDir>/shared/test/setup.ts"],
@@ -52,8 +49,7 @@
         "^~/(.*)$": "<rootDir>/app/$1",
         "^@shared/(.*)$": "<rootDir>/shared/$1",
         "^.*[.](gif|ttf|eot|svg)$": "<rootDir>/__test__/fileMock.js",
-        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js",
-        "react-medium-image-zoom": "<rootDir>/__mocks__/react-medium-image-zoom.js"
+        "^uuid$": "<rootDir>/node_modules/uuid/dist/index.js"
       },
       "setupFiles": ["<rootDir>/__mocks__/window.js"],
       "testEnvironment": "jsdom",

LICENSE

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

app/actions/definitions/comments.tsx

@@ -3,7 +3,6 @@ import { toast } from "sonner";
 import Comment from "~/models/Comment";
 import CommentDeleteDialog from "~/components/CommentDeleteDialog";
 import ViewReactionsDialog from "~/components/Reactions/ViewReactionsDialog";
-import history from "~/utils/history";
 import { createActionV2 } from "..";
 import { ActiveDocumentSection } from "../sections";
 
@@ -50,16 +49,6 @@ export const resolveCommentFactory = ({
       stores.policies.abilities(comment.documentId).update,
     perform: async ({ t }) => {
       await comment.resolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
       onResolve();
       toast.success(t("Thread resolved"));
     },
@@ -82,16 +71,6 @@ export const unresolveCommentFactory = ({
       stores.policies.abilities(comment.documentId).update,
     perform: async () => {
       await comment.unresolve();
-
-      const locationState = history.location.state as Record<string, unknown>;
-      history.replace({
-        ...history.location,
-        state: {
-          sidebarContext: locationState["sidebarContext"],
-          commentId: undefined,
-        },
-      });
-
       onUnresolve();
     },
   });

app/components/DocumentContext.tsx

@@ -11,9 +11,15 @@ class DocumentContext {
   /** The editor instance for this document */
   editor?: Editor;
 
+  /** The ID of the currently focused comment, or null if no comment is focused */
+  @observable
+  focusedCommentId: string | null = null;
+
+  /** Whether the editor has been initialized */
   @observable
   isEditorInitialized: boolean = false;
 
+  /** The headings in the document */
   @observable
   headings: Heading[] = [];
 
@@ -39,6 +45,11 @@ class DocumentContext {
     this.isEditorInitialized = initialized;
   };
 
+  @action
+  setFocusedCommentId = (commentId: string | null) => {
+    this.focusedCommentId = commentId;
+  };
+
   @action
   updateState = () => {
     this.updateHeadings();

app/components/DocumentListItem.tsx

@@ -25,6 +25,10 @@ import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import DocumentMenu from "~/menus/DocumentMenu";
 import { documentPath } from "~/utils/routeHelpers";
 import { determineSidebarContext } from "./Sidebar/components/SidebarContext";
+import useActionContext from "~/hooks/useActionContext";
+import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
+import { ContextMenu } from "./Menu/ContextMenu";
+import useStores from "~/hooks/useStores";
 
 type Props = {
   document: Document;
@@ -50,6 +54,7 @@ function DocumentListItem(
 ) {
   const { t } = useTranslation();
   const user = useCurrentUser();
+  const { userMemberships, groupMemberships } = useStores();
   const locationSidebarContext = useLocationSidebarContext();
   const [menuOpen, handleMenuOpen, handleMenuClose] = useBoolean();
 
@@ -78,87 +83,109 @@ function DocumentListItem(
     !!document.title.toLowerCase().includes(highlight.toLowerCase());
   const canStar = !document.isArchived && !document.isTemplate;
 
+  const isShared = !!(
+    userMemberships.getByDocumentId(document.id) ||
+    groupMemberships.getByDocumentId(document.id)
+  );
+
   const sidebarContext = determineSidebarContext({
     document,
     user,
     currentContext: locationSidebarContext,
   });
 
-  return (
-    <DocumentLink
-      ref={itemRef}
-      dir={document.dir}
-      role="menuitem"
-      $isStarred={document.isStarred}
-      $menuOpen={menuOpen}
-      to={{
-        pathname: documentPath(document),
-        state: {
-          title: document.titleWithDefault,
-          sidebarContext,
-        },
-      }}
-      {...rest}
-      {...rovingTabIndex}
-    >
-      <Content>
-        <Heading dir={document.dir}>
-          {document.icon && (
-            <>
-              <Icon
-                value={document.icon}
-                color={document.color ?? undefined}
-                initial={document.initial}
-              />
-              &nbsp;
-            </>
-          )}
-          <Title
-            text={document.titleWithDefault}
-            highlight={highlight}
-            dir={document.dir}
-          />
-          {document.isBadgedNew && document.createdBy?.id !== user.id && (
-            <Badge yellow>{t("New")}</Badge>
-          )}
-          {document.isDraft && showDraft && (
-            <Tooltip content={t("Only visible to you")} placement="top">
-              <Badge>{t("Draft")}</Badge>
-            </Tooltip>
-          )}
-          {canStar && (
-            <StarPositioner>
-              <StarButton document={document} />
-            </StarPositioner>
-          )}
-          {document.isTemplate && showTemplate && (
-            <Badge primary>{t("Template")}</Badge>
-          )}
-        </Heading>
+  const actionContext = useActionContext({
+    isContextMenu: true,
+    activeDocumentId: document.id,
+    activeCollectionId:
+      !isShared && document.collectionId ? document.collectionId : undefined,
+  });
 
-        {!queryIsInTitle && (
-          <ResultContext
-            text={context}
-            highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
-            processResult={replaceResultMarks}
+  const contextMenuAction = useDocumentMenuAction({ document });
+
+  return (
+    <ContextMenu
+      action={contextMenuAction}
+      context={actionContext}
+      ariaLabel={t("Document options")}
+      onOpen={handleMenuOpen}
+      onClose={handleMenuClose}
+    >
+      <DocumentLink
+        ref={itemRef}
+        dir={document.dir}
+        role="menuitem"
+        $isStarred={document.isStarred}
+        $menuOpen={menuOpen}
+        to={{
+          pathname: documentPath(document),
+          state: {
+            title: document.titleWithDefault,
+            sidebarContext,
+          },
+        }}
+        {...rest}
+        {...rovingTabIndex}
+      >
+        <Content>
+          <Heading dir={document.dir}>
+            {document.icon && (
+              <>
+                <Icon
+                  value={document.icon}
+                  color={document.color ?? undefined}
+                  initial={document.initial}
+                />
+                &nbsp;
+              </>
+            )}
+            <Title
+              text={document.titleWithDefault}
+              highlight={highlight}
+              dir={document.dir}
+            />
+            {document.isBadgedNew && document.createdBy?.id !== user.id && (
+              <Badge yellow>{t("New")}</Badge>
+            )}
+            {document.isDraft && showDraft && (
+              <Tooltip content={t("Only visible to you")} placement="top">
+                <Badge>{t("Draft")}</Badge>
+              </Tooltip>
+            )}
+            {canStar && (
+              <StarPositioner>
+                <StarButton document={document} />
+              </StarPositioner>
+            )}
+            {document.isTemplate && showTemplate && (
+              <Badge primary>{t("Template")}</Badge>
+            )}
+          </Heading>
+
+          {!queryIsInTitle && (
+            <ResultContext
+              text={context}
+              highlight={highlight ? SEARCH_RESULT_REGEX : undefined}
+              processResult={replaceResultMarks}
+            />
+          )}
+          <DocumentMeta
+            document={document}
+            showCollection={showCollection}
+            showPublished={showPublished}
+            showParentDocuments={showParentDocuments}
+            showLastViewed
           />
-        )}
-        <DocumentMeta
-          document={document}
-          showCollection={showCollection}
-          showPublished={showPublished}
-          showParentDocuments={showParentDocuments}
-          showLastViewed
-        />
-      </Content>
-      <Actions>
-        <DocumentMenu
-          document={document}
-          onOpen={handleMenuOpen}
-          onClose={handleMenuClose}
-        />
-      </Actions>
-    </DocumentLink>
+        </Content>
+        <Actions>
+          <DocumentMenu
+            document={document}
+            onOpen={handleMenuOpen}
+            onClose={handleMenuClose}
+          />
+        </Actions>
+      </DocumentLink>
+    </ContextMenu>
   );
 }
 

app/components/Lightbox.tsx

@@ -0,0 +1,840 @@
+import { useEditor } from "~/editor/components/EditorContext";
+import { observer } from "mobx-react";
+import * as Dialog from "@radix-ui/react-dialog";
+import { findChildren } from "@shared/editor/queries/findChildren";
+import findIndex from "lodash/findIndex";
+import styled, { css, Keyframes, keyframes } from "styled-components";
+import { forwardRef, useEffect, useMemo, useRef, useState } from "react";
+import { sanitizeUrl } from "@shared/utils/urls";
+import { Error } from "@shared/editor/components/Image";
+import {
+  BackIcon,
+  CloseIcon,
+  CrossIcon,
+  DownloadIcon,
+  NextIcon,
+} from "outline-icons";
+import { depths, extraArea, s } from "@shared/styles";
+import NudeButton from "./NudeButton";
+import useIdle from "~/hooks/useIdle";
+import { Second } from "@shared/utils/time";
+import { downloadImageNode } from "@shared/editor/nodes/Image";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { useTranslation } from "react-i18next";
+import Tooltip from "~/components/Tooltip";
+import LoadingIndicator from "./LoadingIndicator";
+import Fade from "./Fade";
+import Button from "./Button";
+
+export enum LightboxStatus {
+  READY_TO_OPEN,
+  OPENING,
+  OPENED,
+  READY_TO_CLOSE,
+  CLOSING,
+  CLOSED,
+}
+
+export enum ImageStatus {
+  LOADING,
+  ERROR,
+  LOADED,
+}
+type Status = {
+  lightbox: LightboxStatus | null;
+  image: ImageStatus | null;
+};
+
+type Animation = {
+  fadeIn?: { apply: () => Keyframes; duration: number };
+  fadeOut?: { apply: () => Keyframes; duration: number };
+  zoomIn?: { apply: () => Keyframes; duration: number };
+  zoomOut?: { apply: () => Keyframes; duration: number };
+  startTime?: number;
+};
+
+const ANIMATION_DURATION = 0.3 * Second.ms;
+
+type Props = {
+  /** Callback triggered when the active image position is updated */
+  onUpdate: (pos: number | null) => void;
+  /** The position of the currently active image in the document */
+  activePos: number | null;
+};
+
+function Lightbox({ onUpdate, activePos }: Props) {
+  const { view } = useEditor();
+  const isIdle = useIdle(3 * Second.ms);
+  const { t } = useTranslation();
+  const imgRef = useRef<HTMLImageElement | null>(null);
+  const overlayRef = useRef<HTMLDivElement | null>(null);
+  const [status, setStatus] = useState<Status>({ lightbox: null, image: null });
+  const [imageElements] = useState(
+    view?.dom.querySelectorAll(".component-image img")
+  );
+  const animation = useRef<Animation | null>(null);
+  const finalImage = useRef<{
+    center: { x: number; y: number };
+    width: number;
+    height: number;
+  } | null>(null);
+
+  const imageNodes = useMemo(
+    () =>
+      view
+        ? findChildren(
+            view.state.doc,
+            (child) => child.type === view.state.schema.nodes.image,
+            true
+          )
+        : [],
+    [view]
+  );
+  const currentImageIndex = findIndex(
+    imageNodes,
+    (node) => node.pos === activePos
+  );
+  const currentImageNode =
+    currentImageIndex >= 0 ? imageNodes[currentImageIndex].node : undefined;
+
+  // Debugging status changes
+  // useEffect(() => {
+  //   console.log(
+  //     `lstat:${status.lightbox === null ? status.lightbox : LightboxStatus[status.lightbox]}, istat:${status.image === null ? status.image : ImageStatus[status.image]}`
+  //   );
+  // }, [status]);
+
+  useEffect(() => () => view.focus(), []);
+
+  useEffect(() => {
+    !!activePos &&
+      setStatus({
+        lightbox: LightboxStatus.READY_TO_OPEN,
+        image: status.image,
+      });
+  }, [!!activePos]);
+
+  useEffect(() => {
+    if (status.image === ImageStatus.LOADED) {
+      rememberImagePosition();
+    }
+  }, [status.image]);
+
+  useEffect(() => {
+    if (
+      (status.image === ImageStatus.ERROR ||
+        status.image === ImageStatus.LOADED) &&
+      status.lightbox === LightboxStatus.READY_TO_OPEN
+    ) {
+      setupFadeIn();
+      setupZoomIn();
+      setStatus({
+        lightbox: LightboxStatus.OPENING,
+        image: status.image,
+      });
+    }
+  }, [status.image, status.lightbox]);
+
+  useEffect(() => {
+    if (status.lightbox === LightboxStatus.READY_TO_CLOSE) {
+      setupFadeOut();
+      setupZoomOut();
+      setStatus({
+        lightbox: LightboxStatus.CLOSING,
+        image: status.image,
+      });
+    }
+  }, [status.lightbox]);
+
+  useEffect(() => {
+    if (status.lightbox === LightboxStatus.CLOSED) {
+      onUpdate(null);
+    }
+  }, [status.lightbox]);
+
+  const rememberImagePosition = () => {
+    if (imgRef.current) {
+      const lightboxImgDOMRect = imgRef.current.getBoundingClientRect();
+      const {
+        top: lightboxImgTop,
+        left: lightboxImgLeft,
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      } = lightboxImgDOMRect;
+      finalImage.current = {
+        center: {
+          x: lightboxImgLeft + lightboxImgWidth / 2,
+          y: lightboxImgTop + lightboxImgHeight / 2,
+        },
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      };
+    }
+  };
+
+  const setupZoomIn = () => {
+    if (imgRef.current) {
+      // in editor
+      const editorImageEl = imageElements[currentImageIndex];
+      if (!editorImageEl) {
+        return;
+      }
+
+      const editorImgDOMRect = editorImageEl.getBoundingClientRect();
+      const {
+        top: editorImgTop,
+        left: editorImgLeft,
+        width: editorImgWidth,
+        height: editorImgHeight,
+      } = editorImgDOMRect;
+
+      const from = {
+        center: {
+          x: editorImgLeft + editorImgWidth / 2,
+          y: editorImgTop + editorImgHeight / 2,
+        },
+        width: editorImgWidth,
+        height: editorImgHeight,
+      };
+
+      // in lightbox
+      const lightboxImgDOMRect = imgRef.current.getBoundingClientRect();
+      const {
+        top: lightboxImgTop,
+        left: lightboxImgLeft,
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      } = lightboxImgDOMRect;
+      const to = {
+        center: {
+          x: lightboxImgLeft + lightboxImgWidth / 2,
+          y: lightboxImgTop + lightboxImgHeight / 2,
+        },
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      };
+
+      const zoomIn = () => {
+        const tx = from.center.x - to.center.x;
+        const ty = from.center.y - to.center.y;
+        return keyframes`
+            from {
+              translate: ${tx}px ${ty}px;
+              scale: ${from.width / to.width};
+            }
+            to {
+              translate: 0;
+              scale: 1;
+            }
+        `;
+      };
+      animation.current = {
+        ...(animation.current ?? {}),
+        zoomOut: undefined,
+        zoomIn: { apply: zoomIn, duration: ANIMATION_DURATION },
+      };
+    }
+  };
+
+  const setupFadeIn = () => {
+    const fadeIn = () => keyframes`
+                    from { opacity: 0; }
+                    to { opacity: 1; }
+                    `;
+    animation.current = {
+      ...(animation.current ?? {}),
+      fadeIn: { apply: fadeIn, duration: ANIMATION_DURATION },
+      fadeOut: undefined,
+    };
+  };
+
+  const setupFadeOut = () => {
+    const fadeOut = () => keyframes`
+              from { opacity: ${overlayRef.current ? window.getComputedStyle(overlayRef.current).opacity : 1}; }
+              to { opacity: 0; }
+              `;
+    animation.current = {
+      ...(animation.current ?? {}),
+      fadeIn: undefined,
+      fadeOut: {
+        apply: fadeOut,
+        duration: animation.current?.startTime
+          ? Date.now() - animation.current.startTime
+          : ANIMATION_DURATION,
+      },
+    };
+  };
+
+  const setupZoomOut = () => {
+    if (imgRef.current) {
+      // in lightbox
+      const lightboxImgDOMRect = imgRef.current.getBoundingClientRect();
+      const {
+        top: lightboxImgTop,
+        left: lightboxImgLeft,
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      } = lightboxImgDOMRect;
+      const from = {
+        center: {
+          x: lightboxImgLeft + lightboxImgWidth / 2,
+          y: lightboxImgTop + lightboxImgHeight / 2,
+        },
+        width: lightboxImgWidth,
+        height: lightboxImgHeight,
+      };
+
+      // in editor
+      const editorImageEl = imageElements[currentImageIndex];
+      let to;
+      if (editorImageEl) {
+        const editorImgDOMRect = editorImageEl.getBoundingClientRect();
+        const {
+          top: editorImgTop,
+          left: editorImgLeft,
+          width: editorImgWidth,
+          height: editorImgHeight,
+        } = editorImgDOMRect;
+
+        to = {
+          center: {
+            x: editorImgLeft + editorImgWidth / 2,
+            y:
+              editorImgTop + editorImgHeight / 2 >
+              window.innerHeight + editorImgHeight / 2
+                ? window.innerHeight + editorImgHeight / 2
+                : editorImgTop + editorImgHeight / 2 < -editorImgHeight / 2
+                  ? -editorImgHeight / 2
+                  : editorImgTop + editorImgHeight / 2,
+          },
+          width: editorImgWidth,
+          height: editorImgHeight,
+        };
+      } else {
+        to = {
+          center: {
+            x: from.center.x,
+            y: window.innerHeight + lightboxImgHeight / 2,
+          },
+          width: lightboxImgWidth,
+          height: lightboxImgHeight,
+        };
+      }
+
+      const zoomOut = () => {
+        const final = finalImage.current;
+        if (!final) {
+          return keyframes``;
+        }
+
+        const fromTx = from.center.x - final.center.x;
+        const fromTy = from.center.y - final.center.y;
+        const toTx = to.center.x - final.center.x;
+        const toTy = to.center.y - final.center.y;
+
+        const fromSx = from.width / final.width;
+        const fromSy = from.height / final.height;
+        const toSx = to.width / final.width;
+        const toSy = to.height / final.height;
+        return keyframes`
+            from {
+              translate: ${fromTx}px ${fromTy}px;
+              scale: ${fromSx} ${fromSy};
+            }
+            to {
+              translate: ${toTx}px ${toTy}px;
+              scale: ${toSx} ${toSy};
+            }
+        `;
+      };
+      animation.current = {
+        ...(animation.current ?? {}),
+        zoomIn: undefined,
+        zoomOut: {
+          apply: zoomOut,
+          duration: animation.current?.startTime
+            ? Date.now() - animation.current.startTime
+            : ANIMATION_DURATION,
+        },
+      };
+    }
+  };
+
+  if (!activePos) {
+    return null;
+  }
+
+  const prev = () => {
+    if (status.lightbox === LightboxStatus.OPENED) {
+      if (!activePos) {
+        return;
+      }
+      const prevIndex = currentImageIndex - 1;
+      if (prevIndex < 0) {
+        return;
+      }
+      onUpdate(imageNodes[prevIndex].pos);
+    }
+  };
+
+  const next = () => {
+    if (status.lightbox === LightboxStatus.OPENED) {
+      if (!activePos) {
+        return;
+      }
+      const nextIndex = currentImageIndex + 1;
+      if (nextIndex >= imageNodes.length) {
+        return;
+      }
+      onUpdate(imageNodes[nextIndex].pos);
+    }
+  };
+
+  const close = () => {
+    if (
+      status.lightbox === LightboxStatus.OPENING ||
+      status.lightbox === LightboxStatus.OPENED
+    ) {
+      setStatus({
+        lightbox: LightboxStatus.READY_TO_CLOSE,
+        image: status.image,
+      });
+    }
+  };
+
+  const download = () => {
+    if (currentImageNode && status.lightbox === LightboxStatus.OPENED) {
+      void downloadImageNode(currentImageNode);
+    }
+  };
+
+  const handleKeyDown = (ev: React.KeyboardEvent<HTMLDivElement>) => {
+    ev.preventDefault();
+    switch (ev.key) {
+      case "ArrowLeft": {
+        prev();
+        break;
+      }
+      case "ArrowRight": {
+        next();
+        break;
+      }
+      case "Escape": {
+        close();
+        break;
+      }
+    }
+  };
+
+  const handleFadeStart = () => {
+    if (animation.current?.fadeIn) {
+      animation.current = {
+        ...(animation.current ?? {}),
+        startTime: Date.now(),
+      };
+    }
+  };
+
+  const handleFadeEnd = () => {
+    if (animation.current?.fadeIn) {
+      animation.current = {
+        ...(animation.current ?? {}),
+        startTime: undefined,
+      };
+      setStatus({
+        lightbox: LightboxStatus.OPENED,
+        image: status.image,
+      });
+    } else if (animation.current?.fadeOut) {
+      setStatus({
+        lightbox: LightboxStatus.CLOSED,
+        image: null,
+      });
+    }
+  };
+
+  if (!currentImageNode) {
+    return null;
+  }
+
+  return (
+    <Dialog.Root open={!!activePos}>
+      <Dialog.Portal>
+        <StyledOverlay
+          ref={overlayRef}
+          animation={animation.current}
+          onAnimationStart={handleFadeStart}
+          onAnimationEnd={handleFadeEnd}
+        />
+        <StyledContent onKeyDown={handleKeyDown}>
+          <VisuallyHidden.Root>
+            <Dialog.Title>{t("Lightbox")}</Dialog.Title>
+            <Dialog.Description>
+              {t("View, navigate, or download images in the document")}
+            </Dialog.Description>
+          </VisuallyHidden.Root>
+          <Actions animation={animation.current}>
+            <Tooltip content={t("Download")} placement="bottom">
+              <Button
+                tabIndex={-1}
+                onClick={download}
+                aria-label={t("Download")}
+                size={32}
+                icon={<DownloadIcon />}
+                borderOnHover
+                neutral
+              />
+            </Tooltip>
+            <Dialog.Close asChild>
+              <Tooltip content={t("Close")} shortcut="Esc" placement="bottom">
+                <Button
+                  tabIndex={-1}
+                  onClick={close}
+                  aria-label={t("Close")}
+                  size={32}
+                  icon={<CloseIcon />}
+                  borderOnHover
+                  neutral
+                />
+              </Tooltip>
+            </Dialog.Close>
+          </Actions>
+          {currentImageIndex > 0 && (
+            <Nav dir="left" $hidden={isIdle} animation={animation.current}>
+              <NavButton onClick={prev} size={32} aria-label={t("Previous")}>
+                <BackIcon size={32} />
+              </NavButton>
+            </Nav>
+          )}
+          <Image
+            ref={imgRef}
+            src={sanitizeUrl(currentImageNode.attrs.src) ?? ""}
+            alt={currentImageNode.attrs.alt ?? ""}
+            onLoading={() =>
+              setStatus({
+                lightbox: status.lightbox,
+                image: ImageStatus.LOADING,
+              })
+            }
+            onLoad={() =>
+              setStatus({
+                lightbox: status.lightbox,
+                image: ImageStatus.LOADED,
+              })
+            }
+            onError={() =>
+              setStatus({
+                lightbox: status.lightbox,
+                image: ImageStatus.ERROR,
+              })
+            }
+            onSwipeRight={prev}
+            onSwipeLeft={next}
+            onSwipeUpOrDown={close}
+            status={status}
+            animation={animation.current}
+          />
+          {currentImageIndex < imageNodes.length - 1 && (
+            <Nav dir="right" $hidden={isIdle} animation={animation.current}>
+              <NavButton onClick={next} size={32} aria-label={t("Next")}>
+                <NextIcon size={32} />
+              </NavButton>
+            </Nav>
+          )}
+        </StyledContent>
+      </Dialog.Portal>
+    </Dialog.Root>
+  );
+}
+
+type ImageProps = {
+  src: string;
+  alt: string;
+  onLoading: () => void;
+  onLoad: () => void;
+  onError: () => void;
+  onSwipeRight: () => void;
+  onSwipeLeft: () => void;
+  onSwipeUpOrDown: () => void;
+  status: Status;
+  animation: Animation | null;
+};
+
+const Image = forwardRef<HTMLImageElement, ImageProps>(function _Image(
+  {
+    src,
+    alt,
+    onLoading,
+    onLoad,
+    onError,
+    onSwipeRight,
+    onSwipeLeft,
+    onSwipeUpOrDown,
+    status,
+    animation,
+  }: ImageProps,
+  ref
+) {
+  const { t } = useTranslation();
+  const touchXStart = useRef<number>();
+  const touchXEnd = useRef<number>();
+  const touchYStart = useRef<number>();
+  const touchYEnd = useRef<number>();
+
+  const handleTouchStart = (e: React.TouchEvent<HTMLImageElement>) => {
+    touchXStart.current = e.changedTouches[0].screenX;
+    touchYStart.current = e.changedTouches[0].screenY;
+  };
+
+  const handleTouchMove = (e: React.TouchEvent<HTMLImageElement>) => {
+    touchXEnd.current = e.changedTouches[0].screenX;
+    touchYEnd.current = e.changedTouches[0].screenY;
+    const dx = touchXEnd.current - (touchXStart.current ?? 0);
+    const dy = touchYEnd.current - (touchYStart.current ?? 0);
+
+    const swipeRight = dx > 0 && Math.abs(dy) < Math.abs(dx);
+    if (swipeRight) {
+      return onSwipeRight();
+    }
+
+    const swipeLeft = dx < 0 && Math.abs(dy) < Math.abs(dx);
+    if (swipeLeft) {
+      return onSwipeLeft();
+    }
+
+    const swipeDown = dy > 0 && Math.abs(dy) > Math.abs(dx);
+    const swipeUp = dy < 0 && Math.abs(dy) > Math.abs(dx);
+    if (swipeUp || swipeDown) {
+      return onSwipeUpOrDown();
+    }
+  };
+
+  const handleTouchEnd = () => {
+    touchXStart.current = undefined;
+    touchXEnd.current = undefined;
+    touchYStart.current = undefined;
+    touchYEnd.current = undefined;
+  };
+
+  const handleTouchCancel = () => {
+    touchXStart.current = undefined;
+    touchXEnd.current = undefined;
+    touchYStart.current = undefined;
+    touchYEnd.current = undefined;
+  };
+
+  const [hidden, setHidden] = useState(
+    status.image === null || status.image === ImageStatus.LOADING
+  );
+
+  useEffect(() => {
+    onLoading();
+  }, [src]);
+
+  useEffect(() => {
+    if (status.image === null || status.image === ImageStatus.LOADING) {
+      setHidden(true);
+    } else if (status.image === ImageStatus.LOADED) {
+      setHidden(false);
+    }
+  }, [status.image]);
+
+  return status.image === ImageStatus.ERROR ? (
+    <StyledError animation={animation}>
+      <CrossIcon size={16} /> {t("Image failed to load")}
+    </StyledError>
+  ) : (
+    <>
+      {status.image === ImageStatus.LOADING && <LoadingIndicator />}
+      <Figure>
+        <StyledImg
+          ref={ref}
+          src={src}
+          alt={alt}
+          animation={animation}
+          onAnimationStart={() => setHidden(false)}
+          onTouchStart={handleTouchStart}
+          onTouchMove={handleTouchMove}
+          onTouchEnd={handleTouchEnd}
+          onTouchCancel={handleTouchCancel}
+          onError={onError}
+          onLoad={onLoad}
+          $hidden={hidden}
+        />
+        <Caption>
+          {status.image === ImageStatus.LOADED &&
+          status.lightbox === LightboxStatus.OPENED ? (
+            <Fade>{alt}</Fade>
+          ) : null}
+        </Caption>
+      </Figure>
+    </>
+  );
+});
+
+const Figure = styled("figure")`
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+`;
+
+const Caption = styled("figcaption")`
+  font-size: 14px;
+  min-height: 1.5em;
+  font-weight: normal;
+  margin-top: 8px;
+  color: ${s("textSecondary")};
+  flex-shrink: 0;
+`;
+
+const StyledOverlay = styled(Dialog.Overlay)<{
+  animation: Animation | null;
+}>`
+  position: fixed;
+  inset: 0;
+  background-color: ${s("background")};
+  z-index: ${depths.overlay};
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const StyledImg = styled.img<{
+  $hidden: boolean;
+  animation: Animation | null;
+}>`
+  visibility: ${(props) => (props.$hidden ? "hidden" : "visible")};
+  max-width: 100%;
+  min-height: 0;
+  object-fit: contain;
+  ${(props) =>
+    props.animation?.zoomIn
+      ? css`
+          animation: ${props.animation.zoomIn.apply()}
+            ${props.animation.zoomIn.duration}ms;
+        `
+      : props.animation?.zoomOut
+        ? css`
+            animation: ${props.animation.zoomOut.apply()}
+              ${props.animation.zoomOut.duration}ms;
+          `
+        : ""}
+`;
+
+const StyledContent = styled(Dialog.Content)`
+  position: fixed;
+  inset: 0;
+  z-index: ${depths.modal};
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  outline: none;
+  padding: 56px;
+`;
+
+const Actions = styled.div<{
+  animation: Animation | null;
+}>`
+  position: absolute;
+  top: 0;
+  right: 0;
+  margin: 16px 12px;
+  display: flex;
+  gap: 4px;
+
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const Nav = styled.div<{
+  $hidden: boolean;
+  dir: "left" | "right";
+  animation: Animation | null;
+}>`
+  position: absolute;
+  ${(props) => (props.dir === "left" ? "left: 0;" : "right: 0;")}
+  transition: opacity 500ms ease-in-out;
+  ${(props) => props.$hidden && "opacity: 0;"}
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const StyledError = styled(Error)<{
+  animation: Animation | null;
+}>`
+  ${(props) =>
+    props.animation === null
+      ? css`
+          opacity: 0;
+        `
+      : props.animation.fadeIn
+        ? css`
+            animation: ${props.animation.fadeIn.apply()}
+              ${props.animation.fadeIn.duration}ms;
+          `
+        : props.animation.fadeOut
+          ? css`
+              animation: ${props.animation.fadeOut.apply()}
+                ${props.animation.fadeOut.duration}ms;
+            `
+          : ""}
+`;
+
+const NavButton = styled(NudeButton)`
+  margin: 16px;
+  opacity: 0.75;
+  color: ${s("text")};
+  outline: none;
+  ${extraArea(12)}
+
+  &:hover {
+    opacity: 1;
+  }
+`;
+
+export default observer(Lightbox);

app/components/Menu/ContextMenu.tsx

@@ -0,0 +1,98 @@
+import * as React from "react";
+import { actionV2ToMenuItem } from "~/actions";
+import useActionContext from "~/hooks/useActionContext";
+import useMobile from "~/hooks/useMobile";
+import { ActionContext, ActionV2Variant, ActionV2WithChildren } from "~/types";
+import { toMenuItems } from "./transformer";
+import { observer } from "mobx-react";
+import { useComputed } from "~/hooks/useComputed";
+import { Menu, MenuContent, MenuTrigger } from "~/components/primitives/Menu";
+import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
+
+type Props = {
+  /** Root action with children representing the menu items */
+  action: ActionV2WithChildren;
+  /** Action context to use - new context will be created if not provided */
+  context?: ActionContext;
+  /** Trigger for the menu */
+  children: React.ReactNode;
+  /** ARIA label for the menu */
+  ariaLabel: string;
+  /** Callback when menu is opened */
+  onOpen?: () => void;
+  /** Callback when menu is closed */
+  onClose?: () => void;
+};
+
+export const ContextMenu = observer(
+  ({ action, children, ariaLabel, context, onOpen, onClose }: Props) => {
+    const isMobile = useMobile();
+    const contentRef = React.useRef<React.ElementRef<typeof MenuContent>>(null);
+
+    const actionContext =
+      context ??
+      useActionContext({
+        isContextMenu: true,
+      });
+
+    const menuItems = useComputed(() => {
+      if (!open) {
+        return [];
+      }
+
+      return (action.children as ActionV2Variant[]).map((childAction) =>
+        actionV2ToMenuItem(childAction, actionContext)
+      );
+    }, [open, action.children, actionContext]);
+
+    const handleOpenChange = React.useCallback(
+      (open: boolean) => {
+        if (open) {
+          onOpen?.();
+        } else {
+          onClose?.();
+        }
+      },
+      [onOpen, onClose]
+    );
+
+    const enablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "auto";
+      }
+    }, []);
+
+    const disablePointerEvents = React.useCallback(() => {
+      if (contentRef.current) {
+        contentRef.current.style.pointerEvents = "none";
+      }
+    }, []);
+
+    const handleCloseAutoFocus = React.useCallback(
+      (e: Event) => e.preventDefault(),
+      []
+    );
+
+    if (isMobile) {
+      return <>{children}</>;
+    }
+
+    const content = toMenuItems(menuItems);
+
+    return (
+      <MenuProvider variant={"context"}>
+        <Menu onOpenChange={handleOpenChange}>
+          <MenuTrigger aria-label={ariaLabel}>{children}</MenuTrigger>
+          <MenuContent
+            aria-label={ariaLabel}
+            onAnimationStart={disablePointerEvents}
+            onAnimationEnd={enablePointerEvents}
+            onCloseAutoFocus={handleCloseAutoFocus}
+          >
+            {content}
+          </MenuContent>
+        </Menu>
+      </MenuProvider>
+    );
+  }
+);

app/components/Menu/DropdownMenu.tsx

@@ -8,11 +8,8 @@ import {
   DrawerTitle,
   DrawerTrigger,
 } from "~/components/primitives/Drawer";
-import {
-  DropdownMenu as DropdownMenuRoot,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-} from "~/components/primitives/DropdownMenu";
+import { Menu, MenuContent, MenuTrigger } from "~/components/primitives/Menu";
+import { MenuProvider } from "~/components/primitives/Menu/MenuContext";
 import { actionV2ToMenuItem } from "~/actions";
 import useActionContext from "~/hooks/useActionContext";
 import useMobile from "~/hooks/useMobile";
@@ -23,7 +20,7 @@ import {
   MenuItem,
   MenuItemWithChildren,
 } from "~/types";
-import { toDropdownMenuItems, toMobileMenuItems } from "./transformer";
+import { toMenuItems, toMobileMenuItems } from "./transformer";
 import { observer } from "mobx-react";
 import { useComputed } from "~/hooks/useComputed";
 
@@ -66,7 +63,7 @@ export const DropdownMenu = observer(
       const [open, setOpen] = React.useState(false);
       const isMobile = useMobile();
       const contentRef =
-        React.useRef<React.ElementRef<typeof DropdownMenuContent>>(null);
+        React.useRef<React.ElementRef<typeof MenuContent>>(null);
 
       const actionContext =
         context ??
@@ -126,24 +123,26 @@ export const DropdownMenu = observer(
         );
       }
 
-      const content = toDropdownMenuItems(menuItems);
+      const content = toMenuItems(menuItems);
 
       return (
-        <DropdownMenuRoot open={open} onOpenChange={handleOpenChange}>
-          <DropdownMenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
-            {children}
-          </DropdownMenuTrigger>
-          <DropdownMenuContent
-            align={align}
-            aria-label={ariaLabel}
-            onAnimationStart={disablePointerEvents}
-            onAnimationEnd={enablePointerEvents}
-            onCloseAutoFocus={handleCloseAutoFocus}
-          >
-            {content}
-            {append}
-          </DropdownMenuContent>
-        </DropdownMenuRoot>
+        <MenuProvider variant={"dropdown"}>
+          <Menu open={open} onOpenChange={handleOpenChange}>
+            <MenuTrigger ref={ref} aria-label={ariaLabel} {...rest}>
+              {children}
+            </MenuTrigger>
+            <MenuContent
+              align={align}
+              aria-label={ariaLabel}
+              onAnimationStart={disablePointerEvents}
+              onAnimationEnd={enablePointerEvents}
+              onCloseAutoFocus={handleCloseAutoFocus}
+            >
+              {content}
+              {append}
+            </MenuContent>
+          </Menu>
+        </MenuProvider>
       );
     }
   )

app/components/Menu/transformer.tsx

@@ -1,28 +1,18 @@
 import { CheckmarkIcon } from "outline-icons";
-import {
-  DropdownMenuButton,
-  DropdownMenuExternalLink,
-  DropdownMenuGroup,
-  DropdownMenuInternalLink,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownSubMenu,
-  DropdownSubMenuContent,
-  DropdownSubMenuTrigger,
-} from "~/components/primitives/DropdownMenu";
 import {
   MenuButton,
-  MenuIconWrapper,
   MenuInternalLink,
   MenuExternalLink,
-  MenuLabel,
   MenuSeparator,
-  MenuDisclosure,
-  SelectedIconWrapper,
-} from "~/components/primitives/components/Menu";
+  SubMenu,
+  SubMenuTrigger,
+  SubMenuContent,
+  MenuGroup,
+} from "~/components/primitives/Menu";
+import * as Components from "~/components/primitives/components/Menu";
 import { MenuItem } from "~/types";
 
-export function toDropdownMenuItems(items: MenuItem[]) {
+export function toMenuItems(items: MenuItem[]) {
   const filteredItems = filterMenuItems(items);
 
   if (!filteredItems.length) {
@@ -39,15 +29,15 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
   return filteredItems.map((item, index) => {
     const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
+      <Components.MenuIconWrapper aria-hidden>
         {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
+      </Components.MenuIconWrapper>
     ) : undefined;
 
     switch (item.type) {
       case "button":
         return (
-          <DropdownMenuButton
+          <MenuButton
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -61,7 +51,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
       case "route":
         return (
-          <DropdownMenuInternalLink
+          <MenuInternalLink
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -72,7 +62,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
 
       case "link":
         return (
-          <DropdownMenuExternalLink
+          <MenuExternalLink
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             icon={icon}
@@ -85,33 +75,33 @@ export function toDropdownMenuItems(items: MenuItem[]) {
         );
 
       case "submenu": {
-        const submenuItems = toDropdownMenuItems(item.items);
+        const submenuItems = toMenuItems(item.items);
 
         if (!submenuItems?.length) {
           return null;
         }
 
         return (
-          <DropdownSubMenu key={`${item.type}-${item.title}-${index}`}>
-            <DropdownSubMenuTrigger
+          <SubMenu key={`${item.type}-${item.title}-${index}`}>
+            <SubMenuTrigger
               label={item.title as string}
               icon={icon}
               disabled={item.disabled}
             />
-            <DropdownSubMenuContent>{submenuItems}</DropdownSubMenuContent>
-          </DropdownSubMenu>
+            <SubMenuContent>{submenuItems}</SubMenuContent>
+          </SubMenu>
         );
       }
 
       case "group": {
-        const groupItems = toDropdownMenuItems(item.items);
+        const groupItems = toMenuItems(item.items);
 
         if (!groupItems?.length) {
           return null;
         }
 
         return (
-          <DropdownMenuGroup
+          <MenuGroup
             key={`${item.type}-${item.title}-${index}`}
             label={item.title as string}
             items={groupItems}
@@ -120,7 +110,7 @@ export function toDropdownMenuItems(items: MenuItem[]) {
       }
 
       case "separator":
-        return <DropdownMenuSeparator key={`${item.type}-${index}`} />;
+        return <MenuSeparator key={`${item.type}-${index}`} />;
 
       default:
         return null;
@@ -149,15 +139,15 @@ export function toMobileMenuItems(
 
   return filteredItems.map((item, index) => {
     const icon = showIcon ? (
-      <MenuIconWrapper aria-hidden>
+      <Components.MenuIconWrapper aria-hidden>
         {"icon" in item ? item.icon : null}
-      </MenuIconWrapper>
+      </Components.MenuIconWrapper>
     ) : undefined;
 
     switch (item.type) {
       case "button":
         return (
-          <MenuButton
+          <Components.MenuButton
             key={`${item.type}-${item.title}-${index}`}
             disabled={item.disabled}
             $dangerous={item.dangerous}
@@ -167,31 +157,31 @@ export function toMobileMenuItems(
             }}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
             {item.selected !== undefined && (
-              <SelectedIconWrapper aria-hidden>
+              <Components.SelectedIconWrapper aria-hidden>
                 {item.selected ? <CheckmarkIcon /> : null}
-              </SelectedIconWrapper>
+              </Components.SelectedIconWrapper>
             )}
-          </MenuButton>
+          </Components.MenuButton>
         );
 
       case "route":
         return (
-          <MenuInternalLink
+          <Components.MenuInternalLink
             key={`${item.type}-${item.title}-${index}`}
             to={item.to}
             disabled={item.disabled}
             onClick={closeMenu}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuInternalLink>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+          </Components.MenuInternalLink>
         );
 
       case "link":
         return (
-          <MenuExternalLink
+          <Components.MenuExternalLink
             key={`${item.type}-${item.title}-${index}`}
             href={typeof item.href === "string" ? item.href : item.href.url}
             target={
@@ -201,8 +191,8 @@ export function toMobileMenuItems(
             onClick={closeMenu}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-          </MenuExternalLink>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+          </Components.MenuExternalLink>
         );
 
       case "submenu": {
@@ -217,7 +207,7 @@ export function toMobileMenuItems(
         }
 
         return (
-          <MenuButton
+          <Components.MenuButton
             key={`${item.type}-${item.title}-${index}`}
             disabled={item.disabled}
             onClick={() => {
@@ -225,9 +215,9 @@ export function toMobileMenuItems(
             }}
           >
             {icon}
-            <MenuLabel>{item.title}</MenuLabel>
-            <MenuDisclosure />
-          </MenuButton>
+            <Components.MenuLabel>{item.title}</Components.MenuLabel>
+            <Components.MenuDisclosure />
+          </Components.MenuButton>
         );
       }
 
@@ -244,14 +234,14 @@ export function toMobileMenuItems(
 
         return (
           <div key={`${item.type}-${item.title}-${index}`}>
-            <DropdownMenuLabel>{item.title}</DropdownMenuLabel>
+            <Components.MenuHeader>{item.title}</Components.MenuHeader>
             {groupItems}
           </div>
         );
       }
 
       case "separator":
-        return <MenuSeparator key={`${item.type}-${index}`} />;
+        return <Components.MenuSeparator key={`${item.type}-${index}`} />;
 
       default:
         return null;

app/components/primitives/DropdownMenu.tsx

@@ -1,291 +0,0 @@
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import { LocationDescriptor } from "history";
-import * as React from "react";
-import styled from "styled-components";
-import { depths, s } from "@shared/styles";
-import Scrollable from "~/components/Scrollable";
-import Tooltip from "~/components/Tooltip";
-import { fadeAndScaleIn } from "~/styles/animations";
-import {
-  MenuButton,
-  MenuDisclosure,
-  MenuExternalLink,
-  MenuHeader,
-  MenuInternalLink,
-  MenuLabel,
-  MenuSeparator,
-  MenuSubTrigger,
-  SelectedIconWrapper,
-} from "./components/Menu";
-import { CheckmarkIcon } from "outline-icons";
-
-const DropdownMenu = DropdownMenuPrimitive.Root;
-
-const DropdownSubMenu = DropdownMenuPrimitive.Sub;
-
-const DropdownMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Trigger>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Trigger>
->((props, ref) => {
-  const { children, ...rest } = props;
-  return (
-    <DropdownMenuPrimitive.Trigger ref={ref} {...rest} asChild>
-      {children}
-    </DropdownMenuPrimitive.Trigger>
-  );
-});
-DropdownMenuTrigger.displayName = DropdownMenuPrimitive.Trigger.displayName;
-
-const DropdownMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        {...rest}
-        sideOffset={4}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.Content>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-
-type DropdownSubMenuTriggerProps = BaseDropdownItemProps &
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger>;
-
-const DropdownSubMenuTrigger = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
-  DropdownSubMenuTriggerProps
->((props, ref) => {
-  const { label, icon, disabled, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.SubTrigger ref={ref} {...rest} asChild>
-      <MenuSubTrigger disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        <MenuDisclosure />
-      </MenuSubTrigger>
-    </DropdownMenuPrimitive.SubTrigger>
-  );
-});
-DropdownSubMenuTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName;
-
-const DropdownSubMenuContent = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
->((props, ref) => {
-  const { children, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Portal>
-      <DropdownMenuPrimitive.SubContent
-        ref={ref}
-        {...rest}
-        collisionPadding={6}
-        asChild
-      >
-        <StyledScrollable hiddenScrollbars>{children}</StyledScrollable>
-      </DropdownMenuPrimitive.SubContent>
-    </DropdownMenuPrimitive.Portal>
-  );
-});
-DropdownSubMenuContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName;
-
-type DropdownMenuGroupProps = {
-  label: string;
-  items: React.ReactNode[];
-} & Omit<
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>,
-  "children" | "asChild"
->;
-
-const DropdownMenuGroup = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Group>,
-  DropdownMenuGroupProps
->((props, ref) => {
-  const { label, items, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Group ref={ref} {...rest}>
-      <DropdownMenuLabel>{label}</DropdownMenuLabel>
-      {items}
-    </DropdownMenuPrimitive.Group>
-  );
-});
-DropdownMenuGroup.displayName = DropdownMenuPrimitive.Group.displayName;
-
-type BaseDropdownItemProps = {
-  label: string;
-  icon?: React.ReactElement;
-  disabled?: boolean;
-};
-
-type DropdownMenuButtonProps = BaseDropdownItemProps & {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-  tooltip?: React.ReactChild;
-  selected?: boolean;
-  dangerous?: boolean;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuButton = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuButtonProps
->((props, ref) => {
-  const {
-    label,
-    icon,
-    tooltip,
-    disabled,
-    selected,
-    dangerous,
-    onClick,
-    ...rest
-  } = props;
-
-  const button = (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuButton disabled={disabled} $dangerous={dangerous} onClick={onClick}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-        {selected !== undefined && (
-          <SelectedIconWrapper aria-hidden>
-            {selected ? <CheckmarkIcon /> : null}
-          </SelectedIconWrapper>
-        )}
-      </MenuButton>
-    </DropdownMenuPrimitive.Item>
-  );
-
-  return tooltip ? (
-    <Tooltip content={tooltip} placement="bottom">
-      <div>{button}</div>
-    </Tooltip>
-  ) : (
-    <>{button}</>
-  );
-});
-DropdownMenuButton.displayName = "DropdownMenuButton";
-
-type DropdownMenuInternalLinkProps = BaseDropdownItemProps & {
-  to: LocationDescriptor;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuInternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuInternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, to, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuInternalLink to={to} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuInternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuInternalLink.displayName = "DropdownMenuInternalLink";
-
-type DropdownMenuExternalLinkProps = BaseDropdownItemProps & {
-  href: string;
-  target?: string;
-} & Omit<
-    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
-    "children" | "asChild" | "onClick"
-  >;
-
-const DropdownMenuExternalLink = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
-  DropdownMenuExternalLinkProps
->((props, ref) => {
-  const { label, icon, disabled, href, target, ...rest } = props;
-
-  return (
-    <DropdownMenuPrimitive.Item ref={ref} disabled={disabled} {...rest} asChild>
-      <MenuExternalLink href={href} target={target} disabled={disabled}>
-        {icon}
-        <MenuLabel>{label}</MenuLabel>
-      </MenuExternalLink>
-    </DropdownMenuPrimitive.Item>
-  );
-});
-DropdownMenuExternalLink.displayName = "DropdownMenuExternalLink";
-
-const DropdownMenuSeparator = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
->((props, ref) => (
-  <DropdownMenuPrimitive.Separator ref={ref} {...props} asChild>
-    <MenuSeparator />
-  </DropdownMenuPrimitive.Separator>
-));
-DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
-
-const DropdownMenuLabel = React.forwardRef<
-  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
-  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label>
->(({ className, children, ...props }, ref) => (
-  <DropdownMenuPrimitive.Label ref={ref} {...props} asChild>
-    <MenuHeader>{children}</MenuHeader>
-  </DropdownMenuPrimitive.Label>
-));
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-
-/** Styled components */
-const StyledScrollable = styled(Scrollable)`
-  z-index: ${depths.menu};
-  min-width: 180px;
-  max-width: 276px;
-  min-height: 44px;
-  max-height: min(85vh, var(--radix-dropdown-menu-content-available-height));
-  font-weight: normal;
-
-  background: ${s("menuBackground")};
-  box-shadow: ${s("menuShadow")};
-  border-radius: 6px;
-  padding: 6px;
-  outline: none;
-
-  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
-
-  &[data-state="open"] {
-    animation: ${fadeAndScaleIn} 150ms ease-out;
-  }
-
-  @media print {
-    display: none;
-  }
-`;
-
-export {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuButton,
-  DropdownMenuInternalLink,
-  DropdownMenuExternalLink,
-  DropdownMenuSeparator,
-  DropdownMenuGroup,
-  DropdownMenuLabel,
-  DropdownSubMenu,
-  DropdownSubMenuTrigger,
-  DropdownSubMenuContent,
-};

app/components/primitives/Form.tsx

@@ -0,0 +1,19 @@
+import { CSRF } from "@shared/constants";
+import { useCsrfToken } from "~/hooks/useCsrfToken";
+
+/**
+ * Form component that automatically includes a CSRF token as a hidden input field.
+ */
+export const Form = ({
+  children,
+  ...props
+}: React.FormHTMLAttributes<HTMLFormElement>) => {
+  const token = useCsrfToken();
+
+  return (
+    <form {...props}>
+      {token && <input type="hidden" name={CSRF.fieldName} value={token} />}
+      {children}
+    </form>
+  );
+};

app/components/primitives/Menu/MenuContext.tsx

@@ -0,0 +1,23 @@
+import { createContext, useContext, useMemo } from "react";
+
+type MenuVariant = "dropdown" | "context";
+
+const MenuContext = createContext<{
+  variant: MenuVariant;
+}>({
+  variant: "dropdown",
+});
+
+export function MenuProvider({
+  variant,
+  children,
+}: {
+  variant: MenuVariant;
+  children: React.ReactNode;
+}) {
+  const ctx = useMemo(() => ({ variant }), [variant]);
+
+  return <MenuContext.Provider value={ctx}>{children}</MenuContext.Provider>;
+}
+
+export const useMenuContext = () => useContext(MenuContext);

app/components/primitives/Menu/index.tsx

@@ -0,0 +1,435 @@
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as Components from "../components/Menu";
+import { LocationDescriptor } from "history";
+import * as React from "react";
+import Tooltip from "~/components/Tooltip";
+import { CheckmarkIcon } from "outline-icons";
+import { useMenuContext } from "./MenuContext";
+
+type MenuProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Root
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Root>;
+
+const Menu = ({ children, ...rest }: MenuProps) => {
+  const { variant } = useMenuContext();
+
+  const Root =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Root
+      : ContextMenuPrimitive.Root;
+
+  return <Root {...rest}>{children}</Root>;
+};
+
+type SubMenuProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Sub
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Sub>;
+
+const SubMenu = ({ children, ...rest }: SubMenuProps) => {
+  const { variant } = useMenuContext();
+
+  const Sub =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Sub
+      : ContextMenuPrimitive.Sub;
+
+  return <Sub {...rest}>{children}</Sub>;
+};
+
+type TriggerProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Trigger
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Trigger>;
+
+const MenuTrigger = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Trigger>
+  | React.ElementRef<typeof ContextMenuPrimitive.Trigger>,
+  TriggerProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Trigger =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Trigger
+      : ContextMenuPrimitive.Trigger;
+
+  return (
+    <Trigger ref={ref} {...rest} asChild>
+      {children}
+    </Trigger>
+  );
+});
+MenuTrigger.displayName = "MenuTrigger";
+
+type ContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Content
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Content>;
+
+const MenuContent = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Content>
+  | React.ElementRef<typeof ContextMenuPrimitive.Content>,
+  ContentProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Portal =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Portal
+      : ContextMenuPrimitive.Portal;
+
+  const Content =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Content
+      : ContextMenuPrimitive.Content;
+
+  const offsetProp =
+    variant === "dropdown" ? { sideOffset: 4 } : { alignOffset: 4 };
+
+  const contentProps = {
+    maxHeightVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-available-height"
+        : "--radix-context-menu-content-available-height",
+    transformOriginVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-transform-origin"
+        : "--radix-context-menu-content-transform-origin",
+  };
+
+  return (
+    <Portal>
+      <Content ref={ref} {...rest} {...offsetProp} collisionPadding={6} asChild>
+        <Components.MenuContent {...contentProps} hiddenScrollbars>
+          {children}
+        </Components.MenuContent>
+      </Content>
+    </Portal>
+  );
+});
+MenuContent.displayName = "MenuContent";
+
+type SubMenuTriggerProps = BaseItemProps &
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubTrigger>;
+
+const SubMenuTrigger = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>
+  | React.ElementRef<typeof ContextMenuPrimitive.SubTrigger>,
+  SubMenuTriggerProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, ...rest } = props;
+
+  const Trigger =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.SubTrigger
+      : ContextMenuPrimitive.SubTrigger;
+
+  return (
+    <Trigger ref={ref} {...rest} asChild>
+      <Components.MenuSubTrigger disabled={disabled}>
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+        <Components.MenuDisclosure />
+      </Components.MenuSubTrigger>
+    </Trigger>
+  );
+});
+SubMenuTrigger.displayName = "SubMenuTrigger";
+
+type SubMenuContentProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.SubContent
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.SubContent>;
+
+const SubMenuContent = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.SubContent>
+  | React.ElementRef<typeof ContextMenuPrimitive.SubContent>,
+  SubMenuContentProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Portal =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Portal
+      : ContextMenuPrimitive.Portal;
+
+  const Content =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.SubContent
+      : ContextMenuPrimitive.SubContent;
+
+  const contentProps = {
+    maxHeightVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-available-height"
+        : "--radix-context-menu-content-available-height",
+    transformOriginVar:
+      variant === "dropdown"
+        ? "--radix-dropdown-menu-content-transform-origin"
+        : "--radix-context-menu-content-transform-origin",
+  };
+
+  return (
+    <Portal>
+      <Content ref={ref} {...rest} collisionPadding={6} asChild>
+        <Components.MenuContent {...contentProps} hiddenScrollbars>
+          {children}
+        </Components.MenuContent>
+      </Content>
+    </Portal>
+  );
+});
+SubMenuContent.displayName = "SubMenuContent";
+
+type MenuGroupProps = {
+  label: string;
+  items: React.ReactNode[];
+} & Omit<
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Group>,
+  "children" | "asChild"
+> &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Group>,
+    "children" | "asChild"
+  >;
+
+const MenuGroup = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Group>
+  | React.ElementRef<typeof ContextMenuPrimitive.Group>,
+  MenuGroupProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, items, ...rest } = props;
+
+  const Group =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Group
+      : ContextMenuPrimitive.Group;
+
+  return (
+    <Group ref={ref} {...rest}>
+      <MenuLabel>{label}</MenuLabel>
+      {items}
+    </Group>
+  );
+});
+MenuGroup.displayName = "MenuGroup";
+
+type BaseItemProps = {
+  label: string;
+  icon?: React.ReactElement;
+  disabled?: boolean;
+};
+
+type MenuButtonProps = BaseItemProps & {
+  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
+  tooltip?: React.ReactChild;
+  selected?: boolean;
+  dangerous?: boolean;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuButton = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuButtonProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const {
+    label,
+    icon,
+    tooltip,
+    disabled,
+    selected,
+    dangerous,
+    onClick,
+    ...rest
+  } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  const button = (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuButton
+        disabled={disabled}
+        $dangerous={dangerous}
+        onClick={onClick}
+      >
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+        {selected !== undefined && (
+          <Components.SelectedIconWrapper aria-hidden>
+            {selected ? <CheckmarkIcon /> : null}
+          </Components.SelectedIconWrapper>
+        )}
+      </Components.MenuButton>
+    </Item>
+  );
+
+  return tooltip ? (
+    <Tooltip content={tooltip} placement="bottom">
+      <div>{button}</div>
+    </Tooltip>
+  ) : (
+    <>{button}</>
+  );
+});
+MenuButton.displayName = "MenuButton";
+
+type MenuInternalLinkProps = BaseItemProps & {
+  to: LocationDescriptor;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuInternalLink = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuInternalLinkProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, to, ...rest } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  return (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuInternalLink to={to} disabled={disabled}>
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+      </Components.MenuInternalLink>
+    </Item>
+  );
+});
+MenuInternalLink.displayName = "MenuInternalLink";
+
+type MenuExternalLinkProps = BaseItemProps & {
+  href: string;
+  target?: string;
+} & Omit<
+    React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  > &
+  Omit<
+    React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Item>,
+    "children" | "asChild" | "onClick"
+  >;
+
+const MenuExternalLink = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Item>
+  | React.ElementRef<typeof ContextMenuPrimitive.Item>,
+  MenuExternalLinkProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { label, icon, disabled, href, target, ...rest } = props;
+
+  const Item =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Item
+      : ContextMenuPrimitive.Item;
+
+  return (
+    <Item ref={ref} disabled={disabled} {...rest} asChild>
+      <Components.MenuExternalLink
+        href={href}
+        target={target}
+        disabled={disabled}
+      >
+        {icon}
+        <Components.MenuLabel>{label}</Components.MenuLabel>
+      </Components.MenuExternalLink>
+    </Item>
+  );
+});
+MenuExternalLink.displayName = "MenuExternalLink";
+
+type MenuSeparatorProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Separator
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Separator>;
+
+const MenuSeparator = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Separator>
+  | React.ElementRef<typeof ContextMenuPrimitive.Separator>,
+  MenuSeparatorProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+
+  const Separator =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Separator
+      : ContextMenuPrimitive.Separator;
+
+  return (
+    <Separator ref={ref} {...props} asChild>
+      <Components.MenuSeparator />
+    </Separator>
+  );
+});
+MenuSeparator.displayName = "MenuSeparator";
+
+type MenuLabelProps = React.ComponentPropsWithoutRef<
+  typeof DropdownMenuPrimitive.Label
+> &
+  React.ComponentPropsWithoutRef<typeof ContextMenuPrimitive.Label>;
+
+const MenuLabel = React.forwardRef<
+  | React.ElementRef<typeof DropdownMenuPrimitive.Label>
+  | React.ElementRef<typeof ContextMenuPrimitive.Label>,
+  MenuLabelProps
+>((props, ref) => {
+  const { variant } = useMenuContext();
+  const { children, ...rest } = props;
+
+  const Label =
+    variant === "dropdown"
+      ? DropdownMenuPrimitive.Label
+      : ContextMenuPrimitive.Label;
+
+  return (
+    <Label ref={ref} {...rest} asChild>
+      <Components.MenuHeader>{children}</Components.MenuHeader>
+    </Label>
+  );
+});
+MenuLabel.displayName = "MenuLabel";
+
+export {
+  Menu,
+  MenuTrigger,
+  MenuContent,
+  MenuButton,
+  MenuInternalLink,
+  MenuExternalLink,
+  MenuSeparator,
+  MenuGroup,
+  MenuLabel,
+  SubMenu,
+  SubMenuTrigger,
+  SubMenuContent,
+};

app/components/primitives/components/Menu.tsx

@@ -3,7 +3,9 @@ import { ellipsis } from "polished";
 import { Link } from "react-router-dom";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
-import { s } from "@shared/styles";
+import { depths, s } from "@shared/styles";
+import Scrollable from "~/components/Scrollable";
+import { fadeAndScaleIn } from "~/styles/animations";
 
 type BaseMenuItemProps = {
   disabled?: boolean;
@@ -135,3 +137,31 @@ export const SelectedIconWrapper = styled.span`
   color: ${s("textSecondary")};
   flex-shrink: 0;
 `;
+
+export const MenuContent = styled(Scrollable)<{
+  maxHeightVar: string;
+  transformOriginVar: string;
+}>`
+  z-index: ${depths.menu};
+  min-width: 180px;
+  max-width: 276px;
+  min-height: 44px;
+  max-height: ${({ maxHeightVar }) => `min(85vh, var(${maxHeightVar}))`};
+  font-weight: normal;
+
+  background: ${s("menuBackground")};
+  box-shadow: ${s("menuShadow")};
+  border-radius: 6px;
+  padding: 6px;
+  outline: none;
+
+  transform-origin: ${({ transformOriginVar }) => `var(${transformOriginVar})`};
+
+  &[data-state="open"] {
+    animation: ${fadeAndScaleIn} 150ms ease-out;
+  }
+
+  @media print {
+    display: none;
+  }
+`;

app/editor/components/SelectionToolbar.tsx

@@ -221,7 +221,7 @@ export default function SelectionToolbar(props: Props) {
   } else if (isNoticeSelection && selection.empty) {
     items = getNoticeMenuItems(state, readOnly, dictionary);
   } else {
-    items = getFormattingMenuItems(state, isTemplate, isMobile, dictionary);
+    items = getFormattingMenuItems(state, isTemplate, dictionary);
   }
 
   // Some extensions may be disabled, remove corresponding items

app/editor/extensions/ClipboardTextSerializer.ts

@@ -44,9 +44,7 @@ export default class ClipboardTextSerializer extends Extension {
                   softBreak: true,
                 })
               : slice.content.content
-                  .map((node) =>
-                    ProsemirrorHelper.toPlainText(node, this.editor.schema)
-                  )
+                  .map((node) => ProsemirrorHelper.toPlainText(node))
                   .join("");
           },
         },

app/editor/index.tsx

@@ -35,7 +35,6 @@ import Extension, {
 import ExtensionManager from "@shared/editor/lib/ExtensionManager";
 import { MarkdownSerializer } from "@shared/editor/lib/markdown/serializer";
 import textBetween from "@shared/editor/lib/textBetween";
-import { getTextSerializers } from "@shared/editor/lib/textSerializers";
 import Mark from "@shared/editor/marks/Mark";
 import { basicExtensions as extensions } from "@shared/editor/nodes";
 import Node from "@shared/editor/nodes/Node";
@@ -55,6 +54,7 @@ import EditorContext from "./components/EditorContext";
 import { NodeViewRenderer } from "./components/NodeViewRenderer";
 import SelectionToolbar from "./components/SelectionToolbar";
 import WithTheme from "./components/WithTheme";
+import Lightbox from "~/components/Lightbox";
 
 export type Props = {
   /** An optional identifier for the editor context. It is used to persist local settings */
@@ -146,6 +146,8 @@ type State = {
   isEditorFocused: boolean;
   /** If the toolbar for a text selection is visible */
   selectionToolbarOpen: boolean;
+  /** Position of image in doc that's being currently viewed in Lightbox */
+  activeLightboxImgPos: number | null;
 };
 
 /**
@@ -175,6 +177,7 @@ export class Editor extends React.PureComponent<
     isRTL: false,
     isEditorFocused: false,
     selectionToolbarOpen: false,
+    activeLightboxImgPos: null,
   };
 
   isInitialized = false;
@@ -627,8 +630,7 @@ export class Editor extends React.PureComponent<
    *
    * @returns A list of headings in the document
    */
-  public getHeadings = () =>
-    ProsemirrorHelper.getHeadings(this.view.state.doc, this.schema);
+  public getHeadings = () => ProsemirrorHelper.getHeadings(this.view.state.doc);
 
   /**
    * Return the images in the current editor.
@@ -714,6 +716,13 @@ export class Editor extends React.PureComponent<
     dispatch(tr);
   };
 
+  public updateActiveLightbox = (pos: number | null) => {
+    this.setState((state) => ({
+      ...state,
+      activeLightboxImgPos: pos,
+    }));
+  };
+
   /**
    * Return the plain text content of the current editor.
    *
@@ -721,9 +730,8 @@ export class Editor extends React.PureComponent<
    */
   public getPlainText = () => {
     const { doc } = this.view.state;
-    const textSerializers = getTextSerializers(this.schema);
 
-    return textBetween(doc, 0, doc.content.size, textSerializers);
+    return textBetween(doc, 0, doc.content.size);
   };
 
   private dispatchThemeChanged = (event: CustomEvent) => {
@@ -834,6 +842,12 @@ export class Editor extends React.PureComponent<
               )}
             </Observer>
           </Flex>
+          {this.state.activeLightboxImgPos && (
+            <Lightbox
+              onUpdate={this.updateActiveLightbox}
+              activePos={this.state.activeLightboxImgPos}
+            />
+          )}
         </EditorContext.Provider>
       </PortalContext.Provider>
     );

app/editor/menus/formatting.tsx

@@ -30,17 +30,22 @@ import { MenuItem } from "@shared/editor/types";
 import { metaDisplay } from "@shared/utils/keyboard";
 import CircleIcon from "~/components/Icons/CircleIcon";
 import { Dictionary } from "~/hooks/useDictionary";
+import {
+  isMobile as isMobileDevice,
+  isTouchDevice,
+} from "@shared/utils/browser";
 
 export default function formattingMenuItems(
   state: EditorState,
   isTemplate: boolean,
-  isMobile: boolean,
   dictionary: Dictionary
 ): MenuItem[] {
   const { schema } = state;
   const isCode = isInCode(state);
   const isCodeBlock = isInCode(state, { onlyBlock: true });
   const isEmpty = state.selection.empty;
+  const isMobile = isMobileDevice();
+  const isTouch = isTouchDevice();
 
   const highlight = getMarksBetween(
     state.selection.from,
@@ -198,7 +203,7 @@ export default function formattingMenuItems(
       shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
       visible:
-        isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
+        isTouch && isInList(state, { types: ["ordered_list", "bullet_list"] }),
     },
     {
       name: "indentList",
@@ -206,21 +211,21 @@ export default function formattingMenuItems(
       shortcut: `Tab`,
       icon: <IndentIcon />,
       visible:
-        isMobile && isInList(state, { types: ["ordered_list", "bullet_list"] }),
+        isTouch && isInList(state, { types: ["ordered_list", "bullet_list"] }),
     },
     {
       name: "outdentCheckboxList",
       tooltip: dictionary.outdent,
       shortcut: `⇧+Tab`,
       icon: <OutdentIcon />,
-      visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
+      visible: isTouch && isInList(state, { types: ["checkbox_list"] }),
     },
     {
       name: "indentCheckboxList",
       tooltip: dictionary.indent,
       shortcut: `Tab`,
       icon: <IndentIcon />,
-      visible: isMobile && isInList(state, { types: ["checkbox_list"] }),
+      visible: isTouch && isInList(state, { types: ["checkbox_list"] }),
     },
     {
       name: "separator",

app/hooks/useCsrfToken.ts

@@ -0,0 +1,30 @@
+import { CSRF } from "@shared/constants";
+import { useState, useEffect } from "react";
+import { getCookie } from "tiny-cookie";
+
+/**
+ * React hook for accessing CSRF tokens in components
+ *
+ * @returns The CSRF token string or null if not found
+ */
+export function useCsrfToken() {
+  const [token, setToken] = useState<string | null>(null);
+
+  useEffect(() => {
+    const updateToken = () => {
+      const currentToken = getCookie(CSRF.cookieName);
+
+      setToken(currentToken);
+    };
+
+    // Initial load
+    updateToken();
+
+    // Listen for cookie changes (when navigating or refreshing)
+    const interval = setInterval(updateToken, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  return token;
+}

app/hooks/useDocumentMenuAction.tsx

@@ -0,0 +1,135 @@
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+import { InputIcon, SearchIcon } from "outline-icons";
+import { ActionV2Separator, createActionV2 } from "~/actions";
+import {
+  restoreDocument,
+  unsubscribeDocument,
+  subscribeDocument,
+  restoreDocumentToCollection,
+  starDocument,
+  unstarDocument,
+  editDocument,
+  shareDocument,
+  createNestedDocument,
+  importDocument,
+  createTemplateFromDocument,
+  duplicateDocument,
+  publishDocument,
+  unpublishDocument,
+  archiveDocument,
+  moveDocument,
+  moveTemplate,
+  applyTemplateFactory,
+  pinDocument,
+  createDocumentFromTemplate,
+  openDocumentComments,
+  openDocumentHistory,
+  openDocumentInsights,
+  downloadDocument,
+  copyDocument,
+  printDocument,
+  searchInDocument,
+  deleteDocument,
+  leaveDocument,
+  permanentlyDeleteDocument,
+} from "~/actions/definitions/documents";
+import { ActiveDocumentSection } from "~/actions/sections";
+import useMobile from "./useMobile";
+import Document from "~/models/Document";
+import usePolicy from "./usePolicy";
+import useCurrentUser from "./useCurrentUser";
+import { useTemplateMenuActions } from "./useTemplateMenuActions";
+import { useMenuAction } from "./useMenuAction";
+
+type Props = {
+  /** Document for which the actions are generated */
+  document: Document;
+  /** Invoked when the "Find and replace" menu item is clicked */
+  onFindAndReplace?: () => void;
+  /** Invoked when the "Rename" menu item is clicked */
+  onRename?: () => void;
+  /** Callback when a template is selected to apply its content to the document */
+  onSelectTemplate?: (template: Document) => void;
+};
+
+export function useDocumentMenuAction({
+  document,
+  onFindAndReplace,
+  onRename,
+  onSelectTemplate,
+}: Props) {
+  const { t } = useTranslation();
+  const isMobile = useMobile();
+  const user = useCurrentUser();
+
+  const can = usePolicy(document);
+
+  const templateMenuActions = useTemplateMenuActions({
+    document,
+    onSelectTemplate,
+  });
+
+  const actions = useMemo(
+    () => [
+      restoreDocument,
+      restoreDocumentToCollection,
+      starDocument,
+      unstarDocument,
+      subscribeDocument,
+      unsubscribeDocument,
+      createActionV2({
+        name: `${t("Find and replace")}…`,
+        section: ActiveDocumentSection,
+        icon: <SearchIcon />,
+        visible: !!onFindAndReplace && isMobile,
+        perform: () => onFindAndReplace?.(),
+      }),
+      ActionV2Separator,
+      editDocument,
+      createActionV2({
+        name: `${t("Rename")}…`,
+        section: ActiveDocumentSection,
+        icon: <InputIcon />,
+        visible: !!can.update && !user.separateEditMode && !!onRename,
+        perform: () => requestAnimationFrame(() => onRename?.()),
+      }),
+      shareDocument,
+      createNestedDocument,
+      importDocument,
+      createTemplateFromDocument,
+      duplicateDocument,
+      publishDocument,
+      unpublishDocument,
+      archiveDocument,
+      moveDocument,
+      moveTemplate,
+      applyTemplateFactory({ actions: templateMenuActions }),
+      pinDocument,
+      createDocumentFromTemplate,
+      ActionV2Separator,
+      openDocumentComments,
+      openDocumentHistory,
+      openDocumentInsights,
+      downloadDocument,
+      copyDocument,
+      printDocument,
+      searchInDocument,
+      ActionV2Separator,
+      deleteDocument,
+      permanentlyDeleteDocument,
+      leaveDocument,
+    ],
+    [
+      t,
+      isMobile,
+      templateMenuActions,
+      can.update,
+      user.separateEditMode,
+      onFindAndReplace,
+      onRename,
+    ]
+  );
+
+  return useMenuAction(actions);
+}

app/hooks/useEditorClickHandlers.ts

@@ -57,7 +57,7 @@ export default function useEditorClickHandlers({ shareId }: Params) {
         }
 
         if (isDocumentUrl(navigateTo)) {
-          const document = documents.getByUrl(navigateTo);
+          const document = documents.get(navigateTo);
           if (document) {
             navigateTo = document.path;
           }

app/hooks/useFocusedComment.ts

@@ -1,13 +1,44 @@
-import { useLocation } from "react-router-dom";
 import useQuery from "~/hooks/useQuery";
 import useStores from "./useStores";
+import { useDocumentContext } from "~/components/DocumentContext";
+import { useEffect } from "react";
+import { useHistory } from "react-router-dom";
 
-export default function useFocusedComment() {
+/**
+ * Custom hook to retrieve the currently focused comment in a document.
+ * It checks both the document context and the query string for the comment ID.
+ * If a comment is focused, it returns the comment itself or the parent thread if it exists
+ */
+export function useFocusedComment() {
   const { comments } = useStores();
-  const location = useLocation<{ commentId?: string }>();
+  const context = useDocumentContext();
   const query = useQuery();
-  const focusedCommentId = location.state?.commentId || query.get("commentId");
+  const focusedCommentId = context.focusedCommentId || query.get("commentId");
   const comment = focusedCommentId ? comments.get(focusedCommentId) : undefined;
+  const history = useHistory();
+
+  // Move the query string into context
+  useEffect(() => {
+    if (focusedCommentId && context.focusedCommentId !== focusedCommentId) {
+      context.setFocusedCommentId(focusedCommentId);
+    }
+  }, [focusedCommentId, context]);
+
+  // Clear query string from location
+  useEffect(() => {
+    if (focusedCommentId) {
+      const params = new URLSearchParams(history.location.search);
+
+      if (params.get("commentId") === focusedCommentId) {
+        params.delete("commentId");
+        history.replace({
+          pathname: history.location.pathname,
+          search: params.toString(),
+          state: history.location.state,
+        });
+      }
+    }
+  }, [focusedCommentId, history]);
 
   return comment?.parentCommentId
     ? comments.get(comment.parentCommentId)

app/hooks/usePersistedState.ts

@@ -1,9 +1,10 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback, useEffect } from "react";
 import { Primitive } from "utility-types";
 import Storage from "@shared/utils/Storage";
 import { isBrowser } from "@shared/utils/browser";
 import Logger from "~/utils/Logger";
 import useEventListener from "./useEventListener";
+import usePrevious from "./usePrevious";
 
 type Options = {
   /* Whether to listen and react to changes in the value from other tabs */
@@ -41,6 +42,7 @@ export default function usePersistedState<T extends Primitive | object>(
   defaultValue: T,
   options?: Options
 ): [T, (value: T) => void] {
+  const previousKey = usePrevious(key);
   const [storedValue, setStoredValue] = useState(() => {
     if (!isBrowser) {
       return defaultValue;
@@ -65,6 +67,13 @@ export default function usePersistedState<T extends Primitive | object>(
     [key, storedValue]
   );
 
+  // Sync state when key changes
+  useEffect(() => {
+    if (previousKey !== key) {
+      setStoredValue(Storage.get(key) ?? defaultValue);
+    }
+  }, [previousKey, key, defaultValue]);
+
   // Listen to the key changing in other tabs so we can keep UI in sync
   useEventListener("storage", (event: StorageEvent) => {
     if (options?.listen !== false && event.key === key && event.newValue) {

app/menus/DocumentMenu.tsx

@@ -1,6 +1,5 @@
 import noop from "lodash/noop";
 import { observer } from "mobx-react";
-import { InputIcon, SearchIcon } from "outline-icons";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import styled from "styled-components";
@@ -11,49 +10,14 @@ import Document from "~/models/Document";
 import { DropdownMenu } from "~/components/Menu/DropdownMenu";
 import { OverflowMenuButton } from "~/components/Menu/OverflowMenuButton";
 import Switch from "~/components/Switch";
-import { ActionV2Separator, createActionV2 } from "~/actions";
-import {
-  pinDocument,
-  createTemplateFromDocument,
-  subscribeDocument,
-  unsubscribeDocument,
-  moveDocument,
-  deleteDocument,
-  permanentlyDeleteDocument,
-  downloadDocument,
-  importDocument,
-  starDocument,
-  unstarDocument,
-  duplicateDocument,
-  archiveDocument,
-  openDocumentHistory,
-  openDocumentInsights,
-  publishDocument,
-  unpublishDocument,
-  printDocument,
-  openDocumentComments,
-  createDocumentFromTemplate,
-  createNestedDocument,
-  shareDocument,
-  copyDocument,
-  searchInDocument,
-  leaveDocument,
-  moveTemplate,
-  restoreDocument,
-  restoreDocumentToCollection,
-  editDocument,
-  applyTemplateFactory,
-} from "~/actions/definitions/documents";
 import useActionContext from "~/hooks/useActionContext";
 import useCurrentUser from "~/hooks/useCurrentUser";
 import useMobile from "~/hooks/useMobile";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import { ActiveDocumentSection } from "~/actions/sections";
-import { useTemplateMenuActions } from "~/hooks/useTemplateMenuActions";
-import { useMenuAction } from "~/hooks/useMenuAction";
 import { MenuSeparator } from "~/components/primitives/components/Menu";
+import { useDocumentMenuAction } from "~/hooks/useDocumentMenuAction";
 
 type Props = {
   /** Document for which the menu is to be shown */
@@ -95,7 +59,13 @@ function DocumentMenu({
   const isMobile = useMobile();
   const can = usePolicy(document);
 
-  const { subscriptions, pins } = useStores();
+  const { userMemberships, groupMemberships, subscriptions, pins } =
+    useStores();
+
+  const isShared = !!(
+    userMemberships.getByDocumentId(document.id) ||
+    groupMemberships.getByDocumentId(document.id)
+  );
 
   const {
     loading: auxDataLoading,
@@ -155,78 +125,18 @@ function DocumentMenu({
     [document]
   );
 
-  const templateMenuActions = useTemplateMenuActions({
+  const rootAction = useDocumentMenuAction({
     document,
+    onFindAndReplace,
+    onRename,
     onSelectTemplate,
   });
 
-  const actions = React.useMemo(
-    () => [
-      restoreDocument,
-      restoreDocumentToCollection,
-      starDocument,
-      unstarDocument,
-      subscribeDocument,
-      unsubscribeDocument,
-      createActionV2({
-        name: `${t("Find and replace")}…`,
-        section: ActiveDocumentSection,
-        icon: <SearchIcon />,
-        visible: !!onFindAndReplace && isMobile,
-        perform: () => onFindAndReplace?.(),
-      }),
-      ActionV2Separator,
-      editDocument,
-      createActionV2({
-        name: `${t("Rename")}…`,
-        section: ActiveDocumentSection,
-        icon: <InputIcon />,
-        visible: !!can.update && !user.separateEditMode && !!onRename,
-        perform: () => requestAnimationFrame(() => onRename?.()),
-      }),
-      shareDocument,
-      createNestedDocument,
-      importDocument,
-      createTemplateFromDocument,
-      duplicateDocument,
-      publishDocument,
-      unpublishDocument,
-      archiveDocument,
-      moveDocument,
-      moveTemplate,
-      applyTemplateFactory({ actions: templateMenuActions }),
-      pinDocument,
-      createDocumentFromTemplate,
-      ActionV2Separator,
-      openDocumentComments,
-      openDocumentHistory,
-      openDocumentInsights,
-      downloadDocument,
-      copyDocument,
-      printDocument,
-      searchInDocument,
-      ActionV2Separator,
-      deleteDocument,
-      permanentlyDeleteDocument,
-      leaveDocument,
-    ],
-    [
-      t,
-      isMobile,
-      templateMenuActions,
-      can.update,
-      user.separateEditMode,
-      onFindAndReplace,
-      onRename,
-    ]
-  );
-
-  const rootAction = useMenuAction(actions);
-
   const context = useActionContext({
     isContextMenu: true,
     activeDocumentId: document.id,
-    activeCollectionId: document.collectionId ?? undefined,
+    activeCollectionId:
+      !isShared && document.collectionId ? document.collectionId : undefined,
   });
 
   const toggleSwitches = React.useMemo<React.ReactNode>(() => {
@@ -280,6 +190,7 @@ function DocumentMenu({
   }, [
     t,
     can.update,
+    can.updateInsights,
     document.embedsDisabled,
     document.fullWidth,
     document.insightsEnabled,
@@ -288,6 +199,7 @@ function DocumentMenu({
     showToggleEmbeds,
     handleEmbedsToggle,
     handleFullWidthToggle,
+    handleInsightsToggle,
   ]);
 
   return (

app/menus/GroupMemberMenu.tsx

@@ -1,38 +0,0 @@
-import { observer } from "mobx-react";
-import { useTranslation } from "react-i18next";
-import { DropdownMenu } from "~/components/Menu/DropdownMenu";
-import { OverflowMenuButton } from "~/components/Menu/OverflowMenuButton";
-import { useMenuAction } from "~/hooks/useMenuAction";
-import { useMemo } from "react";
-import { createActionV2 } from "~/actions";
-import { GroupSection } from "~/actions/sections";
-
-type Props = {
-  onRemove: () => void;
-};
-
-function GroupMemberMenu({ onRemove }: Props) {
-  const { t } = useTranslation();
-
-  const actions = useMemo(
-    () => [
-      createActionV2({
-        name: t("Remove"),
-        section: GroupSection,
-        dangerous: true,
-        perform: onRemove,
-      }),
-    ],
-    [t, onRemove]
-  );
-
-  const rootAction = useMenuAction(actions);
-
-  return (
-    <DropdownMenu action={rootAction} ariaLabel={t("Group member options")}>
-      <OverflowMenuButton />
-    </DropdownMenu>
-  );
-}
-
-export default observer(GroupMemberMenu);

app/models/ApiKey.ts

@@ -2,6 +2,8 @@ import { isPast } from "date-fns";
 import { computed, observable } from "mobx";
 import ParanoidModel from "./base/ParanoidModel";
 import Field from "./decorators/Field";
+import User from "./User";
+import Relation from "./decorators/Relation";
 
 class ApiKey extends ParanoidModel {
   static modelName = "ApiKey";
@@ -25,6 +27,10 @@ class ApiKey extends ParanoidModel {
   @observable
   lastActiveAt?: string;
 
+  /** The user who this API key belongs to. */
+  @Relation(() => User)
+  user: User;
+
   /** The user ID that the API key belongs to. */
   userId: string;
 

app/models/Document.ts

@@ -723,8 +723,7 @@ export default class Document extends ArchivableModel implements Searchable {
       marks: extensionManager.marks,
     });
     const text = ProsemirrorHelper.toPlainText(
-      Node.fromJSON(schema, this.data),
-      schema
+      Node.fromJSON(schema, this.data)
     );
     return text;
   };

app/models/GroupUser.ts

@@ -1,7 +1,9 @@
+import { GroupPermission } from "@shared/types";
 import Group from "./Group";
 import User from "./User";
 import Model from "./base/Model";
 import Relation from "./decorators/Relation";
+import Field from "./decorators/Field";
 
 /**
  * Represents a user's membership to a group.
@@ -22,6 +24,10 @@ class GroupUser extends Model {
   /** The group that the user belongs to. */
   @Relation(() => Group, { onDelete: "cascade" })
   group: Group;
+
+  /** The permission of the user in the group. */
+  @Field
+  permission: GroupPermission;
 }
 
 export default GroupUser;

app/scenes/Collection/index.tsx

@@ -75,8 +75,7 @@ const CollectionScene = observer(function _CollectionScene() {
   const id = params.id || "";
   const urlId = id.split("-").pop() ?? "";
 
-  const collection: Collection | null | undefined =
-    collections.getByUrl(id) || collections.get(id);
+  const collection: Collection | null | undefined = collections.get(id);
   const can = usePolicy(collection);
 
   const { pins, count } = usePinnedDocuments(urlId, collection?.id);

app/scenes/Document/components/CommentSortMenu.tsx

@@ -1,23 +1,22 @@
-import queryString from "query-string";
 import React from "react";
 import { useTranslation } from "react-i18next";
-import { useHistory, useLocation } from "react-router-dom";
 import styled from "styled-components";
 import { s } from "@shared/styles";
 import { UserPreference } from "@shared/types";
 import { InputSelect, Option } from "~/components/InputSelect";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
-import useQuery from "~/hooks/useQuery";
 import { CommentSortType } from "~/types";
 
-const CommentSortMenu = () => {
+type Props = {
+  /** Callback when the sort type changes */
+  onChange?: (sortType: CommentSortType | "resolved") => void;
+  /** Whether resolved comments are being viewed */
+  viewingResolved?: boolean;
+};
+
+const CommentSortMenu = ({ viewingResolved, onChange }: Props) => {
   const { t } = useTranslation();
-  const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
-  const history = useHistory();
   const user = useCurrentUser();
-  const params = useQuery();
 
   const preferredSortType = user.getPreference(
     UserPreference.SortCommentsByOrderInDocument
@@ -25,42 +24,23 @@ const CommentSortMenu = () => {
     ? CommentSortType.OrderInDocument
     : CommentSortType.MostRecent;
 
-  const viewingResolved = params.get("resolved") === "";
   const value = viewingResolved ? "resolved" : preferredSortType;
 
   const handleChange = React.useCallback(
-    (val: string) => {
-      if (val === "resolved") {
-        history.push({
-          search: queryString.stringify({
-            ...queryString.parse(location.search),
-            resolved: "",
-          }),
-          pathname: location.pathname,
-          state: { sidebarContext },
-        });
-        return;
+    (val: CommentSortType | "resolved") => {
+      if (val !== "resolved") {
+        if (val !== preferredSortType) {
+          user.setPreference(
+            UserPreference.SortCommentsByOrderInDocument,
+            val === CommentSortType.OrderInDocument
+          );
+          void user.save();
+        }
       }
 
-      const sortType = val as CommentSortType;
-      if (sortType !== preferredSortType) {
-        user.setPreference(
-          UserPreference.SortCommentsByOrderInDocument,
-          sortType === CommentSortType.OrderInDocument
-        );
-        void user.save();
-      }
-
-      history.push({
-        search: queryString.stringify({
-          ...queryString.parse(location.search),
-          resolved: undefined,
-        }),
-        pathname: location.pathname,
-        state: { sidebarContext },
-      });
+      onChange?.(val);
     },
-    [history, location, sidebarContext, user, preferredSortType]
+    [user, onChange, preferredSortType]
   );
 
   const options: Option[] = React.useMemo(

app/scenes/Document/components/CommentThread.tsx

@@ -2,7 +2,6 @@ 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";
 import scrollIntoView from "scroll-into-view-if-needed";
 import styled, { css } from "styled-components";
 import breakpoint from "styled-components-breakpoint";
@@ -17,7 +16,6 @@ import Facepile from "~/components/Facepile";
 import Fade from "~/components/Fade";
 import { ResizingHeightContainer } from "~/components/ResizingHeightContainer";
 import useBoolean from "~/hooks/useBoolean";
-import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import useOnClickOutside from "~/hooks/useOnClickOutside";
 import usePersistedState from "~/hooks/usePersistedState";
 import usePolicy from "~/hooks/usePolicy";
@@ -51,14 +49,11 @@ function CommentThread({
   collapseNumDisplayed = 3,
 }: Props) {
   const [scrollOnMount] = React.useState(focused && !window.location.hash);
-  const { editor } = useDocumentContext();
+  const { editor, setFocusedCommentId } = useDocumentContext();
   const { comments } = useStores();
   const topRef = React.useRef<HTMLDivElement>(null);
   const replyRef = React.useRef<HTMLDivElement>(null);
   const { t } = useTranslation();
-  const history = useHistory();
-  const location = useLocation();
-  const sidebarContext = useLocationSidebarContext();
   const [autoFocus, setAutoFocusOn, setAutoFocusOff] = useBoolean(thread.isNew);
   const user = useCurrentUser();
 
@@ -102,14 +97,7 @@ function CommentThread({
       !(event.target as HTMLElement).classList.contains("comment") &&
       event.defaultPrevented === false
     ) {
-      history.replace({
-        search: location.search,
-        pathname: location.pathname,
-        state: {
-          commentId: undefined,
-          sidebarContext,
-        },
-      });
+      setFocusedCommentId(null);
     }
   });
 
@@ -118,15 +106,7 @@ function CommentThread({
   }, [editor, thread.id]);
 
   const handleClickThread = () => {
-    history.replace({
-      // Clear any commentId from the URL when explicitly focusing a thread
-      search: thread.isResolved ? "resolved=" : "",
-      pathname: location.pathname.replace(/\/history$/, ""),
-      state: {
-        commentId: thread.id,
-        sidebarContext,
-      },
-    });
+    setFocusedCommentId(thread.id);
   };
 
   const handleClickExpand = (ev: React.SyntheticEvent) => {

app/scenes/Document/components/CommentThreadItem.tsx

@@ -30,6 +30,7 @@ import useCurrentUser from "~/hooks/useCurrentUser";
 import CommentMenu from "~/menus/CommentMenu";
 import CommentEditor from "./CommentEditor";
 import { HighlightedText } from "./HighlightText";
+import { useDocumentContext } from "~/components/DocumentContext";
 
 /**
  * Hook to calculate if we should display a timestamp on a comment
@@ -111,6 +112,7 @@ function CommentThreadItem({
   onEditStart,
   onEditEnd,
 }: Props) {
+  const { setFocusedCommentId } = useDocumentContext();
   const { t } = useTranslation();
   const user = useCurrentUser();
   const [data, setData] = React.useState(comment.data);
@@ -154,6 +156,9 @@ function CommentThreadItem({
   const handleUpdate = React.useCallback(
     (attrs: { resolved: boolean }) => {
       onUpdate?.(comment.id, attrs);
+      if ("resolved" in attrs) {
+        setFocusedCommentId(null);
+      }
     },
     [comment.id, onUpdate]
   );

app/scenes/Document/components/Comments.tsx

@@ -13,7 +13,7 @@ import Fade from "~/components/Fade";
 import Flex from "~/components/Flex";
 import Scrollable from "~/components/Scrollable";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useFocusedComment from "~/hooks/useFocusedComment";
+import { useFocusedComment } from "~/hooks/useFocusedComment";
 import useKeyDown from "~/hooks/useKeyDown";
 import usePersistedState from "~/hooks/usePersistedState";
 import usePolicy from "~/hooks/usePolicy";
@@ -31,11 +31,13 @@ function Comments() {
   const { editor, isEditorInitialized } = useDocumentContext();
   const { t } = useTranslation();
   const match = useRouteMatch<{ documentSlug: string }>();
-  const params = useQuery();
-  const document = documents.getByUrl(match.params.documentSlug);
+  const document = documents.get(match.params.documentSlug);
   const focusedComment = useFocusedComment();
   const can = usePolicy(document);
-
+  const query = useQuery();
+  const [viewingResolved, setViewingResolved] = useState(
+    query.get("resolved") !== null || focusedComment?.isResolved || false
+  );
   const scrollableRef = useRef<HTMLDivElement | null>(null);
   const prevThreadCount = useRef(0);
   const isAtBottom = useRef(true);
@@ -43,6 +45,13 @@ function Comments() {
 
   useKeyDown("Escape", () => document && ui.set({ commentsExpanded: false }));
 
+  // Account for the resolved status of the comment changing
+  useEffect(() => {
+    if (focusedComment && focusedComment.isResolved !== viewingResolved) {
+      setViewingResolved(focusedComment.isResolved);
+    }
+  }, [focusedComment, viewingResolved]);
+
   const [draft, onSaveDraft] = usePersistedState<ProsemirrorData | undefined>(
     `draft-${document?.id}-new`,
     undefined
@@ -57,7 +66,6 @@ function Comments() {
       }
     : { type: CommentSortType.MostRecent };
 
-  const viewingResolved = params.get("resolved") === "";
   const threads = !document
     ? []
     : viewingResolved
@@ -124,7 +132,12 @@ function Comments() {
       title={
         <Flex align="center" justify="space-between" auto>
           <span>{t("Comments")}</span>
-          <CommentSortMenu />
+          <CommentSortMenu
+            viewingResolved={viewingResolved}
+            onChange={(val) => {
+              setViewingResolved(val === "resolved");
+            }}
+          />
         </Flex>
       }
       onClose={() => ui.set({ commentsExpanded: false })}

app/scenes/Document/components/DataLoader.tsx

@@ -67,9 +67,7 @@ function DataLoader({ match, children }: Props) {
   const { revisionId, documentSlug } = match.params;
 
   // Allows loading by /doc/slug-<urlId> or /doc/<id>
-  const document =
-    documents.getByUrl(match.params.documentSlug) ??
-    documents.get(match.params.documentSlug);
+  const document = documents.get(match.params.documentSlug);
 
   if (document) {
     setDocument(document);

app/scenes/Document/components/Editor.tsx

@@ -3,7 +3,7 @@ import { observer } from "mobx-react";
 import * as React from "react";
 import { useTranslation } from "react-i18next";
 import { mergeRefs } from "react-merge-refs";
-import { useHistory, useRouteMatch } from "react-router-dom";
+import { useRouteMatch } from "react-router-dom";
 import styled from "styled-components";
 import Text from "@shared/components/Text";
 import { richExtensions, withComments } from "@shared/editor/nodes";
@@ -19,7 +19,7 @@ import Time from "~/components/Time";
 import { withUIExtensions } from "~/editor/extensions";
 import useCurrentTeam from "~/hooks/useCurrentTeam";
 import useCurrentUser from "~/hooks/useCurrentUser";
-import useFocusedComment from "~/hooks/useFocusedComment";
+import { useFocusedComment } from "~/hooks/useFocusedComment";
 import { useLocationSidebarContext } from "~/hooks/useLocationSidebarContext";
 import usePolicy from "~/hooks/usePolicy";
 import useQuery from "~/hooks/useQuery";
@@ -59,11 +59,11 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
   const titleRef = React.useRef<RefHandle>(null);
   const { t } = useTranslation();
   const match = useRouteMatch();
+  const { setFocusedCommentId } = useDocumentContext();
   const focusedComment = useFocusedComment();
   const { ui, comments } = useStores();
   const user = useCurrentUser({ rejectOnEmpty: false });
   const team = useCurrentTeam({ rejectOnEmpty: false });
-  const history = useHistory();
   const sidebarContext = useLocationSidebarContext();
   const params = useQuery();
   const {
@@ -95,18 +95,11 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         (focusedComment.isResolved && !viewingResolved) ||
         (!focusedComment.isResolved && viewingResolved)
       ) {
-        history.replace({
-          search: focusedComment.isResolved ? "resolved=" : "",
-          pathname: location.pathname,
-          state: {
-            commentId: focusedComment.id,
-            sidebarContext,
-          },
-        });
+        setFocusedCommentId(focusedComment.id);
       }
       ui.set({ commentsExpanded: true });
     }
-  }, [focusedComment, ui, document.id, history, params, sidebarContext]);
+  }, [focusedComment, ui, document.id, params]);
 
   // Save document when blurring title, but delay so that if clicking on a
   // button this is allowed to execute first.
@@ -127,16 +120,6 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
     [focusAtStart, ref]
   );
 
-  const handleClickComment = React.useCallback(
-    (commentId: string) => {
-      history.replace({
-        pathname: window.location.pathname.replace(/\/history$/, ""),
-        state: { commentId, sidebarContext },
-      });
-    },
-    [history, sidebarContext]
-  );
-
   // Create a Comment model in local store when a comment mark is created, this
   // acts as a local draft before submission.
   const handleDraftComment = React.useCallback(
@@ -156,13 +139,9 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
       );
       comment.id = commentId;
       comments.add(comment);
-
-      history.replace({
-        pathname: window.location.pathname.replace(/\/history$/, ""),
-        state: { commentId, sidebarContext },
-      });
+      setFocusedCommentId(commentId);
     },
-    [comments, user?.id, props.id, history, sidebarContext]
+    [comments, user?.id, props.id]
   );
 
   // Soft delete the Comment model when associated mark is totally removed.
@@ -258,7 +237,7 @@ function DocumentEditor(props: Props, ref: React.RefObject<any>) {
         userId={user?.id}
         focusedCommentId={focusedComment?.id}
         onClickCommentMark={
-          commentingEnabled && can.comment ? handleClickComment : undefined
+          commentingEnabled && can.comment ? setFocusedCommentId : undefined
         }
         onCreateCommentMark={
           commentingEnabled && can.comment ? handleDraftComment : undefined

app/scenes/Document/components/Header.tsx

@@ -166,7 +166,7 @@ function DocumentHeader({
   );
 
   useKeyDown(
-    (event) => event.ctrlKey && event.altKey && event.key === "˙",
+    (event) => event.ctrlKey && event.altKey && event.code === "KeyH",
     handleToggle,
     {
       allowInInput: true,

app/scenes/Document/components/History.tsx

@@ -34,7 +34,7 @@ function History() {
   const match = useRouteMatch<{ documentSlug: string }>();
   const history = useHistory();
   const sidebarContext = useLocationSidebarContext();
-  const document = documents.getByUrl(match.params.documentSlug);
+  const document = documents.get(match.params.documentSlug);
   const [revisionsOffset, setRevisionsOffset] = React.useState(0);
   const [eventsOffset, setEventsOffset] = React.useState(0);
 

app/scenes/Login/OAuthAuthorize.tsx

@@ -26,6 +26,7 @@ import { Background } from "./components/Background";
 import { Centered } from "./components/Centered";
 import { ConnectHeader } from "./components/ConnectHeader";
 import { TeamSwitcher } from "./components/TeamSwitcher";
+import { Form } from "~/components/primitives/Form";
 
 export default function OAuthAuthorize() {
   const team = useCurrentTeam({ rejectOnEmpty: false });
@@ -203,7 +204,7 @@ function Authorize() {
             </li>
           ))}
         </ul>
-        <form
+        <Form
           method="POST"
           action="/oauth/authorize"
           style={{ width: "100%" }}
@@ -236,7 +237,7 @@ function Authorize() {
               {t("Authorize")}
             </Button>
           </Flex>
-        </form>
+        </Form>
       </Centered>
     </Background>
   );

app/scenes/Login/components/WorkspaceSetup.tsx

@@ -12,15 +12,17 @@ import { detectLanguage } from "~/utils/language";
 import { BackButton } from "./BackButton";
 import { Background } from "./Background";
 import { Centered } from "./Centered";
+import { Form } from "~/components/primitives/Form";
 
 const WorkspaceSetup = ({ onBack }: { onBack?: () => void }) => {
   const { t } = useTranslation();
+
   return (
     <Background>
       <BackButton onBack={onBack} />
       <ChangeLanguage locale={detectLanguage()} />
       <Centered
-        as="form"
+        as={Form}
         action="/api/installation.create"
         method="POST"
         gap={12}

app/scenes/Settings/components/ApiKeyListItem.tsx

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

app/scenes/Settings/components/GroupDialogs.tsx

@@ -25,7 +25,10 @@ import useCurrentTeam from "~/hooks/useCurrentTeam";
 import usePolicy from "~/hooks/usePolicy";
 import useRequest from "~/hooks/useRequest";
 import useStores from "~/hooks/useStores";
-import GroupMemberMenu from "~/menus/GroupMemberMenu";
+import InputMemberPermissionSelect from "~/components/InputMemberPermissionSelect";
+import { GroupPermission } from "@shared/types";
+import { EmptySelectValue, Permission } from "~/types";
+import GroupUser from "~/models/GroupUser";
 
 type Props = {
   group: Group;
@@ -248,6 +251,7 @@ export const ViewGroupMembersDialog = observer(function ({
               </Button>
             </span>
           )}
+          <br />
         </>
       ) : (
         <Text as="p" type="secondary">
@@ -262,7 +266,6 @@ export const ViewGroupMembersDialog = observer(function ({
           />
         </Text>
       )}
-      <br />
       <PaginatedList<User>
         items={users.inGroup(group.id)}
         fetch={groupUsers.fetchPage}
@@ -274,6 +277,10 @@ export const ViewGroupMembersDialog = observer(function ({
           <GroupMemberListItem
             key={user.id}
             user={user}
+            group={group}
+            groupUser={groupUsers.orderedData.find(
+              (gu) => gu.userId === user.id && gu.groupId === group.id
+            )}
             onRemove={can.update ? () => handleRemoveUser(user) : undefined}
           />
         )}
@@ -390,6 +397,8 @@ const AddPeopleToGroupDialog = observer(function ({
             <GroupMemberListItem
               key={item.id}
               user={item}
+              group={group}
+              groupUser={undefined}
               onAdd={() => handleAddUser(item)}
             />
           )}
@@ -401,16 +410,41 @@ const AddPeopleToGroupDialog = observer(function ({
 
 type GroupMemberListItemProps = {
   user: User;
+  group: Group;
+  groupUser: GroupUser | undefined;
   onAdd?: () => Promise<void>;
   onRemove?: () => Promise<void>;
 };
 
 const GroupMemberListItem = observer(function ({
   user,
-  onRemove,
+  group,
+  groupUser,
   onAdd,
 }: GroupMemberListItemProps) {
   const { t } = useTranslation();
+  const { groupUsers } = useStores();
+  const can = usePolicy(group);
+
+  const permissions = React.useMemo(
+    () =>
+      [
+        {
+          label: t("Manage"),
+          value: GroupPermission.Admin,
+        },
+        {
+          label: t("Member"),
+          value: GroupPermission.Member,
+        },
+        {
+          divider: true,
+          label: t("Remove"),
+          value: EmptySelectValue,
+        },
+      ] as Permission[],
+    [t]
+  );
 
   return (
     <ListItem
@@ -431,11 +465,40 @@ const GroupMemberListItem = observer(function ({
       image={<Avatar model={user} size={AvatarSize.Large} />}
       actions={
         <Flex align="center">
-          {onRemove && <GroupMemberMenu onRemove={onRemove} />}
-          {onAdd && (
+          {onAdd ? (
             <Button onClick={onAdd} neutral>
               {t("Add")}
             </Button>
+          ) : (
+            <div style={{ marginRight: -8 }}>
+              <InputMemberPermissionSelect
+                permissions={permissions}
+                onChange={async (
+                  permission: GroupPermission | typeof EmptySelectValue
+                ) => {
+                  try {
+                    if (permission === EmptySelectValue) {
+                      await groupUsers.delete({
+                        userId: user.id,
+                        groupId: group.id,
+                      });
+                    } else {
+                      await groupUsers.update({
+                        userId: user.id,
+                        groupId: group.id,
+                        permission,
+                      });
+                    }
+                  } catch (err) {
+                    toast.error(err.message);
+                    return false;
+                  }
+                  return true;
+                }}
+                disabled={!can.update}
+                value={groupUser?.permission}
+              />
+            </div>
           )}
         </Flex>
       }

app/stores/CollectionsStore.ts

@@ -1,5 +1,4 @@
 import invariant from "invariant";
-import find from "lodash/find";
 import isEmpty from "lodash/isEmpty";
 import orderBy from "lodash/orderBy";
 import sortBy from "lodash/sortBy";
@@ -186,7 +185,7 @@ export default class CollectionsStore extends Store<Collection> {
       statusFilter: [CollectionStatusFilter.Archived],
     });
 
-  get(id: string): Collection | undefined {
+  get(id: string = ""): Collection | undefined {
     return (
       this.data.get(id) ??
       this.orderedData.find((collection) => id.endsWith(collection.urlId))
@@ -242,10 +241,6 @@ export default class CollectionsStore extends Store<Collection> {
     return this.orderedData.map((collection) => collection.asNavigationNode);
   }
 
-  getByUrl(url: string): Collection | null | undefined {
-    return find(this.orderedData, (col: Collection) => url.endsWith(col.urlId));
-  }
-
   async delete(collection: Collection) {
     await super.delete(collection);
     await this.rootStore.documents.fetchRecentlyUpdated();

app/stores/DocumentsStore.ts

@@ -1,7 +1,6 @@
 import invariant from "invariant";
 import compact from "lodash/compact";
 import filter from "lodash/filter";
-import find from "lodash/find";
 import omitBy from "lodash/omitBy";
 import orderBy from "lodash/orderBy";
 import { observable, action, computed, runInAction } from "mobx";
@@ -205,10 +204,10 @@ export default class DocumentsStore extends Store<Document> {
   }
 
   get(id: string): Document | undefined {
-    return (
-      this.data.get(id) ??
-      this.orderedData.find((doc) => id.endsWith(doc.urlId))
-    );
+    return id
+      ? (this.data.get(id) ??
+          this.orderedData.find((doc) => id.endsWith(doc.urlId)))
+      : undefined;
   }
 
   @computed
@@ -460,7 +459,7 @@ export default class DocumentsStore extends Store<Document> {
 
   @action
   prefetchDocument = async (id: string) => {
-    if (!this.data.get(id) && !this.getByUrl(id)) {
+    if (!this.get(id)) {
       return this.fetch(id, {
         prefetch: true,
       });
@@ -746,12 +745,6 @@ export default class DocumentsStore extends Store<Document> {
     return subscription?.delete();
   };
 
-  getByUrl = (url = ""): Document | undefined =>
-    find(
-      this.orderedData,
-      (doc) => url.endsWith(doc.urlId) || url.endsWith(doc.id)
-    );
-
   getCollectionForDocument(document: Document) {
     return document.collectionId
       ? this.rootStore.collections.get(document.collectionId)

app/stores/GroupUsersStore.ts

@@ -3,6 +3,7 @@ import filter from "lodash/filter";
 import { action, runInAction } from "mobx";
 import GroupUser from "~/models/GroupUser";
 import { PaginationParams } from "~/types";
+import { GroupPermission } from "@shared/types";
 import { client } from "~/utils/ApiClient";
 import RootStore from "./RootStore";
 import Store, {
@@ -12,7 +13,7 @@ import Store, {
 } from "./base/Store";
 
 export default class GroupUsersStore extends Store<GroupUser> {
-  actions = [RPCAction.Create, RPCAction.Delete];
+  actions = [RPCAction.Create, RPCAction.Update, RPCAction.Delete];
 
   constructor(rootStore: RootStore) {
     super(rootStore, GroupUser);
@@ -43,10 +44,19 @@ export default class GroupUsersStore extends Store<GroupUser> {
   };
 
   @action
-  async create({ groupId, userId }: { groupId: string; userId: string }) {
+  async create({
+    groupId,
+    userId,
+    permission = GroupPermission.Member,
+  }: {
+    groupId: string;
+    userId: string;
+    permission?: GroupPermission;
+  }) {
     const res = await client.post("/groups.add_user", {
       id: groupId,
       userId,
+      permission,
     });
     invariant(res?.data, "Group Membership data should be available");
     res.data.users.forEach(this.rootStore.users.add);
@@ -70,6 +80,29 @@ export default class GroupUsersStore extends Store<GroupUser> {
     });
   }
 
+  @action
+  async update({
+    groupId,
+    userId,
+    permission,
+  }: {
+    groupId: string;
+    userId: string;
+    permission?: GroupPermission;
+  }) {
+    const res = await client.post("/groups.update_user", {
+      id: groupId,
+      userId,
+      permission,
+    });
+    invariant(res?.data, "Group Membership data should be available");
+    res.data.users.forEach(this.rootStore.users.add);
+    res.data.groups.forEach(this.rootStore.groups.add);
+
+    const groupMemberships = res.data.groupMemberships.map(this.add);
+    return groupMemberships[0];
+  }
+
   @action
   removeGroupMemberships = (groupId: string) => {
     this.data.forEach((_, key) => {

app/stores/SharesStore.ts

@@ -167,9 +167,9 @@ export default class SharesStore extends Store<Share> {
     find(this.orderedData, (share) => share.documentId === documentId);
 
   get(id: string): Share | undefined {
-    return (
-      this.data.get(id) ??
-      this.orderedData.find((share) => id.endsWith(share.urlId))
-    );
+    return id
+      ? (this.data.get(id) ??
+          this.orderedData.find((share) => id.endsWith(share.urlId)))
+      : undefined;
   }
 }

app/stores/base/Store.ts

@@ -276,7 +276,7 @@ export default abstract class Store<T extends Model> {
    * @param id The ID of the item to get.
    */
   get(id: string): T | undefined {
-    return this.data.get(id);
+    return id ? this.data.get(id) : undefined;
   }
 
   @action

app/types.ts

@@ -4,6 +4,7 @@ import {
   JSONValue,
   CollectionPermission,
   DocumentPermission,
+  GroupPermission,
 } from "@shared/types";
 import RootStore from "~/stores/RootStore";
 import { SidebarContextType } from "./components/Sidebar/components/SidebarContext";
@@ -311,7 +312,11 @@ export const EmptySelectValue = "__empty__";
 
 export type Permission = {
   label: string;
-  value: CollectionPermission | DocumentPermission | typeof EmptySelectValue;
+  value:
+    | CollectionPermission
+    | DocumentPermission
+    | GroupPermission
+    | typeof EmptySelectValue;
   divider?: boolean;
 };
 

app/utils/ApiClient.ts

@@ -2,7 +2,7 @@ import retry from "fetch-retry";
 import trim from "lodash/trim";
 import queryString from "query-string";
 import EDITOR_VERSION from "@shared/editor/version";
-import { JSONObject } from "@shared/types";
+import { JSONObject, Scope } from "@shared/types";
 import stores from "~/stores";
 import Logger from "./Logger";
 import download from "./download";
@@ -20,6 +20,9 @@ import {
   UnprocessableEntityError,
   UpdateRequiredError,
 } from "./errors";
+import { getCookie } from "tiny-cookie";
+import { CSRF } from "@shared/constants";
+import AuthenticationHelper from "@shared/helpers/AuthenticationHelper";
 
 type Options = {
   baseUrl?: string;
@@ -105,6 +108,20 @@ class ApiClient {
       ...options?.headers,
     };
 
+    // Add CSRF token to headers for mutating requests
+    const isModifyingRequest = ["POST", "PUT", "PATCH", "DELETE"].includes(
+      method
+    );
+    const canAccessWithReadOnly = AuthenticationHelper.canAccess(path, [
+      Scope.Read,
+    ]);
+    if (isModifyingRequest && !canAccessWithReadOnly) {
+      const csrfToken = getCookie(CSRF.cookieName);
+      if (csrfToken) {
+        headerOptions[CSRF.headerName] = csrfToken;
+      }
+    }
+
     // for multipart forms or other non JSON requests fetch
     // populates the Content-Type without needing to explicitly
     // set it.
@@ -213,6 +230,12 @@ class ApiClient {
         });
       }
 
+      if (error.error === "csrf_error") {
+        throw new AuthorizationError(
+          "CSRF token invalid, please try reloading."
+        );
+      }
+
       throw new AuthorizationError(error.message);
     }
 

app/utils/routeHelpers.ts

@@ -33,7 +33,7 @@ export function settingsPath(...args: string[]): string {
 
 export function commentPath(document: Document, comment: Comment): string {
   return `${documentPath(document)}?commentId=${comment.id}${
-    comment.isResolved ? "&resolved=" : ""
+    comment.isResolved ? "&resolved=1" : ""
   }`;
 }
 

lint-staged.config.mjs

@@ -3,7 +3,7 @@ export default {
   // TypeScript files
   "**/*.[tj]s?(x)": [
     (f) => `prettier --write ${f.join(" ")}`,
-    (f) => (f.length > 20 ? `yarn lint` : `oxlint ${f.join(" ")}`),
+    (f) => (f.length > 20 ? `yarn lint --fix` : `oxlint ${f.join(" ")} --fix`),
     () => `yarn build:i18n`,
     () => "git add shared/i18n/locales/en_US/translation.json",
   ],

package.json

@@ -51,32 +51,32 @@
     "> 0.25%, not dead"
   ],
   "dependencies": {
-    "@aws-sdk/client-s3": "3.864.0",
-    "@aws-sdk/lib-storage": "3.864.0",
-    "@aws-sdk/s3-presigned-post": "3.864.0",
-    "@aws-sdk/s3-request-presigner": "3.864.0",
-    "@aws-sdk/signature-v4-crt": "^3.864.0",
-    "@babel/core": "^7.27.7",
+    "@aws-sdk/client-s3": "3.879.0",
+    "@aws-sdk/lib-storage": "3.879.0",
+    "@aws-sdk/s3-presigned-post": "3.879.0",
+    "@aws-sdk/s3-request-presigner": "3.879.0",
+    "@aws-sdk/signature-v4-crt": "^3.879.0",
+    "@babel/core": "^7.28.3",
     "@babel/plugin-proposal-decorators": "^7.28.0",
     "@babel/plugin-transform-class-properties": "^7.27.1",
     "@babel/plugin-transform-destructuring": "^7.28.0",
-    "@babel/plugin-transform-regenerator": "^7.28.1",
-    "@babel/preset-env": "^7.28.0",
+    "@babel/plugin-transform-regenerator": "^7.28.3",
+    "@babel/preset-env": "^7.28.3",
     "@babel/preset-react": "^7.27.1",
     "@benrbray/prosemirror-math": "^0.2.2",
     "@bull-board/api": "^6.7.10",
     "@bull-board/koa": "^6.12.0",
-    "@css-inline/css-inline-wasm": "^0.14.3",
+    "@css-inline/css-inline-wasm": "^0.17.0",
     "@dnd-kit/core": "^6.3.1",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",
-    "@dotenvx/dotenvx": "^1.48.4",
+    "@dotenvx/dotenvx": "^1.49.0",
     "@emoji-mart/data": "^1.2.1",
     "@fast-csv/parse": "^5.0.5",
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
     "@fortawesome/free-brands-svg-icons": "^6.7.2",
     "@fortawesome/free-solid-svg-icons": "^6.7.2",
-    "@fortawesome/react-fontawesome": "^0.2.3",
+    "@fortawesome/react-fontawesome": "^0.2.6",
     "@getoutline/react-roving-tabindex": "^3.2.4",
     "@hocuspocus/extension-redis": "1.1.2",
     "@hocuspocus/extension-throttle": "1.1.2",
@@ -84,22 +84,23 @@
     "@hocuspocus/server": "1.1.2",
     "@joplin/turndown-plugin-gfm": "^1.0.49",
     "@juggle/resize-observer": "^3.4.0",
-    "@linear/sdk": "^39.0.0",
+    "@linear/sdk": "^39.2.1",
     "@node-oauth/oauth2-server": "^5.2.0",
     "@notionhq/client": "^2.3.0",
     "@octokit/auth-app": "^6.1.4",
     "@octokit/webhooks": "^13.9.1",
     "@outlinewiki/koa-passport": "^4.2.1",
     "@outlinewiki/passport-azure-ad-oauth2": "^0.1.0",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-one-time-password-field": "^0.1.7",
-    "@radix-ui/react-popover": "^1.1.14",
-    "@radix-ui/react-select": "^2.1.4",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-one-time-password-field": "^0.1.8",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@radix-ui/react-visually-hidden": "^1.2.2",
     "@sentry/node": "^7.120.4",
     "@sentry/react": "^7.120.4",
@@ -123,15 +124,15 @@
     "content-disposition": "^0.5.4",
     "cookie": "^0.7.0",
     "copy-to-clipboard": "^3.3.3",
-    "core-js": "^3.37.0",
+    "core-js": "^3.45.1",
     "crypto-js": "^4.2.0",
     "datadog-metrics": "^0.12.1",
     "date-fns": "^3.6.0",
-    "dd-trace": "^5.62.0",
+    "dd-trace": "^5.64.0",
     "diff": "^5.2.0",
     "email-providers": "^1.14.0",
     "emoji-mart": "^5.6.0",
-    "emoji-regex": "^10.4.0",
+    "emoji-regex": "^10.5.0",
     "es6-error": "^4.1.1",
     "fast-deep-equal": "^3.1.3",
     "fetch-retry": "^5.0.6",
@@ -170,7 +171,7 @@
     "markdown-it": "^14.1.0",
     "markdown-it-container": "^3.0.0",
     "markdown-it-emoji": "^3.0.0",
-    "mermaid": "11.9.0",
+    "mermaid": "11.10.1",
     "mime-types": "^3.0.1",
     "mobx": "^4.15.4",
     "mobx-react": "^6.3.1",
@@ -186,7 +187,7 @@
     "passport-oauth2": "^1.8.0",
     "passport-slack-oauth2": "^1.2.0",
     "patch-package": "^8.0.0",
-    "pg": "^8.15.6",
+    "pg": "^8.16.3",
     "pg-tsquery": "^8.4.2",
     "pluralize": "^8.0.0",
     "png-chunks-extract": "^1.0.0",
@@ -197,7 +198,7 @@
     "prosemirror-gapcursor": "^1.3.2",
     "prosemirror-history": "^1.4.1",
     "prosemirror-inputrules": "^1.5.0",
-    "prosemirror-keymap": "^1.2.2",
+    "prosemirror-keymap": "^1.2.3",
     "prosemirror-markdown": "^1.13.2",
     "prosemirror-model": "^1.25.2",
     "prosemirror-schema-list": "^1.5.1",
@@ -219,7 +220,6 @@
     "react-helmet-async": "^2.0.5",
     "react-hook-form": "^7.54.2",
     "react-i18next": "^12.3.1",
-    "react-medium-image-zoom": "5.2.14",
     "react-merge-refs": "^2.1.1",
     "react-portal": "^4.3.0",
     "react-router-dom": "^5.3.4",
@@ -255,17 +255,17 @@
     "styled-normalize": "^8.1.1",
     "throng": "^5.0.0",
     "tiny-cookie": "^2.5.1",
-    "tmp": "^0.2.4",
+    "tmp": "^0.2.5",
     "tunnel-agent": "^0.6.0",
-    "turndown": "^7.2.0",
-    "ukkonen": "^2.1.0",
+    "turndown": "^7.2.1",
+    "ukkonen": "^2.2.0",
     "umzug": "^3.8.2",
     "utility-types": "^3.11.0",
     "uuid": "^8.3.2",
     "validator": "13.15.15",
     "vaul": "^1.1.2",
     "vite": "npm:rolldown-vite@latest",
-    "vite-plugin-pwa": "^1.0.2",
+    "vite-plugin-pwa": "1.0.3",
     "winston": "^3.17.0",
     "ws": "^7.5.10",
     "y-indexeddb": "^9.0.11",
@@ -276,7 +276,7 @@
     "zod": "^3.25.76"
   },
   "devDependencies": {
-    "@babel/cli": "^7.28.0",
+    "@babel/cli": "^7.28.3",
     "@babel/preset-typescript": "^7.27.1",
     "@faker-js/faker": "^8.4.1",
     "@relative-ci/agent": "^4.3.1",
@@ -351,7 +351,7 @@
     "babel-plugin-tsconfig-paths-module-resolver": "^1.0.4",
     "browserslist-to-esbuild": "^1.2.0",
     "concurrently": "^8.2.2",
-    "discord-api-types": "^0.37.119",
+    "discord-api-types": "^0.38.20",
     "husky": "^8.0.3",
     "i18next-parser": "^8.13.0",
     "ioredis-mock": "^8.9.0",
@@ -365,7 +365,7 @@
     "prettier": "^3.6.2",
     "react-refresh": "^0.17.0",
     "rimraf": "^2.5.4",
-    "rollup-plugin-webpack-stats": "^2.1.3",
+    "rollup-plugin-webpack-stats": "2.1.3",
     "terser": "^5.43.1",
     "typescript": "^5.9.2",
     "yarn-deduplicate": "^6.0.2"
@@ -381,6 +381,6 @@
     "qs": "6.9.7",
     "prismjs": "1.30.0"
   },
-  "version": "0.86.1",
+  "version": "0.87.3",
   "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

plugins/email/server/auth/email.ts

@@ -16,6 +16,7 @@ import { VerificationCode } from "@server/utils/VerificationCode";
 import { signIn } from "@server/utils/authentication";
 import { getUserForEmailSigninToken } from "@server/utils/jwt";
 import * as T from "./schema";
+import { CSRF } from "@shared/constants";
 
 const router = new Router();
 
@@ -108,7 +109,22 @@ const emailCallback = async (ctx: APIContext<T.EmailCallbackReq>) => {
   // and spending the token before the user clicks on it. Instead we redirect
   // to the same URL with the follow query param added from the client side.
   if (!follow) {
-    return ctx.redirectOnClient(ctx.request.href + "&follow=true", "POST");
+    const csrfToken = ctx.cookies.get(CSRF.cookieName);
+
+    // Parse the current URL to extract existing query parameters
+    const url = new URL(ctx.request.href);
+    const searchParams = url.searchParams;
+
+    // Add new parameters
+    searchParams.set("follow", "true");
+    if (csrfToken) {
+      searchParams.set(CSRF.fieldName, csrfToken);
+    }
+
+    // Reconstruct the URL with merged parameters
+    url.search = searchParams.toString();
+
+    return ctx.redirectOnClient(url.toString(), "POST");
   }
 
   let user!: User;

plugins/notion/server/tasks/NotionAPIImportTask.ts

@@ -21,6 +21,11 @@ type ParsePageOutput = ImportTaskOutput[number] & {
 };
 
 export default class NotionAPIImportTask extends APIImportTask<IntegrationService.Notion> {
+  private skippableErrorMessages = [
+    "Database retrievals do not support linked databases",
+    "does not contain any data sources accessible by this API bot", // error msg for linked database views
+  ];
+
   /**
    * Process the Notion import task.
    * This fetches data from Notion and converts it to task output.
@@ -138,8 +143,8 @@ export default class NotionAPIImportTask extends APIImportTask<IntegrationServic
         if (
           error.code === APIErrorCode.ObjectNotFound ||
           error.code === APIErrorCode.Unauthorized ||
-          error.message.includes(
-            "Database retrievals do not support linked databases"
+          this.skippableErrorMessages.some((errorMsg) =>
+            error.message.includes(errorMsg)
           )
         ) {
           Logger.warn(

plugins/oidc/server/oidcDiscovery.ts

@@ -52,6 +52,7 @@ export async function fetchOIDCConfiguration(
         Accept: "application/json",
       },
       timeout: 10000, // 10 second timeout
+      allowPrivateIPAddress: true,
     });
 
     if (!response.ok) {