feat: refactor ProviderForm component with new subcomponents (#13)

* feat: refactor ProviderForm component with new subcomponents

- Introduced PresetSelector, ApiKeyInput, ClaudeConfigEditor, and CodexConfigEditor for improved modularity and readability.
- Simplified preset selection logic for both Claude and Codex configurations.
- Enhanced API Key input handling with dedicated components for better user experience.
- Removed redundant code and improved state management in the ProviderForm component.

* feat: add Kimi model selection to ProviderForm component

- Introduced KimiModelSelector for enhanced model configuration options.
- Implemented state management for Kimi model selection, including initialization and updates based on preset selection.
- Improved user experience by conditionally displaying the Kimi model selector based on the selected preset.
- Refactored related logic to ensure proper handling of Kimi-specific settings in the ProviderForm.

* feat: enhance API Key input and model selection in ProviderForm

- Added toggle functionality to show/hide API Key in ApiKeyInput component for improved user experience.
- Updated placeholder text in ProviderForm to provide clearer instructions based on the selected preset.
- Enhanced KimiModelSelector to display a more informative message when API Key is not provided.
- Refactored provider presets to remove hardcoded API Key values for better security practices.

* fix(kimi): optimize debounce implementation in model selector

- Fix initial state: use empty string instead of apiKey.trim()
- Refactor fetchModels to fetchModelsWithKey with explicit key parameter
- Ensure consistent behavior between auto-fetch and manual refresh
- Eliminate mental overhead from optional parameter fallback logic

* fix(api-key): remove custom masking logic, use native password input

- Remove getDisplayValue function with custom star masking
- Use native browser password input behavior for better UX consistency
- Simplify component logic while maintaining show/hide toggle functionality

* chore: format code with prettier

- Apply consistent code formatting across all TypeScript files
- Fix indentation and spacing according to project style guide

---------

Co-authored-by: Jason <farion1231@gmail.com>

src/components/ProviderForm/CodexConfigEditor.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+
+interface CodexConfigEditorProps {
+  authValue: string;
+  configValue: string;
+  onAuthChange: (value: string) => void;
+  onConfigChange: (value: string) => void;
+  onAuthBlur?: () => void;
+}
+
+const CodexConfigEditor: React.FC<CodexConfigEditorProps> = ({
+  authValue,
+  configValue,
+  onAuthChange,
+  onConfigChange,
+  onAuthBlur,
+}) => {
+  return (
+    <div className="space-y-6">
+      <div className="space-y-2">
+        <label
+          htmlFor="codexAuth"
+          className="block text-sm font-medium text-[var(--color-text-primary)]"
+        >
+          auth.json (JSON) *
+        </label>
+        <textarea
+          id="codexAuth"
+          value={authValue}
+          onChange={(e) => onAuthChange(e.target.value)}
+          onBlur={onAuthBlur}
+          placeholder={`{
+  "OPENAI_API_KEY": "sk-your-api-key-here"
+}`}
+          rows={6}
+          required
+          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[8rem]"
+        />
+        <p className="text-xs text-[var(--color-text-secondary)]">
+          Codex auth.json 配置内容
+        </p>
+      </div>
+
+      <div className="space-y-2">
+        <label
+          htmlFor="codexConfig"
+          className="block text-sm font-medium text-[var(--color-text-primary)]"
+        >
+          config.toml (TOML)
+        </label>
+        <textarea
+          id="codexConfig"
+          value={configValue}
+          onChange={(e) => onConfigChange(e.target.value)}
+          placeholder=""
+          rows={8}
+          className="w-full px-3 py-2 border border-[var(--color-border)] rounded-lg text-sm font-mono focus:outline-none focus:ring-2 focus:ring-[var(--color-primary)]/20 focus:border-[var(--color-primary)] transition-colors resize-y min-h-[10rem]"
+        />
+        <p className="text-xs text-[var(--color-text-secondary)]">
+          Codex config.toml 配置内容
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default CodexConfigEditor;