feat: Add export/import buttons to mode selector popover (#6320)

[hannesrudolph]

Description

import.export.modes.mp4

Fixes #6320

This PR adds export/import functionality directly to the mode selector popover, allowing users to manage modes without navigating away from their current context.

Changes Made

• Added Export Buttons: Each mode in the popover now has an export button that appears on hover

  • Uses the Upload icon from lucide-react
  • Shows loading state while exporting
  • Sends exportMode message to VSCode backend

• Added Import Button: Added an import button in the popover footer

  • Styled to match existing IconButton components for perfect alignment
  • Uses the Download icon from lucide-react
  • Opens an import dialog when clicked

• Import Dialog: Implemented inline import dialog matching ModesView pattern

  • Allows selection between project-level and global import
  • Shows loading state during import
  • Sends importMode message to VSCode backend

• State Management: Added necessary state variables for tracking operations

  • isExporting: Tracks which mode is being exported
  • isImporting: Tracks import operation status
  • showImportDialog: Controls import dialog visibility

Testing

• ✅ All existing ModeSelector tests pass (7 tests)
• ✅ Export/import functionality uses the same message protocol as ModesView
• ✅ Visual alignment verified - import button perfectly aligns with other footer buttons

Verification of Acceptance Criteria

• ✅ Export button added for each mode (visible on hover)
• ✅ Import button added to popover footer
• ✅ Import dialog allows selection of import level (project/global)
• ✅ Loading states implemented for both operations
• ✅ Uses existing backend message handlers (no backend changes needed)
• ✅ Maintains consistency with ModesView implementation

Screenshots/Demo

The import button is now perfectly aligned with the marketplace and settings buttons in the popover footer.

Checklist

• Issue Linked: This PR is linked to an approved GitHub Issue (Mode Selector: Add export/import buttons to popover for quick mode management #6320)
• Scope: My changes are focused on the linked issue
• Self-Review: I have performed a thorough self-review of my code
• Testing: Existing tests pass, functionality verified
• Documentation Impact: No documentation updates required
• Contribution Guidelines: I have read and agree to the Contributor Guidelines

---

Important

Adds export/import buttons to ModeSelector popover, enabling mode management directly from the UI with new state management and tests.

• Behavior:
  • Adds export button to each mode in ModeSelector.tsx, visible on hover, using Upload icon.
  • Adds import button to popover footer, using Download icon, opens import dialog.
  • Import dialog allows project/global selection, shows loading state, and sends importMode message.
• State Management:
  • Adds isExporting, isImporting, showImportDialog state variables in ModeSelector.tsx.
• Testing:
  • New tests in ModeSelector.export-import.spec.tsx for export/import button visibility, message sending, and dialog behavior.
  • Tests handle success, error, and cancellation scenarios for both export and import.
• Misc:
  • Uses existing backend message handlers, no backend changes needed.

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

[Copilot]

Pull Request Overview

This PR adds export and import functionality directly to the mode selector popover, allowing users to manage modes without leaving their current context. The implementation follows the existing ModesView pattern for consistency.

• Added hover-triggered export buttons for each mode using the Upload icon
• Added an import button to the popover footer that opens an inline dialog
• Implemented state management for tracking export/import operations with loading states

[daniel-lxs]

Thank you for your contribution! I've reviewed the changes and found that all the previous review comments have been successfully addressed. The implementation looks good overall with just 2 minor suggestions for improvement.