Function AddSkillDialog

client-next/src/components/add-skill-dialog.tsx:92–321

({ onSuccess }: AddSkillDialogProps)

}

export function AddSkillDialog({ onSuccess }: AddSkillDialogProps) {
  const [open, setOpen] = useState(false);
  const [name, setName] = useState("");
  const [description, setDescription] = useState("");
  const [content, setContent] = useState(SKILL_TEMPLATE);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(false);
  const [fetching, setFetching] = useState(false);
  const [urlInput, setUrlInput] = useState("");

  const resetForm = () => {
    setName("");
    setDescription("");
    setContent(SKILL_TEMPLATE);
    setError("");
    setUrlInput("");
  };

  const handleFetchUrl = async () => {
    if (!urlInput.trim()) return;
    
    if (!isUrl(urlInput)) {
      setError("Please enter a valid URL (http:// or https://)");
      return;
    }

    try {
      setFetching(true);
      setError("");
      const result = await fetchUrl(urlInput.trim());
      
      const parsed = parseFrontmatter(result.content);
      if (parsed.name || parsed.description) {
        if (!name && parsed.name) setName(parsed.name);
        if (!description && parsed.description) setDescription(parsed.description);
        setContent(parsed.body);
      } else {
        setContent(result.content);
        if (!name) {
          const extractedName = extractNameFromUrl(urlInput);
          if (extractedName) setName(extractedName);
        }
      }
      
      toast.success("Fetched content from URL");
      setUrlInput("");
    } catch (err) {
      setError(err instanceof Error ? err.message : "Failed to fetch URL");
    } finally {
      setFetching(false);
    }
  };

  const handlePaste = async (e: React.ClipboardEvent<HTMLInputElement>) => {
    const pastedText = e.clipboardData.getData('text');
    if (isUrl(pastedText)) {
      e.preventDefault();
      setUrlInput(pastedText);