[WIP] Add close button to ApiKeyManager modal

[Copilot]

Summary: Add Close Button to ApiKeyManager Modal ✅

Successfully implemented a close button (X icon) to the ApiKeyManager modal, resolving the issue where users were forced to clear their API key to dismiss the modal.

Changes Implemented

• Update components/ApiKeyManager.tsx

  • Add onClose?: () => void to the ApiKeyManagerProps interface
  • Add a close button (X icon) in the top-right corner of the modal
  • Make close button call onClose() when clicked
  • Style close button with hover effects and proper positioning
  • Ensure close button is visible in both states (with and without API key)
  • Add extra right padding (pr-14) to prevent content overlap with close button

• Update App.tsx

  • Create handleCloseApiKeyManager handler function
  • Pass onClose={handleCloseApiKeyManager} to ApiKeyManager component
  • Update initial state logic to show modal when no API key exists

• Testing & Verification

  • Build and run the application successfully
  • Verified modal appears on page load when no API key is configured
  • Verified closing the modal with the X button works correctly
  • Verified close button doesn't clear the API key
  • Captured screenshots of the UI changes

• Code Quality

  • Requested and addressed code review feedback
  • Ran security checks (CodeQL) - No issues found

Screenshot

Security Summary

No security vulnerabilities were discovered during the CodeQL security scan.

All requirements from the problem statement have been successfully implemented!

Original prompt

Problem

The API Key button in the top right corner opens the ApiKeyManager modal, but when an API key is already configured, there's no way to close the modal without clearing the API key. Users can only click "Clear API Key" which removes their key and reloads the page, or they're stuck with the modal open.

Required Changes

1. Update components/ApiKeyManager.tsx

• Add a new prop onClose?: () => void to the ApiKeyManagerProps interface
• Add a close button (X icon) in the top-right corner of the modal
• When the close button is clicked, call onClose() if provided
• The close button should be visible in both states (when API key is set and when it's not)
• Style the close button appropriately with hover effects

2. Update App.tsx

• Create a new handler function handleCloseApiKeyManager that sets setShowApiKeyManager(false)
• Pass onClose={handleCloseApiKeyManager} to the ApiKeyManager component

Expected Behavior

• Users can click the API Key button to open the modal
• Users can click the close button (X) to dismiss the modal without clearing their API key
• The "Clear API Key" button still works as before to disconnect/remove the API key
• Both buttons should have clear visual distinction

Technical Notes

• Use consistent styling with the rest of the application (dark mode support)
• The close button should be positioned absolutely in the top-right corner of the modal
• Use an X icon (can use SVG or text "×")
• Maintain all existing functionality

This pull request was created from Copilot chat.

---

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