- Rename src/config/providerPresets.ts to claudeProviderPresets.ts
- Update all import statements across 11 files to reflect the new name
- Establish symmetrical naming convention with codexProviderPresets.ts
- Improve code clarity and maintainability
Add visual theme system for provider presets with custom icons and brand colors:
- Add PresetTheme interface supporting icon type and custom colors
- Claude Official: Claude brand icon + orange theme (#D97757)
- Codex Official: Codex brand icon + dark gray theme (#1F2937)
- Other presets: Default to theme blue (bg-blue-500)
- Custom config: Uses theme blue for consistency
Technical changes:
- Extend ProviderPreset and CodexProviderPreset interfaces with optional theme field
- Update ProviderPresetSelector to render icons and apply theme colors
- Support both Tailwind classes and hex colors via inline styles
- Remove unused Link import from ProviderCard
This restores the unique visual identity for official providers while
maintaining a unified theme color for third-party presets.
- Add dynamic hint text based on provider category (official, opensource, aggregator, third-party, custom)
- Display hints in ProviderPresetSelector below preset buttons
- Rename "Chinese official" to "Opensource official" for better clarity
- Add i18n keys for all category hints in both zh and en locales
- Remove redundant hint boxes from ClaudeFormFields and CodexFormFields
This improves user guidance by showing contextual hints that explain
what fields are required for each provider category.
- Created ProviderPresetSelector component (80 lines)
- Created BasicFormFields component (60 lines)
- Created ClaudeFormFields component (272 lines)
- Created CodexFormFields component (131 lines)
- Reduced ProviderForm from 866 to 544 lines (37% reduction)
Each component now has a clear single responsibility:
- ProviderPresetSelector: Handles preset selection UI
- BasicFormFields: Name and website URL inputs
- ClaudeFormFields: All Claude-specific form fields
- CodexFormFields: All Codex-specific form fields
- ProviderForm: Orchestrates hooks and component composition
Benefits:
- Better code organization and maintainability
- Easier to test individual components
- Clearer separation of concerns
- More reusable components
