fix(composer): make queued message menu work on iOS (#489)

Co-authored-by: Vladislav Forsh <forsh@eot.games>
Co-authored-by: Thomas Ricouard <ricouard77@gmail.com>

Author: 3 people

src/features/composer/components/ComposerQueue.test.tsx

@@ -0,0 +1,49 @@
+/** @vitest-environment jsdom */
+import { fireEvent, render, screen } from "@testing-library/react";
+import { cleanup } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { QueuedMessage } from "../../../types";
+import { ComposerQueue } from "./ComposerQueue";
+
+const queuedItem: QueuedMessage = {
+  id: "queued-1",
+  text: "Add link to GitHub repo too",
+  createdAt: 1,
+};
+
+describe("ComposerQueue", () => {
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("opens inline menu on queue item action tap", () => {
+    render(<ComposerQueue queuedMessages={[queuedItem]} />);
+
+    expect(screen.queryByText("Edit")).toBeNull();
+    fireEvent.click(screen.getByLabelText("Queue item menu"));
+    expect(screen.getByText("Edit")).toBeTruthy();
+    expect(screen.getByText("Delete")).toBeTruthy();
+  });
+
+  it("calls edit callback for selected queued item", () => {
+    const onEditQueued = vi.fn();
+    render(<ComposerQueue queuedMessages={[queuedItem]} onEditQueued={onEditQueued} />);
+
+    fireEvent.click(screen.getByLabelText("Queue item menu"));
+    fireEvent.click(screen.getByText("Edit"));
+
+    expect(onEditQueued).toHaveBeenCalledTimes(1);
+    expect(onEditQueued).toHaveBeenCalledWith(queuedItem);
+  });
+
+  it("calls delete callback for selected queued item", () => {
+    const onDeleteQueued = vi.fn();
+    render(<ComposerQueue queuedMessages={[queuedItem]} onDeleteQueued={onDeleteQueued} />);
+
+    fireEvent.click(screen.getByLabelText("Queue item menu"));
+    fireEvent.click(screen.getByText("Delete"));
+
+    expect(onDeleteQueued).toHaveBeenCalledTimes(1);
+    expect(onDeleteQueued).toHaveBeenCalledWith(queuedItem.id);
+  });
+});

src/features/composer/components/ComposerQueue.tsx

@@ -1,8 +1,11 @@
 import { useCallback } from "react";
-import { LogicalPosition } from "@tauri-apps/api/dpi";
-import { Menu, MenuItem } from "@tauri-apps/api/menu";
-import { getCurrentWindow } from "@tauri-apps/api/window";
+import type { MouseEvent as ReactMouseEvent } from "react";
 import type { QueuedMessage } from "../../../types";
+import {
+  PopoverMenuItem,
+  PopoverSurface,
+} from "../../design-system/components/popover/PopoverPrimitives";
+import { useMenuController } from "../../app/hooks/useMenuController";
 
 type ComposerQueueProps = {
   queuedMessages: QueuedMessage[];
@@ -17,27 +20,6 @@ export function ComposerQueue({
   onEditQueued,
   onDeleteQueued,
 }: ComposerQueueProps) {
-  const handleQueueMenu = useCallback(
-    async (event: React.MouseEvent, item: QueuedMessage) => {
-      event.preventDefault();
-      event.stopPropagation();
-      const { clientX, clientY } = event;
-      const editItem = await MenuItem.new({
-        text: "Edit",
-        action: () => onEditQueued?.(item),
-      });
-      const deleteItem = await MenuItem.new({
-        text: "Delete",
-        action: () => onDeleteQueued?.(item.id),
-      });
-      const menu = await Menu.new({ items: [editItem, deleteItem] });
-      const window = getCurrentWindow();
-      const position = new LogicalPosition(clientX, clientY);
-      await menu.popup(position, window);
-    },
-    [onDeleteQueued, onEditQueued],
-  );
-
   if (queuedMessages.length === 0) {
     return null;
   }
@@ -62,16 +44,63 @@ export function ComposerQueue({
                 ? ` · ${item.images.length} image${item.images.length === 1 ? "" : "s"}`
                 : ""}
             </span>
-            <button
-              className="composer-queue-menu"
-              onClick={(event) => handleQueueMenu(event, item)}
-              aria-label="Queue item menu"
-            >
-              ...
-            </button>
+            <QueueMenuButton
+              item={item}
+              onEditQueued={onEditQueued}
+              onDeleteQueued={onDeleteQueued}
+            />
           </div>
         ))}
       </div>
     </div>
   );
 }
+
+type QueueMenuButtonProps = {
+  item: QueuedMessage;
+  onEditQueued?: (item: QueuedMessage) => void;
+  onDeleteQueued?: (id: string) => void;
+};
+
+function QueueMenuButton({ item, onEditQueued, onDeleteQueued }: QueueMenuButtonProps) {
+  const menu = useMenuController();
+  const handleToggleMenu = useCallback(
+    (event: ReactMouseEvent<HTMLButtonElement>) => {
+      event.preventDefault();
+      event.stopPropagation();
+      menu.toggle();
+    },
+    [menu],
+  );
+
+  const handleEdit = useCallback(() => {
+    menu.close();
+    onEditQueued?.(item);
+  }, [item, menu, onEditQueued]);
+
+  const handleDelete = useCallback(() => {
+    menu.close();
+    onDeleteQueued?.(item.id);
+  }, [item.id, menu, onDeleteQueued]);
+
+  return (
+    <div className="composer-queue-menu-wrap" ref={menu.containerRef}>
+      <button
+        type="button"
+        className={`composer-queue-menu${menu.isOpen ? " is-open" : ""}`}
+        onClick={handleToggleMenu}
+        aria-label="Queue item menu"
+        aria-haspopup="menu"
+        aria-expanded={menu.isOpen}
+      >
+        ...
+      </button>
+      {menu.isOpen && (
+        <PopoverSurface className="composer-queue-item-popover" role="menu">
+          <PopoverMenuItem onClick={handleEdit}>Edit</PopoverMenuItem>
+          <PopoverMenuItem onClick={handleDelete}>Delete</PopoverMenuItem>
+        </PopoverSurface>
+      )}
+    </div>
+  );
+}

src/styles/composer.css

@@ -66,10 +66,25 @@
   cursor: pointer;
 }
 
-.composer-queue-menu:hover {
+.composer-queue-menu-wrap {
+  position: relative;
+  flex: 0 0 auto;
+}
+
+.composer-queue-menu:hover,
+.composer-queue-menu.is-open {
   color: var(--text-stronger);
 }
 
+.composer-queue-item-popover {
+  position: absolute;
+  right: 0;
+  bottom: calc(100% + 4px);
+  min-width: 110px;
+  padding: 4px;
+  z-index: 40;
+}
+
 .composer-followup-hint {
   display: flex;
   flex-direction: column;