Menus are Radix's, and the device filter is Radix's Tabs

The right-click menus of a home card, a community card, a tab, Home and a
canvas tab were popovers placed at the pointer by hand, with a pointerup
workaround for macOS opening a menu on the press. They are Radix's
ContextMenu now, which places, dismisses and navigates them by keyboard.
The model picker and the agent menu are its DropdownMenu, radio groups. The
effort slider and the history list stay native popovers: the slider wants
the arrow keys a menu would take.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

Author: Jing-yilin

canvas/src/CanvasStrip.tsx

@@ -6,7 +6,14 @@ import { canvasIndex, LAYOUT_CHANGED } from "./canvasIndex";
 import { groundEditable, setGround, useGround } from "./canvasGround";
 import { ViewIcon } from "./CanvasTabBar";
 import { shareUrl, sheetPageUrl, type CanvasTab } from "./canvasUrl";
-import { confirmTrash, openMenu, REVEAL, TRASH } from "./contextMenu";
+import {
+  confirmTrash,
+  MenuItem,
+  MenuSeparator,
+  REVEAL,
+  RightClickMenu,
+  TRASH,
+} from "./contextMenu";
 import { DocModeSwitch } from "./DocTab";
 import { FileText, LogoFigma, Plus } from "./geistIcons";
 
@@ -39,8 +46,6 @@ export function CanvasStrip() {
   // Keyed by the page. The project's own view with no canvas has none, and the default ground.
   const page = activeTab.kind === "canvas" ? pageOf(activeTab) : undefined;
   const ground = useGround(editor, page);
-  const [target, setTarget] = useState<CanvasTab | null>(null);
-  const menu = useRef<HTMLDivElement>(null);
   const [renaming, setRenaming] = useState(() => sessionStorage.getItem(RENAME_KEY));
   // A name typed lands as a layout change, which the tab reads through the index.
   const [, relabel] = useReducer((n: number) => n + 1, 0);
@@ -62,7 +67,6 @@ export function CanvasStrip() {
     if (editor && made.current) openTab({ kind: "canvas", slug: made.current });
     if (editor) made.current = null;
   }, [editor, openTab]);
