feat: enhance server routing and configuration management

- Added a new route for server details using owner and repo parameters.
- Removed the ServerInfoSection component to streamline server configuration.
- Refactored ServerConfigDialog to utilize a new ServerConfigForm for better modularity.
- Updated ServerPage to handle server data fetching based on both ID and repository parameters.
- Improved deep link handling to support new routing structure.
- Enhanced user feedback with toast notifications for server actions.

Author: milisp

tauri-app/src/components/server/config/ServerInfoSection.tsx

@@ -1,4 +1,3 @@
 export * from "./ConfigTabs";
-export * from "./ServerInfoSection";
 export * from "./ServerTypeSelector";
 export * from "./StdioConfigSection";

tauri-app/src/components/server/config/index.ts

@@ -7,16 +7,15 @@ import { toast } from "sonner";
 
 import { fetchServerConfig } from "@/lib/api";
 import { useClientPathStore } from "@/stores/clientPathStore";
-import { LabeledInput } from "../../shared/LabeledInput";
-import { ConfigTabs } from "../config";
-import { SseConfigForm } from "../form/SseConfigForm";
-import { StdioConfigForm } from "../form/StdioConfigForm";
+import { useConfigFileStore } from "@/stores/configFileStore";
+import { useTeamStore } from "@/stores/team";
+import { invoke } from "@tauri-apps/api/core";
+import { ServerConfigForm } from "../form/ServerConfigForm";
 import {
   useLocalDraft,
   useSaveServerConfig,
   useServerConfigDialog,
 } from "../hooks";
