Skip to content

Add preview-native context menus and fix submenu rendering in frontend/preview#3035

Merged
sawka merged 4 commits intomainfrom
copilot/create-preview-contextmenu-component
Mar 12, 2026
Merged

Add preview-native context menus and fix submenu rendering in frontend/preview#3035
sawka merged 4 commits intomainfrom
copilot/create-preview-contextmenu-component

Conversation

Copy link
Contributor

Copilot AI commented Mar 11, 2026

frontend/preview was still routing context menus through the Electron-backed production path, so preview menus did not behave correctly. This change adds a preview-native menu renderer, then tightens its sizing and fixes submenu clipping so nested menus are fully visible and usable.

  • Preview-native context menu host

    • Adds frontend/preview/preview-contextmenu.tsx
    • Renders context menus directly in the preview app via @floating-ui/react
    • Supports existing ContextMenuItem features already used by previews:
      • nested submenus
      • checkbox/radio states
      • separators / headers
      • click handlers
      • outside-click / escape dismissal
  • Mock env integration

    • Wires the mock WaveEnv.showContextMenu path to the preview renderer
    • Keeps existing preview callers unchanged (env.showContextMenu(menu, e))
  • Preview root mounting

    • Mounts a single shared context menu host in frontend/preview/preview.tsx
    • Makes tabbar/widgets previews work without any Electron dependency
  • Menu sizing + submenu visibility

    • Reduces menu width, font size, and row padding for a denser menu
    • Switches the menu panel to overflow-visible so submenu panels are not clipped by the parent container
// frontend/preview/mock/mockwaveenv.ts
showContextMenu: overrides.showContextMenu ?? showPreviewContextMenu,

Preview context menu with visible submenu


✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Mar 11, 2026

Deploying waveterm with  Cloudflare Pages  Cloudflare Pages

Latest commit: 3fec303
Status: ✅  Deploy successful!
Preview URL: https://52d27fae.waveterm.pages.dev
Branch Preview URL: https://copilot-create-preview-conte.waveterm.pages.dev

View logs

Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
Copilot AI changed the title [WIP] Add preview context menu component for mock environment Add working preview-server context menus with nested submenu support Mar 11, 2026
Co-authored-by: sawka <2722291+sawka@users.noreply.github.com>
Copilot AI changed the title Add working preview-server context menus with nested submenu support Add preview-native context menus and fix submenu rendering in frontend/preview Mar 11, 2026
@sawka sawka marked this pull request as ready for review March 11, 2026 23:50

function activateItem(item: ContextMenuItem, closeMenu: () => void): void {
closeMenu();
item.click?.();
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

WARNING: Potential uncaught exception - if item.click?.() throws, the menu is already closed (line 78) and the error propagates up without being caught. Consider wrapping in try-catch to handle errors gracefully and ensure the menu state remains consistent.

@kilo-code-bot
Copy link
Contributor

kilo-code-bot bot commented Mar 11, 2026

Code Review Summary

Status: 1 Issue Found | Recommendation: Address before merge

Overview

Severity Count
CRITICAL 0
WARNING 1
SUGGESTION 0
Issue Details (click to expand)

WARNING

File Line Issue
frontend/preview/preview-contextmenu.tsx 79 Potential uncaught exception in activateItem - if item.click?.() throws, the menu is already closed and the error propagates without being caught
Files Reviewed (4 files)
  • frontend/preview/preview-contextmenu.tsx - 1 issue
  • frontend/preview/mock/mockwaveenv.ts - no issues
  • frontend/preview/preview.tsx - no issues
  • frontend/preview/mock/mockwaveenv.test.ts - no issues

Other Observations:

The new context menu implementation (preview-contextmenu.tsx) uses floating-ui/react for positioning, which is a solid choice. The component properly handles:

  • Empty menu items
  • Keyboard events (Escape to close)
  • Pointer events (click outside to close)
  • Submenus with proper path tracking
  • Accessibility attributes (role, aria-disabled, etc.)

The test file correctly mocks the showPreviewContextMenu function and verifies it's called by default when no override is provided.

@sawka sawka merged commit 82048b6 into main Mar 12, 2026
7 checks passed
@sawka sawka deleted the copilot/create-preview-contextmenu-component branch March 12, 2026 02:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants