Add right-click context menu to canvas with Panels submenu and close button

[devin-ai-integration]

Description

Implements a right-click context menu system for the canvas with a "Panels" submenu and adds a close button to the left panel.

Changes:

• Wrapped the Canvas component with a context menu that appears on right-click
• Added menu items:
  • "Add Element" (disabled placeholder)
  • "Add Component" (disabled placeholder)
  • "Panels" submenu with options to open: Layers, Brand, Pages, Images, Branches
  • Copy (⌘ C)
  • Paste (⌘ V)
• Added onClose prop to LeftPanel and DesignPanel components
• Added close button (X icon) in the upper right corner of the left panel content area
• Repositioned left panel from left-0 to left-2 for better spacing

Related Issues

Link to Devin run: https://app.devin.ai/sessions/f53167fe6d834515acc03bfe0f22f16d
Requested by: [email protected]

Type of Change

• Bug fix
• New feature
• Documentation
• Refactor
• Other (please describe):

Testing

⚠️ Not visually tested - Changes were implemented without running the application locally. Manual testing required to verify:

1. Right-click on the canvas background shows the context menu
2. "Panels" submenu expands and clicking each option opens the corresponding left panel tab
3. Close button (X) appears in the upper right corner of the left panel content area
4. Close button successfully closes the left panel when clicked
5. Copy/Paste menu items trigger the correct editor actions
6. Left panel positioning with left-2 looks correct
7. Context menu doesn't conflict with existing right-click menus on frames/elements

Screenshots (if applicable)

N/A - Visual testing required

Additional Notes

Important review points:

• "Add Element" and "Add Component" menu items are intentionally disabled placeholders (no functionality implemented)
• Used Icons.ViewGrid instead of Icons.LayoutGrid and Icons.CrossS instead of Icons.Cross2 based on available icons in the component library
• Copy/Paste handlers use void operator to handle promise returns correctly
• One pre-existing lint warning about any type in the tabs array was not fixed (line 22 of design-panel/index.tsx)
• The context menu wraps the entire Canvas component - verify this doesn't interfere with existing frame-level right-click menus

Testing priority:

1. Verify context menu appears and functions correctly
2. Test Panels submenu opens correct tabs
3. Verify close button positioning and functionality
4. Check for any visual regressions with left panel positioning

---

Important

Add right-click context menu to canvas with 'Panels' submenu and close button for left panel, requiring manual visual testing.

• Context Menu:
  • Added right-click context menu to Canvas in main.tsx with 'Panels' submenu and copy/paste options.
  • 'Add Element' and 'Add Component' are disabled placeholders.
• Left Panel:
  • Added onClose prop to LeftPanel and DesignPanel components.
  • Added close button (X icon) to DesignPanel.
  • Adjusted left panel position from left-0 to left-2 in main.tsx.
• Misc:
  • Used Icons.ViewGrid and Icons.CrossS for menu and close button icons.
  • Copy/Paste handlers in main.tsx use void operator for promise handling.
  • Manual testing required for visual verification and functionality.

^{This description was created by for 6e09cf4. You can customize this summary. It will automatically update as commits are pushed.}

[devin-ai-integration]

🤖 Devin AI Engineer

I'll be helping with this pull request! Here's what you should know:

✅ I will automatically:

• Address comments on this PR. Add '(aside)' to your comment to have me ignore it.
• Look at CI failures and help fix them

Note: I can only respond to comments from users who have write access to this repository.

⚙️ Control Options:

• Disable automatic comment and CI monitoring

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
web	Ready	Preview	Comment	Nov 10, 2025 7:04pm

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 10, 2025 7:04pm

[supabase]

This pull request has been ignored for the connected project wowaemfasoptxrdjhilu because there are no changes detected in apps/backend/supabase directory. You can change this behaviour in Project Integrations Settings ↗︎.

---

Preview Branches by Supabase.
Learn more about Supabase Branching ↗︎.

[coderabbitai]

Important

Review skipped

Bot user detected.

To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

---

_{Comment @coderabbitai help to get the list of available commands and usage tips.}