Jason cfefe6b52a refactor: migrate UsageScriptModal to shadcn/ui Dialog component ...

Migrate the usage script configuration modal from custom modal implementation to shadcn/ui Dialog component to maintain consistent styling across the entire application.

## Changes

### UsageScriptModal.tsx
- Replace custom modal structure (fixed positioning, backdrop) with Dialog component
- Remove X icon import (Dialog includes built-in close button)
- Add Dialog, DialogContent, DialogHeader, DialogTitle, DialogFooter imports
- Add Button component import for action buttons
- Update props interface to include isOpen boolean prop
- Restructure component layout:
  - Use DialogHeader with DialogTitle for header section
  - Apply -mx-6 px-6 pattern for full-width scrollable content
  - Use DialogFooter with flex-col sm:flex-row sm:justify-between layout
- Convert custom buttons to Button components:
  - Test/Format buttons: variant="outline" size="sm"
  - Cancel button: variant="ghost" size="sm"
  - Save button: variant="default" size="sm"
- Maintain all existing functionality (preset templates, JSON editor, validation, testing, formatting)

### App.tsx
- Update UsageScriptModal usage to pass isOpen prop
- Use Boolean(usageProvider) to control dialog open state

## Benefits
- **Consistent styling**: All dialogs now use the same shadcn/ui Dialog component
- **Better accessibility**: Automatic focus management, ESC key handling, ARIA attributes
- **Code maintainability**: Reduced custom modal boilerplate, easier to update styling globally
- **User experience**: Unified look and feel across settings, providers, MCP, and usage script dialogs

All TypeScript type checks and Prettier formatting checks pass.

2025-10-16 16:32:50 +08:00

12 KiB

Raw Blame History

View Raw