Insert menu context menu

src/frontend/app-common/app-menu.tsx

@@ -1,5 +1,7 @@
-import { ReactNode } from "react";
-import { FloatingPosition, Menu } from "@mantine/core";
+import { PropsWithChildren, ReactNode } from "react";
+import { FloatingPosition, Menu, ActionIcon } from "@mantine/core";
+import { IconDots } from "@tabler/icons-react";
+import { IconSize } from "../common/style-constants";
 
 interface AppContextMenuProps {
     menuItems: ReactNode;
@@ -56,3 +58,22 @@ export function AppContextMenu(props: AppContextMenuProps): ReactNode {
         </Menu>
     );
 }
+
+/**
+ * An explicit button which opens a menu with the given items. Used alongside
+ * the right-click context menu so the menu is reachable without a right-click.
+ */
+export function MenuButton(props: PropsWithChildren): ReactNode {
+    return (
+        <AppContextMenu controlledByButton menuItems={props.children}>
+            <ActionIcon
+                variant="subtle"
+                color="gray"
+                title="View options"
+                onClick={(e) => e.stopPropagation()}
+            >
+                <IconDots size={IconSize.MEDIUM} />
+            </ActionIcon>
+        </AppContextMenu>
+    );
+}

src/frontend/cards/card-components.tsx

@@ -1,6 +1,5 @@
-import { ActionIcon, Badge, Group, Menu, Table, Text } from "@mantine/core";
+import { Badge, Group, Menu, Table, Text } from "@mantine/core";
 import {
-    IconDots,
     IconExternalLink,
     IconEyeOff,
     IconLink,
@@ -11,7 +10,7 @@ import {
 import { IconSize } from "../common/style-constants";
 import { copyUrlToClipboard, makeUrl, openUrlInNewTab } from "../common/url";
 import { PropsWithChildren, ReactNode, useCallback } from "react";
-import { AppContextMenu } from "../app-common/app-menu";
+import { AppContextMenu, MenuButton } from "../app-common/app-menu";
 import { SearchHit } from "../search/search";
 import { SearchHitTitle } from "../search/search-results";
 import { CardThumbnail } from "../insert/thumbnail";
@@ -31,13 +30,14 @@ import { useReloadThumbnailMutation } from "./card-hooks";
 
 interface OpenDocumentItemsProps {
     path: DocumentPath;
+    configuration?: Configuration;
 }
 
 /**
  * Menu items which can be used to open or copy a link to a document.
  */
 export function OpenDocumentItems(props: OpenDocumentItemsProps) {
-    const url = makeUrl(props.path);
+    const url = makeUrl(props.path, props.configuration);
     return (
         <>
             <Menu.Item
@@ -219,25 +219,6 @@ export function ItemRow(props: ItemRowProps): ReactNode {
     );
 }
 
-/**
- * An explicit button which opens a menu with the given items. Used alongside
- * the right-click context menu so the menu is reachable without a right-click.
- */
-export function MenuButton(props: PropsWithChildren): ReactNode {
-    return (
-        <AppContextMenu controlledByButton menuItems={props.children}>
-            <ActionIcon
-                variant="subtle"
-                color="gray"
-                title="View options"
-                onClick={(e) => e.stopPropagation()}
-            >
-                <IconDots size={IconSize.MEDIUM} />
-            </ActionIcon>
-        </AppContextMenu>
-    );
-}
-
 /**
  * Wraps one or more admin-only menu items into an Admin submenu.
  */

src/frontend/cards/insertable-card.tsx

@@ -15,6 +15,7 @@ import {
     InsertableOut,
     LibraryOut
 } from "../../shared/api-models";
+import { Configuration } from "../../shared/configuration-models";
 import { ElementType } from "../../shared/types";
 import { SearchHit } from "../search/search";
 import {
@@ -112,26 +113,35 @@ export function InsertableCard(props: InsertableCardProps): ReactNode {
 interface InsertableMenuItemsProps {
     favorite: Favorite | undefined;
     insertable: InsertableOut;
+    inInsertMenu?: boolean;
+    configuration?: Configuration;
 }
 
 export function InsertableMenuItems(
     props: InsertableMenuItemsProps
 ): ReactNode {
-    const { favorite, insertable } = props;
+    const { favorite, insertable, inInsertMenu, configuration } = props;
 
     return (
         <>
-            <QuickInsertItems
-                insertable={insertable}
-                isFavorite={favorite !== undefined}
-            />
-            <Menu.Divider />
+            {!inInsertMenu && (
+                <>
+                    <QuickInsertItems
+                        insertable={insertable}
+                        isFavorite={favorite !== undefined}
+                    />
+                    <Menu.Divider />
+                </>
+            )}
             <FavoriteInsertableItem
                 favorite={favorite}
                 insertable={insertable}
             />
             <Menu.Divider />
-            <OpenDocumentItems path={insertable.path} />
+            <OpenDocumentItems
+                path={insertable.path}
+                configuration={configuration}
+            />
             <AdminOptionsSubmenu>
                 <InsertableAdminContextMenu insertable={insertable} />
             </AdminOptionsSubmenu>

src/frontend/common/url.tsx

@@ -11,6 +11,10 @@ import { notifications } from "@mantine/notifications";
 import { IconLink } from "@tabler/icons-react";
 import { IconSize } from "./style-constants";
 
+export function makeUrl(
+    path: DocumentPath,
+    configuration?: Record<string, string>
+): string;
 export function makeUrl(path: DocumentPath): string;
 export function makeUrl(path: InstancePath): string;
 export function makeUrl(path: ElementPath): string;

src/frontend/insert/insert-menu.tsx

@@ -16,6 +16,8 @@ import {
     NotificationAction,
     renderNotification
 } from "../common/notifications";
+import { MenuButton } from "../app-common/app-menu";
+import { InsertableMenuItems } from "../cards/insertable-card";
 import { ConfigurationWrapper } from "./configurations";
 import { useInsertMutation } from "./insert-hooks";
 import { Configuration } from "../../shared/configuration-models";
@@ -94,6 +96,14 @@ function InsertMenuContent(props: InsertMenuContentProps): ReactNode {
             {parameters}
             <Group justify="space-between" mt="md" wrap="nowrap">
                 <FavoriteButton favorite={favorite} insertable={insertable} />
+                <MenuButton>
+                    <InsertableMenuItems
+                        favorite={favorite}
+                        insertable={insertable}
+                        inInsertMenu
+                        configuration={configuration}
+                    />
+                </MenuButton>
                 <InsertButtons
                     insertable={insertable}
                     configuration={configuration}

src/frontend/routes/app/groups/$groupId.tsx

@@ -24,8 +24,8 @@ import { hasEditorAccess } from "../../../../shared/types";
 import { filterInsertables } from "../../../search/filter";
 import { GroupMenuItems } from "../../../groups/group-card";
 import { InsertableCard } from "../../../cards/insertable-card";
-import { MenuButton, ItemTable } from "../../../cards/card-components";
-import { AppContextMenu } from "../../../app-common/app-menu";
+import { ItemTable } from "../../../cards/card-components";
+import { AppContextMenu, MenuButton } from "../../../app-common/app-menu";
 import { SearchCallout } from "../../../search/search-errors";
 import {
     PageError,