- Add missing translation keys for all hint texts and descriptions
- Remove all hardcoded defaultValue parameters from components
- Add translations for window behavior, directory settings, and theme settings
- Add translations for provider-related UI elements
- Improve consistency across Chinese and English translations
Translation additions:
- common.toggleTheme
- settings.windowBehaviorHint, claudeConfigDirDescription, codexConfigDirDescription
- provider.* (12 new keys)
- providerForm.* (15 new keys)
- providerPreset.* (4 new keys)
Modified files: 10
Lines changed: +132 -74
Fix two UX issues in the settings dialog:
1. Check for Updates button width stability
- Added min-w-[140px] to prevent layout shift during state changes
- Button maintains consistent width across all states:
* "Check for Updates" (idle)
* "Checking..." (with spinner)
* "Update to vX.X.X" (with download icon)
* "Installing..." (with spinner)
2. Settings dialog scrollbar behavior
- Changed overflow-y-scroll to overflow-y-auto
- Scrollbar now only appears when content actually overflows
- Prevents unnecessary scrollbar on About tab (content < 400px)
- Maintains min-h-[400px] on all tabs to prevent dialog height jump
These changes improve visual stability and reduce UI clutter while
maintaining consistent dialog dimensions during tab switching.
Move the theme toggle from the main header to the settings dialog for a
cleaner UI and better organization. The new theme selector uses a
button group design consistent with the language settings.
Changes:
- Created ThemeSettings component with three options: Light, Dark, System
- Added ThemeSettings to the General tab in settings dialog
- Removed ModeToggle component from main header
- Added theme-related i18n keys for all options
- Theme selection takes effect immediately without requiring save
Design:
- Uses button group style matching LanguageSettings
- Icons for each theme option (Sun, Moon, Monitor)
- Consistent with app's blue theme for active state
- Smooth transitions and hover effects
This change simplifies the main header and consolidates all appearance
settings in one place, improving the overall user experience.
Remove the config file location display from settings dialog to simplify
the user interface. Users who need to access the config file can still do
so through the advanced settings section.
Changes:
- Removed ConfigPathDisplay component and its usage
- Removed configPath and openConfigFolder from useSettings hook
- Removed configPath and openConfigFolder from useSettingsMetadata hook
- Removed related i18n keys: configFileLocation, openFolder
- Updated settings dialog to remove the config path display section
This simplifies the settings UI while maintaining access to config
directory management through the advanced settings tab.
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.
Introduce `closeAfterSave` callback to distinguish between save-and-close and cancel-and-close scenarios. Previously, saving settings would trigger `resetSettings()`, causing language changes to revert and requiring users to save twice for the change to take effect.
Changes:
- Add `closeAfterSave()`: close dialog without resetting settings after successful save
- Keep `closeDialog()`: reset settings when canceling or directly closing dialog
- Update save flow to use `closeAfterSave()` in `handleSaveClick`, `handleRestartLater`, and `handleRestartNow`
