977185e2d5
Comprehensive refactoring of form components to reduce complexity, improve maintainability, and enhance user experience. Provider Forms: - CodexCommonConfigModal & CodexConfigSections * Simplified state management with reduced boilerplate * Improved field validation and error handling * Better layout with consistent spacing * Enhanced model selection with visual indicators - GeminiCommonConfigModal & GeminiConfigSections * Streamlined authentication flow (OAuth vs API Key) * Cleaner form layout with better grouping * Improved validation feedback * Better integration with parent components - CommonConfigEditor * Reduced from 178 to 68 lines (-62% complexity) * Extracted reusable form patterns * Improved JSON editing with syntax validation * Better error messages and recovery options - EndpointSpeedTest * Complete rewrite for better UX * Real-time testing progress indicators * Enhanced error handling with retry logic * Visual feedback for test results (color-coded latency) MCP & Prompts: - McpFormModal * Simplified from 581 to ~360 lines * Better stdio/http server type handling * Improved form validation * Enhanced multi-app selection (Claude/Codex/Gemini) - PromptPanel * Cleaner integration with PromptFormPanel * Improved list/grid view switching * Better state management for editing workflows * Enhanced delete confirmation with safety checks Code Quality Improvements: - Reduced total lines by ~251 lines (-24% code reduction) - Eliminated duplicate validation logic - Improved TypeScript type safety - Better component composition and separation of concerns - Enhanced accessibility with proper ARIA labels These changes make forms more intuitive, responsive, and easier to maintain while reducing bundle size and improving runtime performance.
86 lines
2.2 KiB
TypeScript
86 lines
2.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { Save } from "lucide-react";
|
|
import { useTranslation } from "react-i18next";
|
|
import { FullScreenPanel } from "@/components/common/FullScreenPanel";
|
|
import { Button } from "@/components/ui/button";
|
|
import JsonEditor from "@/components/JsonEditor";
|
|
|
|
interface CodexCommonConfigModalProps {
|
|
isOpen: boolean;
|
|
onClose: () => void;
|
|
value: string;
|
|
onChange: (value: string) => void;
|
|
error?: string;
|
|
}
|
|
|
|
/**
|
|
* CodexCommonConfigModal - Common Codex configuration editor modal
|
|
* Allows editing of common TOML configuration shared across providers
|
|
*/
|
|
export const CodexCommonConfigModal: React.FC<CodexCommonConfigModalProps> = ({
|
|
isOpen,
|
|
onClose,
|
|
value,
|
|
onChange,
|
|
error,
|
|
}) => {
|
|
const { t } = useTranslation();
|
|
const [isDarkMode, setIsDarkMode] = useState(false);
|
|
|
|
useEffect(() => {
|
|
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
|
|
|
const observer = new MutationObserver(() => {
|
|
setIsDarkMode(document.documentElement.classList.contains("dark"));
|
|
});
|
|
|
|
observer.observe(document.documentElement, {
|
|
attributes: true,
|
|
attributeFilter: ["class"],
|
|
});
|
|
|
|
return () => observer.disconnect();
|
|
}, []);
|
|
|
|
return (
|
|
<FullScreenPanel
|
|
isOpen={isOpen}
|
|
title={t("codexConfig.editCommonConfigTitle")}
|
|
onClose={onClose}
|
|
footer={
|
|
<>
|
|
<Button type="button" variant="outline" onClick={onClose}>
|
|
{t("common.cancel")}
|
|
</Button>
|
|
<Button type="button" onClick={onClose} className="gap-2">
|
|
<Save className="w-4 h-4" />
|
|
{t("common.save")}
|
|
</Button>
|
|
</>
|
|
}
|
|
>
|
|
<div className="space-y-4">
|
|
<p className="text-sm text-muted-foreground">
|
|
{t("codexConfig.commonConfigHint")}
|
|
</p>
|
|
|
|
<JsonEditor
|
|
value={value}
|
|
onChange={onChange}
|
|
placeholder={`# Common Codex config
|
|
|
|
# Add your common TOML configuration here`}
|
|
darkMode={isDarkMode}
|
|
rows={16}
|
|
showValidation={false}
|
|
language="javascript"
|
|
/>
|
|
|
|
{error && (
|
|
<p className="text-sm text-red-500 dark:text-red-400">{error}</p>
|
|
)}
|
|
</div>
|
|
</FullScreenPanel>
|
|
);
|
|
};
|