Improve the visual hierarchy and interaction feedback in the settings dialog:
1. Tab navigation enhancement:
- Active tabs now use blue background (blue-500/600) with white text
- Add shadow effect to active tabs for better depth perception
- Inactive tabs show hover effects (opacity + background)
- Consistent with app's primary blue theme color
2. Switch component visual improvement:
- Checked state: blue background (blue-500/600) for clear indication
- Unchecked state: gray background (gray-300/700) for neutral appearance
- White thumb color for better contrast on both states
- Enhanced focus ring (ring-2 + offset-2) for accessibility
3. Layout spacing refinement:
- Change content area padding from pb-4 to py-4 for symmetrical spacing
- Ensure consistent 4-unit spacing between all dialog sections
4. Clarify plugin integration description:
- Update description to accurately reflect that provider switching
in this app will sync with VS Code Claude Code extension
- Previous wording was ambiguous about the synchronization behavior
Files changed:
- src/components/ui/tabs.tsx: Enhanced tab visual states
- src/components/ui/switch.tsx: Improved switch contrast
- src/components/settings/SettingsDialog.tsx: Fixed spacing
- src/i18n/locales/{zh,en}.json: Updated plugin description
This commit refines the visual hierarchy and fixes layout issues in the
settings dialog:
1. Add visual separators to dialog sections:
- Add bottom border and background to DialogHeader
- Both header and footer now have consistent border + bg-muted/20 styling
- Creates clear three-section layout: header | content | footer
2. Fix footer overflow issue:
- Remove min-h-[480px] from content area that conflicted with max-h-[90vh]
- Keep min-h-[400px] on TabsContent to prevent height jumps
- Add flex-shrink-0 to header and footer to ensure they stay visible
- Content area uses flex-1 to fill remaining space naturally
3. Improve spacing:
- Add pb-4 to content area for breathing room above footer
- Add pb-4 to DialogHeader for consistent spacing below title
- Ensure proper padding hierarchy across all dialog sections
Layout calculation (small screens, 90vh ≈ 540px):
- Header: ~70px (fixed)
- Content: 400px minimum, scrollable (flexible)
- Footer: ~70px (fixed)
- Total: ≤ 540px, footer always visible ✓
Files modified:
- src/components/ui/dialog.tsx (DialogHeader, DialogFooter styling)
- src/components/settings/SettingsDialog.tsx (content area height constraint)
Fixed multiple layout issues in the settings dialog:
1. Dialog structure: Changed from grid to flexbox layout
- Removed global padding from DialogContent
- Added individual padding to DialogHeader (px-6 pt-6) and DialogFooter (px-6 pb-6 pt-4)
- Added max-h-[90vh] constraint to prevent dialog from exceeding viewport
2. Content area improvements:
- Replaced max-h-[70vh] with flex-1 for better space utilization
- Set min-h-[480px] on content wrapper to maintain consistent dialog height
- Applied min-h-[400px] to all TabsContent components to prevent height jumps
3. Scrollbar optimization:
- Changed overflow-y-auto to overflow-y-scroll to force scrollbar gutter
- Eliminates horizontal shift when switching between tabs with different content heights
- Consistent with main app layout approach (App.tsx)
4. Footer enhancement:
- Added border-t and bg-muted/20 for visual separation
- Fixed footer overlapping content in advanced tab
Result: Settings dialog now displays all content properly without requiring
fullscreen, maintains consistent height across tabs, and eliminates layout shift
when switching tabs.
Fix inconsistent modal overlays by migrating all custom implementations
to the unified shadcn/ui Dialog component with proper z-index layering.
Changes:
- Update Dialog component to support three z-index levels:
- base (z-40): First-level dialogs
- nested (z-50): Nested dialogs
- alert (z-[60]): Alert/confirmation dialogs (using Tailwind arbitrary value)
- Refactor all custom modal implementations to use Dialog:
- EndpointSpeedTest: API endpoint speed testing panel
- ClaudeConfigEditor: Claude common config editor
- CodexQuickWizardModal: Codex quick setup wizard
- CodexCommonConfigModal: Codex common config editor
- SettingsDialog: Restart confirmation prompt
- Remove custom backdrop implementations and manual z-index
- Leverage Radix UI Portal for automatic DOM order management
- Ensure consistent overlay behavior and keyboard interactions
This eliminates the "background residue" issue where overlays from
different layers would conflict, providing a unified and professional
user experience across all modal interactions.
Convert all MCP-related modal windows to use the unified shadcn/ui Dialog
component for consistency with the rest of the application.
Changes:
- McpPanel: Replace custom modal with Dialog component
- Update props from onClose to open/onOpenChange pattern
- Use DialogContent, DialogHeader, DialogTitle components
- Remove custom backdrop and close button (handled by Dialog)
- McpFormModal: Migrate form modal to Dialog
- Wrap entire form in Dialog component structure
- Use DialogFooter for action buttons
- Apply variant="mcp" to maintain green button styling
- Remove unused X icon import
- McpWizardModal: Convert wizard to Dialog
- Replace custom modal structure with Dialog components
- Use Button component with variant="mcp" for consistency
- Remove unused isLinux and X icon imports
- App.tsx: Update McpPanel usage
- Remove conditional rendering wrapper
- Pass open and onOpenChange props directly
- dialog.tsx: Fix dialog overlay and content styling
- Change overlay from bg-background/80 to bg-black/50 for consistency
- Change content from bg-background to explicit bg-white dark:bg-gray-900
- Ensures opaque backgrounds matching MCP panel style
Benefits:
- Unified dialog behavior across the application
- Consistent styling and animations
- Better accessibility with Radix UI primitives
- Reduced code duplication
- Maintains MCP-specific green color scheme
All dialogs now share the same base styling while preserving their unique
content and functionality.
Restore the vibrant color palette from the pre-refactoring version while
maintaining shadcn/ui component architecture and modern design patterns.
## Color Scheme Restoration
### Button Component
- **default variant**: Blue primary (`bg-blue-500`) - matches old `primary`
- **destructive variant**: Red (`bg-red-500`) - matches old `danger`
- **secondary variant**: Gray text (`text-gray-500`) - matches old `secondary`
- **ghost variant**: Transparent hover (`hover:bg-gray-100`) - matches old `ghost`
- **mcp variant**: Emerald green (`bg-emerald-500`) - matches old `mcp`
- Updated border-radius to `rounded-lg` for consistency
### CSS Variables
- Set `--primary` to blue (`hsl(217 91% 60%)` ≈ `bg-blue-500`)
- Added complete shadcn/ui theme variables for light/dark modes
- Maintained semantic color tokens for maintainability
### Component-Specific Colors
- **"Currently Using" badge**: Green (`bg-green-500/10 text-green-500`)
- **Delete button hover**: Red (`hover:text-red-500 hover:bg-red-100`)
- **MCP button**: Emerald green with minimum width (`min-w-[80px]`)
- **Links/URLs**: Blue (`text-blue-500`)
## Benefits
- ✅ Restored original vibrant UI (blue, green, red accents)
- ✅ Maintained shadcn/ui component system (accessibility, animations)
- ✅ Easy global theming via CSS variables
- ✅ Consistent design language across all components
- ✅ Code formatted with Prettier (shadcn/ui standards)
## Files Changed
- `src/index.css`: Added shadcn/ui theme variables with blue primary
- `src/components/ui/button.tsx`: Restored all original button color variants
- `src/components/providers/ProviderCard.tsx`: Green badge for current provider
- `src/components/providers/ProviderActions.tsx`: Red hover for delete button
- `src/components/mcp/McpPanel.tsx`: Use `mcp` variant for consistency
- `src/App.tsx`: MCP button with emerald color and wider width
The UI now matches the original colorful design while leveraging modern
shadcn/ui components for better maintainability and user experience.
