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.
This commit is contained in:
@@ -304,6 +304,7 @@ function App() {
|
||||
<UsageScriptModal
|
||||
provider={usageProvider}
|
||||
appType={activeApp}
|
||||
isOpen={Boolean(usageProvider)}
|
||||
onClose={() => setUsageProvider(null)}
|
||||
onSave={(script) => {
|
||||
void handleSaveUsageScript(usageProvider, script);
|
||||
|
||||
Reference in New Issue
Block a user