feat: add DNS provider management features

- Implement DNSProviderCard component for displaying individual DNS provider details.
- Create DNSProviderForm component for adding and editing DNS providers.
- Add DNSProviderSelector component for selecting DNS providers in forms.
- Introduce useDNSProviders hook for fetching and managing DNS provider data.
- Add DNSProviders page for listing and managing DNS providers.
- Update layout to include DNS Providers navigation.
- Enhance UI components with new badge styles and improved layouts.
- Add default provider schemas for various DNS providers.
- Integrate translation strings for DNS provider management.
- Update Vite configuration for improved chunking and performance.

frontend/src/components/ProxyHostForm.tsx

@@ -14,6 +14,7 @@ import { SecurityScoreDisplay } from './SecurityScoreDisplay'
 import { parse } from 'tldts'
 import { Alert } from './ui/Alert'
 import { isLikelyDockerContainerIP, isPrivateOrDockerIP } from '../utils/validation'
+import DNSProviderSelector from './DNSProviderSelector'
 
 // Application preset configurations
 const APPLICATION_PRESETS: { value: ApplicationPreset; label: string; description: string }[] = [
@@ -111,6 +112,7 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
     certificate_id: host?.certificate_id,
     access_list_id: host?.access_list_id,
     security_header_profile_id: host?.security_header_profile_id,
+    dns_provider_id: host?.dns_provider_id || null,
   })
 
   // Charon internal IP for config helpers (previously CPMP internal IP)
@@ -300,8 +302,20 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
   const [uptimeInterval, setUptimeInterval] = useState(60)
   const [uptimeMaxRetries, setUptimeMaxRetries] = useState(3)
 
+  // Wildcard domain detection for DNS-01 challenge requirement
+  const hasWildcardDomain = formData.domain_names
+    ?.split(',')
+    .some(d => d.trim().startsWith('*'))
+
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
+
+    // Validate DNS provider for wildcard domains
+    if (hasWildcardDomain && !formData.dns_provider_id) {
+      toast.error('DNS provider is required for wildcard domains')
+      return
+    }
+
     setLoading(true)
     try {
       const payload = { ...formData }
@@ -642,6 +656,28 @@ export default function ProxyHostForm({ host, onSubmit, onCancel }: ProxyHostFor
             </p>
           </div>
 
+          {/* DNS Provider Selector for Wildcard Domains */}
+          {hasWildcardDomain && (
+            <div className="space-y-2">
+              <Alert variant="info">
+                <Info className="h-4 w-4" />
+                <div>
+                  <p className="font-medium">Wildcard Certificate Required</p>
+                  <p className="text-sm mt-1">
+                    Wildcard certificates (*.example.com) require DNS-01 challenge.
+                    Select a DNS provider to automatically manage DNS records for certificate validation.
+                  </p>
+                </div>
+              </Alert>
+
+              <DNSProviderSelector
+                value={formData.dns_provider_id ?? undefined}
+                onChange={(id) => setFormData(prev => ({ ...prev, dns_provider_id: id ?? null }))}
+                required={true}
+              />
+            </div>
+          )}
+
           {/* Access Control List */}
           <AccessListSelector
             value={formData.access_list_id || null}