-  const own = target?.kind === "canvas" && tab.kind !== "example" && canvasIndex().served;
   const folder = async (canvas: string, action: "reveal" | "delete") => {
     const response = await fetch(`${import.meta.env.BASE_URL}__sp/canvas-folder`, {
       method: "POST",
@@ -72,6 +76,45 @@ export function CanvasStrip() {
     if (!response.ok) return alert(await response.text());
     if (action === "delete") window.location.reload();
   };
+  // Right-click menu: Copy link copies the window's address for that view. A canvas of the
+  // project's own also shows its folder, or bins it after asking.
+  const menuFor = (target: CanvasTab) => (
+    <>
+      <MenuItem
+        onSelect={() =>
+          navigator.clipboard.writeText(
+            shareUrl(
+              new URL(tabUrl({ ...tab, view: target }), location.href).href,
+              canvasIndex().title,
+            ),
+          )
+        }
+      >
+        Copy link
+      </MenuItem>
+      {target.kind === "canvas" && tab.kind !== "example" && canvasIndex().served && (
+        <>
+          <MenuItem onSelect={() => folder(target.slug, "reveal")}>{REVEAL}</MenuItem>
+          <MenuSeparator />
+          <MenuItem
+            className="sp-context-menu__danger"
+            onSelect={async () => {
+              if (
+                await confirmTrash(
+                  shortName(target.slug),
+                  `${canvasIndex().canvasesDir}/${target.slug}`,
+                  "Its boards and everything pasted on it go with it.",
+                )
+              )
+                void folder(target.slug, "delete");
+            }}
+          >
+            {TRASH}
+          </MenuItem>
+        </>
+      )}
+    </>
+  );
   const rename = (canvas: string, name: string) => {
     sessionStorage.removeItem(RENAME_KEY);
     setRenaming(null);
@@ -86,18 +129,18 @@ export function CanvasStrip() {
   return (
     <nav className="sp-canvas-tabs" aria-label="Canvases">
       {docsOf(tab).map(({ name, slug }) => (
-        <button
-          key={slug}
-          type="button"
-          className="sp-canvas-tab"
-          aria-current={activeTab.kind === "doc" && activeTab.slug === slug ? "page" : undefined}
-          title={name}
-          onClick={() => openTab({ kind: "doc", slug })}
-          onContextMenu={(event) => openMenu(event, menu, () => setTarget({ kind: "doc", slug }))}
-        >
-          <FileText />
-          {name.replace(/\.md$/i, "")}
-        </button>
+        <RightClickMenu key={slug} menu={menuFor({ kind: "doc", slug })}>
+          <button
+            type="button"
+            className="sp-canvas-tab"
+            aria-current={activeTab.kind === "doc" && activeTab.slug === slug ? "page" : undefined}
+            title={name}
+            onClick={() => openTab({ kind: "doc", slug })}
+          >
+            <FileText />
+            {name.replace(/\.md$/i, "")}
+          </button>
+        </RightClickMenu>
       ))}
       {canvases.map((canvas) =>
         canvas === renaming ? (
@@ -121,23 +164,21 @@ export function CanvasStrip() {
             />
           </label>
         ) : (
-        <button
-          key={canvas}
-          type="button"
-          className="sp-canvas-tab"
-          aria-current={canvas === here ? "page" : undefined}
-          data-working={busy.includes(canvas) || undefined}
-          onClick={() => openTab({ kind: "canvas", slug: canvas })}
-          onDoubleClick={() =>
-            tab.kind !== "example" && canvasIndex().served && setRenaming(canvas)
-          }
-          onContextMenu={(event) =>
-            openMenu(event, menu, () => setTarget({ kind: "canvas", slug: canvas }))
-          }
-        >
-          <ViewIcon view={{ kind: "canvas", slug: canvas }} />
-          {shortName(canvas)}
-        </button>
+          <RightClickMenu key={canvas} menu={menuFor({ kind: "canvas", slug: canvas })}>
+            <button
+              type="button"
+              className="sp-canvas-tab"
+              aria-current={canvas === here ? "page" : undefined}
+              data-working={busy.includes(canvas) || undefined}
+              onClick={() => openTab({ kind: "canvas", slug: canvas })}
+              onDoubleClick={() =>
+                tab.kind !== "example" && canvasIndex().served && setRenaming(canvas)
+              }
+            >
+              <ViewIcon view={{ kind: "canvas", slug: canvas }} />
+              {shortName(canvas)}
+            </button>
+          </RightClickMenu>
         ),
       )}
       {tab.kind !== "example" && canvasIndex().served && (
@@ -186,61 +227,6 @@ export function CanvasStrip() {
           <LogoFigma />
         </a>
       )}
-      {/* Right-click menu: Copy link copies the window's address for that view. A canvas of the
-          project's own also shows its folder, or bins it after asking. */}
-      <div
-        ref={menu}
-        popover="auto"
-        className="sp-context-menu"
-        role="menu"
-        onClickCapture={(event) => event.currentTarget.hidePopover()}
-      >
-        <button
-          type="button"
-          role="menuitem"
-          className="sp-menu-row"
-          onClick={() =>
-            navigator.clipboard.writeText(
-              shareUrl(
-                new URL(tabUrl({ ...tab, view: target! }), location.href).href,
-                canvasIndex().title,
-              ),
-            )
-          }
-        >
-          Copy link
-        </button>
-        {own && (
-          <>
-            <button
-              type="button"
-              role="menuitem"
-              className="sp-menu-row"
-              onClick={() => folder(target.slug, "reveal")}
-            >
-              {REVEAL}
-            </button>
-            <hr />
-            <button
-              type="button"
-              role="menuitem"
-              className="sp-menu-row sp-context-menu__danger"
-              onClick={async () => {
-                if (
-                  await confirmTrash(
-                    shortName(target.slug),
-                    `${canvasIndex().canvasesDir}/${target.slug}`,
-                    "Its boards and everything pasted on it go with it.",
-                  )
-                )
-                  void folder(target.slug, "delete");
-              }}
-            >
-              {TRASH}
-            </button>
-          </>
-        )}
-      </div>
     </nav>
   );
 }