Function AddPluginDialog

client-next/src/components/add-plugin-dialog.tsx:315–609

({ onSuccess }: AddPluginDialogProps)

}

export function AddPluginDialog({ onSuccess }: AddPluginDialogProps) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [fileType, setFileType] = useState<"js" | "ts">("ts");
  const [template, setTemplate] = useState<TemplateLock>("basic");
  const [content, setContent] = useState(PLUGIN_TEMPLATES.basic.ts);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [fetching, setFetching] = useState(false);
  const [urlInput, setUrlInput] = useState("");
  const [configImporting, setConfigImporting] = useState(false);

  const resetForm = () => {
    setName("");
    setFileType("ts");
    setTemplate("basic");
    setContent(PLUGIN_TEMPLATES.basic.ts);
    setError("");
    setUrlInput("");
  };

  const handleTypeChange = (type: "js" | "ts") => {
    setFileType(type);
    setContent(PLUGIN_TEMPLATES[template][type]);
  };

  const handleTemplateChange = (newTemplate: TemplateLock) => {
    setTemplate(newTemplate);
    setContent(PLUGIN_TEMPLATES[newTemplate][fileType]);
  };

  const handleConfigPaste = async (plugins: string[]) => {
    try {
      setConfigImporting(true);
      setError("");
      const result = await addPluginsToConfig(plugins);
      
      if (result.added.length > 0) {
        toast.success(`Added ${result.added.length} plugin(s) to config`);
      }
      if (result.skipped.length > 0) {
        toast.info(`Skipped ${result.skipped.length} already existing`);
      }
      
      resetForm();
      setOpen(false);
      onSuccess();
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to add plugins to config");
    } finally {
      setConfigImporting(false);
    }
  };

  const handleFetchUrl = async () => {
    if (!urlInput.trim()) return;
    
    const configPlugins = tryParsePluginConfig(urlInput);