fix: add URL validation and error feedback for Tool Icon Source

[xxiaoxiong]

Description

Fixes #6382

Adds URL validation and error feedback for the Tool Icon Source field in the Tools dialog.

Changes

• ✅ Add URL validation for Tool Icon Source field
• ✅ Display error message when invalid URL is entered
• ✅ Block saving when Tool Icon Source contains invalid URL
• ✅ Allow empty Tool Icon Source (optional field)
• ✅ Validate on input change for immediate feedback
• ✅ Clear error state when dialog is reset

Validation Rules

• Empty values are allowed (optional field)
• Only http:// and https:// URLs are accepted
• Clear error messages guide users to correct format
• Saving is prevented until validation passes

Testing

Before

• Tool Icon Source accepted any random string (e.g., abc123)
• No validation or error feedback
• Broken icons in Tools list/card views

After

• Invalid URLs show clear error message
• Save button is blocked until validation passes
• Empty field is allowed (optional)
• Valid URLs work as expected

Screenshots

Error feedback for invalid URL:

• Entering abc123 shows: "Tool Icon Source must be a valid URL"
• Entering ftp://example.com shows: "Tool Icon Source must be a valid http or https URL"

Valid cases:

• Empty field: ✅ No error, save allowed
• https://example.com/icon.svg: ✅ No error, save allowed

Type of Change

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to not work as expected)

Checklist

• My code follows the style guidelines of this project
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• My changes generate no new warnings
• I have checked my code and corrected any misspellings

[gemini-code-assist]

Code Review

This pull request introduces URL validation for the tool icon in the ToolDialog component, including error state management and UI feedback. The feedback suggests optimizing performance by wrapping the validation and change handlers in useCallback and ensuring the error state is reset across all dialog modes (ADD, EDIT, IMPORT, and TEMPLATE) to prevent stale error messages.

[gemini-code-assist]

The validation and change handler functions are recreated on every render. Wrapping them in useCallback ensures stable function references, which is a best practice in React to prevent unnecessary re-renders of child components (like the OutlinedInput) and to maintain consistency when these functions are used as dependencies in other hooks or passed as props.

    const validateToolIconUrl = useCallback((url) => {
        if (!url || url.trim() === '') {
            setToolIconError('')
            return true
        }
        try {
            const urlObj = new URL(url)
            if (urlObj.protocol !== 'http:' && urlObj.protocol !== 'https:') {
                setToolIconError('Tool Icon Source must be a valid http or https URL')
                return false
            }
            setToolIconError('')
            return true
        } catch (error) {
            setToolIconError('Tool Icon Source must be a valid URL')
            return false
        }
    }, [])

    const handleToolIconChange = useCallback((e) => {
        const value = e.target.value
        setToolIcon(value)
        validateToolIconUrl(value)
    }, [validateToolIconUrl])

[gemini-code-assist]

The toolIconError state is only reset in the ADD case. It should also be reset in the EDIT, IMPORT, and TEMPLATE cases within this useEffect to ensure that error messages from a previously opened tool or a failed validation do not persist when switching between different tools or dialog modes.