-import { ServerConfigDialogFooter } from "./ServerConfigDialogFooter";
 import { ServerConfigDialogHeader } from "./ServerConfigDialogHeader";
 
 interface ServerConfigDialogProps {
@@ -31,6 +30,8 @@ export const ServerConfigDialog = forwardRef<
 >(({ isOpen, setIsDialogOpen, currentServer }, _ref) => {
   const { selectedClient, selectedPath } = useClientPathStore();
   const { saveServerConfig } = useSaveServerConfig();
+  const { getTeamConfigPath } = useConfigFileStore();
+  const { selectedTeamId } = useTeamStore();
 
   const queryResult = useQuery({
     queryKey: ["configs", currentServer?.id],
@@ -145,50 +146,47 @@ export const ServerConfigDialog = forwardRef<
     clearDraft(); // Clear the draft after successful save
   };
 
+  const handleSubmitTeamLocal = async () => {
+    try {
+      await invoke("add_mcp_server", {
+        clientName: "custom",
+        path: getTeamConfigPath(selectedTeamId),
+        serverName: serverName,
+        serverConfig: config,
+      });
+      toast.success(`add to Team Local ok`);
+    } catch (e: any) {
+      console.error(e);
+      toast.error(e?.message || "fail to add to Team Local");
+    } finally {
+      setIsDialogOpen(false);
+    }
+  };
+
   return (
     <Dialog open={isOpen} onOpenChange={setIsDialogOpen}>
       <DialogContent className="overflow-y-auto max-h-[90vh] w-[90vw] max-w-3xl bg-background dark:bg-gray-800">
         <ServerConfigDialogHeader />
 
-        <LabeledInput
-          label="Server name"
-          value={serverName}
-          onChange={setServerName}
-        />
-
-        {configs && configs.length > 0 && (
-          <ConfigTabs
-            configs={configs}
-            curIndex={curIndex}
-            onConfigChange={handleConfigChange}
-          />
-        )}
-
-        <div className="grid gap-4 py-4">
-          {/* StdioServerConfig specific fields */}
-          {config && "command" in config && (
-            <StdioConfigForm
-              config={config}
-              envValues={envValues}
-              setEnvValues={setEnvValues}
-              onCommandChange={handleCommandChange}
-              onArgsChange={handleArgsChange}
-              onEnvChange={handleEnvChange}
-            />
-          )}
-
-          {/* SseConfig specific fields */}
-          {config && "url" in config && (
-            <SseConfigForm
-              config={config}
-              onConfigChange={handleSseConfigChange}
-            />
-          )}
-        </div>
-
-        <ServerConfigDialogFooter
+        {/* Main server config form extracted to a reusable component */}
+        <ServerConfigForm
+          serverName={serverName}
+          setServerName={setServerName}
+          // Ensure configs is always an array, never null
+          configs={configs ?? []}
+          curIndex={curIndex}
+          onConfigChange={handleConfigChange}
+          // Ensure config is never null, fallback to an empty object or suitable default if needed
+          config={config ?? ({} as ServerConfig)}
+          envValues={envValues}
+          setEnvValues={setEnvValues}
+          onCommandChange={handleCommandChange}
+          onArgsChange={handleArgsChange}
+          onEnvChange={handleEnvChange}
+          onSseConfigChange={handleSseConfigChange}
           onSubmit={handleSubmit}
           selectedClient={selectedClient}
+          onSubmitTeamLocal={handleSubmitTeamLocal}
         />
       </DialogContent>
     </Dialog>

tauri-app/src/components/server/dialog/ServerConfigDialog.tsx

@@ -2,26 +2,48 @@
 import { Button } from "@/components/ui/button";
 import capitalizeFirstLetter from "@/utils/title";
 import { useTranslation } from "react-i18next";
+import { useNavigate } from "react-router";
 
 interface ServerConfigDialogFooterProps {
   onSubmit: () => Promise<void>;
+  onSubmitTeamLocal?: () => Promise<void>;
   selectedClient: string;
 }
 
 export const ServerConfigDialogFooter = ({
   onSubmit,
+  onSubmitTeamLocal,
   selectedClient,
 }: ServerConfigDialogFooterProps) => {
   const { t } = useTranslation();
+  const navigate = useNavigate();
 
   return (
-    <Button
-      onClick={(e) => {
-        e.preventDefault();
-        onSubmit();
-      }}
-    >
-      {t("addTo")} {capitalizeFirstLetter(selectedClient)}
-    </Button>
+    <div className="flex gap-2">
+      <Button
+        onClick={(e) => {
+          e.preventDefault();
+          onSubmit();
+        }}
+      >
+        {t("addTo")} {capitalizeFirstLetter(selectedClient)}
+      </Button>
+      <Button
+        onClick={(e) => {
+          e.preventDefault();
+          onSubmitTeamLocal?.();
+        }}
+      >
+        {t("addTo")} {t("teamLocal")}
+      </Button>
+
+      <Button
+        onClick={() => {
+          navigate("/manage");
+        }}
+      >
+        Manage
+      </Button>
+    </div>
   );
 };

tauri-app/src/components/server/dialog/ServerConfigDialogFooter.tsx

@@ -12,12 +12,11 @@ interface ServerConfigDialogHeaderProps {
 
 export const ServerConfigDialogHeader = ({
   title = "mcp server config",
-  description = "server config",
 }: ServerConfigDialogHeaderProps) => {
   return (
     <DialogHeader>
       <DialogTitle className="dark:text-white">{title}</DialogTitle>
-      <DialogDescription>{description}</DialogDescription>
+      <DialogDescription></DialogDescription>
     </DialogHeader>
   );
 };

tauri-app/src/components/server/dialog/ServerConfigDialogHeader.tsx

@@ -14,10 +14,6 @@ const SimpleTab: React.FC<SimpleTabProps> = ({ logic }) => (
       serverType={logic.serverType}
       setServerType={logic.setServerType}
       config={logic.config}
-      projectDescription={logic.projectDescription}
-      setProjectDescription={logic.setProjectDescription}
-      projectUrl={logic.projectUrl}
-      setProjectUrl={logic.setProjectUrl}
       handleArgsChange={logic.handleArgsChange}
       handleCommandChange={logic.handleCommandChange}
       handleUrl={logic.handleUrl}
@@ -27,7 +23,6 @@ const SimpleTab: React.FC<SimpleTabProps> = ({ logic }) => (
       setEnvValues={logic.setEnvValues}
       headerValues={logic.headerValues}
       setHeaderValues={logic.setHeaderValues}
-      setSelectedCategoryId={logic.setSelectedCategoryId}
     />
   </TabsContent>
 );

tauri-app/src/components/server/dialog/SimpleTab.tsx

@@ -16,7 +16,6 @@ export function useServerTemplateLogic(
   setIsDialogOpen: (open: boolean) => void,
 ) {
   const { selectedClient, selectedPath } = useClientPathStore();
-  const [selectedCategoryId, setSelectedCategoryId] = useState<number>(1);
   const [githubUrl, setGithubUrl] = useState("");
   const { loading, error, fetchAllJsonBlocks } = useGithubReadmeJson();
   const { getTeamConfigPath } = useConfigFileStore();
@@ -27,10 +26,6 @@ export function useServerTemplateLogic(
   const {
     serverName,
     setServerName,
-    projectUrl,
-    setProjectUrl,
-    projectDescription,
-    setProjectDescription,
     serverType,
     setServerType,
     config,
@@ -108,10 +103,7 @@ export function useServerTemplateLogic(
   const { handleSubmit } = useServerTemplateSubmit({
     serverName,
     setIsDialogOpen,
-    projectUrl,
     config,
-    selectedCategoryId,
-    projectDescription,
     serverType,
     selectedClient,
     selectedPath: selectedPath || undefined,
@@ -195,19 +187,13 @@ export function useServerTemplateLogic(
   return {
     selectedClient,
     selectedPath,
-    selectedCategoryId,
-    setSelectedCategoryId,
     githubUrl,
     setGithubUrl,
     loading,
     error,
     fetchAllJsonBlocks,
     serverName,
     setServerName,
-    projectUrl,
-    setProjectUrl,
-    projectDescription,
-    setProjectDescription,
     serverType,
     setServerType,
     config,

tauri-app/src/components/server/dialog/useServerTemplateLogic.ts

@@ -13,10 +13,7 @@ export function useServerTemplateSubmit({
 }: {
   serverName: string;
   setIsDialogOpen: (open: boolean) => void;
-  projectUrl: string;
   config: any;
-  selectedCategoryId: number;
-  projectDescription: string;
   serverType: string;
   selectedClient: string;
   selectedPath: string | undefined;