Refactor Settings, FileTree, GitPanel, Shell, and CodeEditor components (#402)

2026-06-15 11:22:10 +08:00 · 2026-02-25 19:07:07 +03:00
parent 23801e9cc1
commit 5e3a7b69d7
149 changed files with 11627 additions and 8453 deletions
--- a/src/components/settings/view/modals/CodexMcpFormModal.tsx
+++ b/src/components/settings/view/modals/CodexMcpFormModal.tsx
@@ -0,0 +1,178 @@
+import { useEffect, useState } from 'react';
+import type { FormEvent } from 'react';
+import { X } from 'lucide-react';
+import { useTranslation } from 'react-i18next';
+import { Button } from '../../../ui/button';
+import { Input } from '../../../ui/input';
+import { DEFAULT_CODEX_MCP_FORM } from '../../constants/constants';
+import type { CodexMcpFormState, McpServer } from '../../types/types';
+
+type CodexMcpFormModalProps = {
+  isOpen: boolean;
+  editingServer: McpServer | null;
+  onClose: () => void;
+  onSubmit: (formData: CodexMcpFormState, editingServer: McpServer | null) => Promise<void>;
+};
+
+const getErrorMessage = (error: unknown): string => (
+  error instanceof Error ? error.message : 'Unknown error'
+);
+
+const createFormStateFromServer = (server: McpServer): CodexMcpFormState => ({
+  name: server.name || '',
+  type: 'stdio',
+  config: {
+    command: server.config?.command || '',
+    args: server.config?.args || [],
+    env: server.config?.env || {},
+  },
+});
+
+export default function CodexMcpFormModal({
+  isOpen,
+  editingServer,
+  onClose,
+  onSubmit,
+}: CodexMcpFormModalProps) {
+  const { t } = useTranslation('settings');
+  const [formData, setFormData] = useState<CodexMcpFormState>(DEFAULT_CODEX_MCP_FORM);
+  const [isSubmitting, setIsSubmitting] = useState(false);
+
+  useEffect(() => {
+    if (!isOpen) {
+      return;
+    }
+
+    if (editingServer) {
+      setFormData(createFormStateFromServer(editingServer));
+      return;
+    }
+
+    setFormData(DEFAULT_CODEX_MCP_FORM);
+  }, [editingServer, isOpen]);
+
+  if (!isOpen) {
+    return null;
+  }
+
+  const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setIsSubmitting(true);
+
+    try {
+      await onSubmit(formData, editingServer);
+    } catch (error) {
+      alert(`Error: ${getErrorMessage(error)}`);
+    } finally {
+      setIsSubmitting(false);
+    }
+  };
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-[110] p-4">
+      <div className="bg-background border border-border rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
+        <div className="flex items-center justify-between p-4 border-b border-border">
+          <h3 className="text-lg font-medium text-foreground">
+            {editingServer ? t('mcpForm.title.edit') : t('mcpForm.title.add')}
+          </h3>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            <X className="w-4 h-4" />
+          </Button>
+        </div>
+
+        <form onSubmit={handleSubmit} className="p-4 space-y-4">
+          <div>
+            <label className="block text-sm font-medium text-foreground mb-2">
+              {t('mcpForm.fields.serverName')} *
+            </label>
+            <Input
+              value={formData.name}
+              onChange={(event) => setFormData((prev) => ({ ...prev, name: event.target.value }))}
+              placeholder={t('mcpForm.placeholders.serverName')}
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-foreground mb-2">
+              {t('mcpForm.fields.command')} *
+            </label>
+            <Input
+              value={formData.config.command}
+              onChange={(event) => {
+                const command = event.target.value;
+                setFormData((prev) => ({
+                  ...prev,
+                  config: { ...prev.config, command },
+                }));
+              }}
+              placeholder="npx @my-org/mcp-server"
+              required
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-foreground mb-2">
+              {t('mcpForm.fields.arguments')}
+            </label>
+            <textarea
+              value={formData.config.args.join('\n')}
+              onChange={(event) => {
+                const args = event.target.value.split('\n').filter((arg) => arg.trim());
+                setFormData((prev) => ({
+                  ...prev,
+                  config: { ...prev.config, args },
+                }));
+              }}
+              placeholder="--port&#10;3000"
+              rows={3}
+              className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+
+          <div>
+            <label className="block text-sm font-medium text-foreground mb-2">
+              {t('mcpForm.fields.envVars')}
+            </label>
+            <textarea
+              value={Object.entries(formData.config.env).map(([key, value]) => `${key}=${value}`).join('\n')}
+              onChange={(event) => {
+                const env: Record<string, string> = {};
+                event.target.value.split('\n').forEach((line) => {
+                  const [key, ...valueParts] = line.split('=');
+                  if (key && valueParts.length > 0) {
+                    env[key.trim()] = valueParts.join('=').trim();
+                  }
+                });
+                setFormData((prev) => ({
+                  ...prev,
+                  config: { ...prev.config, env },
+                }));
+              }}
+              placeholder="API_KEY=xxx&#10;DEBUG=true"
+              rows={3}
+              className="w-full px-3 py-2 text-sm bg-background border border-input rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+            />
+          </div>
+
+          <div className="flex justify-end gap-2 pt-4 border-t border-border">
+            <Button type="button" variant="outline" onClick={onClose}>
+              {t('mcpForm.actions.cancel')}
+            </Button>
+            <Button
+              type="submit"
+              disabled={isSubmitting || !formData.name.trim() || !formData.config.command.trim()}
+              className="bg-green-600 hover:bg-green-700 text-white"
+            >
+              {isSubmitting
+                ? t('mcpForm.actions.saving')
+                : editingServer
+                ? t('mcpForm.actions.updateServer')
+                : t('mcpForm.actions.addServer')}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+}