refactor: enhance ServerConfigDialog and update client naming conventions

- Refactored ServerConfigDialog to utilize new components for better organization and readability.
- Replaced local storage draft management with hooks for improved state handling.
- Updated naming from `appName` to `clientName` across multiple files for consistency.
- Removed unused code and streamlined the configuration submission process.
- Enhanced UI components for better user experience in server configuration management.

Author: milisp

src-tauri/src/app.rs renamed to src-tauri/src/client.rs

@@ -2,12 +2,12 @@ use std::path::{Path, PathBuf};
 use dirs::home_dir;
 
 #[allow(dead_code)]
-pub struct AppConfig {
+pub struct ClientConfig {
     pub name: String,
     pub path: PathBuf,
 }
 
-impl AppConfig {
+impl ClientConfig {
     pub fn new(name: &str, path: Option<&str>) -> Self {
         let home = home_dir().unwrap().to_str().unwrap().to_string();
         let path = match (name, path) {

src-tauri/src/cmd.rs

@@ -1,13 +1,13 @@
-use crate::app::AppConfig;
+use crate::client::ClientConfig;
 use crate::json_manager::JsonManager;
 use serde_json::Value;
 
 #[tauri::command]
-pub async fn read_json_file(app_name: String, path: Option<String>) -> Result<Value, String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+pub async fn read_json_file(client_name: String, path: Option<String>) -> Result<Value, String> {
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
-    if !file_path.exists() && app_name != "claude" {
+    if !file_path.exists() && client_name != "claude" {
         return Err(format!("File not found: {}", file_path.display()));
     }
 
@@ -16,57 +16,57 @@ pub async fn read_json_file(app_name: String, path: Option<String>) -> Result<Va
 
 #[tauri::command]
 pub async fn write_json_file(
-    app_name: String,
+    client_name: String,
     path: Option<String>,
     content: Value,
 ) -> Result<(), String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
     JsonManager::write_json_file(file_path, &content)
 }
 
 #[tauri::command]
-pub async fn get_app_path(app_name: String, path: Option<String>) -> Result<String, String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+pub async fn get_app_path(client_name: String, path: Option<String>) -> Result<String, String> {
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
     Ok(file_path.to_string_lossy().to_string())
 }
 
 #[tauri::command]
 pub async fn add_mcp_server(
-    app_name: String,
+    client_name: String,
     path: Option<String>,
     server_name: String,
     server_config: Value,
 ) -> Result<Value, String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
     JsonManager::add_mcp_server(file_path, &server_name, server_config)
 }
 
 #[tauri::command]
 pub async fn remove_mcp_server(
-    app_name: String,
+    client_name: String,
     path: Option<String>,
     server_name: String,
 ) -> Result<Value, String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
     JsonManager::remove_mcp_server(file_path, &server_name)
 }
 
 #[tauri::command]
 pub async fn update_mcp_server(
-    app_name: String,
+    client_name: String,
     path: Option<String>,
     server_name: String,
     server_config: Value,
 ) -> Result<Value, String> {
-    let app_config = AppConfig::new(&app_name, path.as_deref());
+    let app_config = ClientConfig::new(&client_name, path.as_deref());
     let file_path = app_config.get_path();
 
     JsonManager::update_mcp_server(file_path, &server_name, server_config)

src-tauri/src/lib.rs

@@ -15,7 +15,7 @@ struct Config {
     mcp_servers: Value, // 允许动态 JSON 结构
 }
 
-mod app;
+mod client;
 mod cmd;
 mod installer;
 mod json_manager;

src/components/server/ArgsTextarea.tsx

@@ -0,0 +1,23 @@
+// ArgsTextarea.tsx
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+
+interface ArgsTextareaProps {
+  args: string[];
+  onChange: (value: string) => void;
+}
+
+export const ArgsTextarea = ({ args, onChange }: ArgsTextareaProps) => {
+  return (
+    <div className="grid gap-2">
+      <Label className="text-foreground dark:text-gray-200">
+        args
+      </Label>
+      <Textarea
+        value={args.join(" ")}
+        onChange={(e) => onChange(e.target.value)}
+        className="dark:bg-gray-800 dark:border-gray-500 dark:text-white"
+      />
+    </div>
+  );
+};

src/components/server/CommandInput.tsx

@@ -0,0 +1,23 @@
+// CommandInput.tsx
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface CommandInputProps {
+  command: string;
+  onChange: (value: string) => void;
+}
+
+export const CommandInput = ({ command, onChange }: CommandInputProps) => {
+  return (
+    <div className="grid gap-2">
+      <Label className="text-foreground dark:text-gray-200">
+        Command
+      </Label>
+      <Input
+        value={command || ""}
+        onChange={(e) => onChange(e.target.value)}
+        className="dark:bg-gray-800 dark:border-gray-500 dark:text-white"
+      />
+    </div>
+  );
+};

src/components/server/ConfigTabs.tsx

@@ -0,0 +1,26 @@
+// ConfigTabs.tsx
+import { Button } from "@/components/ui/button";
+import type { ServerConfig } from "@/types";
+
+interface ConfigTabsProps {
+  configs: ServerConfig[];
+  curIndex: number;
+  onConfigChange: (config: ServerConfig, index: number) => void;
+}
+
+export const ConfigTabs = ({ configs, curIndex, onConfigChange }: ConfigTabsProps) => {
+  return (
+    <div className="flex gap-2">
+      {configs.map((c, index) => (
+        <Button
+          key={`${c.command}-${index}-${Math.random()}`}
+          onClick={() => onConfigChange(c, index)}
+          variant={`${curIndex == index ? "default" : "outline"}`}
+          aria-label={`Select ${c.command} configuration`}
+        >
+          {c.command}
+        </Button>
+      ))}
+    </div>
+  );
+};

src/components/server/EnvEditor.tsx

@@ -0,0 +1,48 @@
+// EnvEditor.tsx
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+interface EnvEditorProps {
+  env: Record<string, string>;
+  envValues: Record<string, string>;
+  setEnvValues: (values: Record<string, string>) => void;
+  onEnvChange: (key: string, value: string) => void;
+}
+
+export const EnvEditor = ({
+  env,
+  envValues,
+  setEnvValues,
+  onEnvChange,
+}: EnvEditorProps) => {
+  return (
+    <div className="grid gap-2">
+      <h2 className="text-foreground dark:text-gray-200">env</h2>
+      <div className="space-y-2">
+        {Object.entries(env).map(([key, value], envIndex) => (
+          <div
+            key={envIndex}
+            className="grid grid-cols-2 items-center gap-2"
+          >
+            <Label className="col-span-1 text-foreground dark:text-gray-200">
+              {key}
+            </Label>
+            <Input
+              className="col-span-3 dark:bg-gray-800 dark:border-gray-500 dark:text-white"
+              value={envValues[key] || ""}
+              placeholder={value}
+              onChange={(e) => {
+                setEnvValues((prev) => ({
+                  ...prev,
+                  [key]: e.target.value,
+                }));
+                onEnvChange(key, e.target.value || value);
+              }}
+              required
+            />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};