feat(applications): add ports field to create application form

The add-application modal now accepts a comma-separated list of port
numbers (same UX as the add-host form). Ports are associated with the
new application atomically in create_application on the server side.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

src/api/applications.rs

@@ -83,18 +83,35 @@ pub async fn get_ports_for_application(
 
 // ─── Mutations ────────────────────────────────────────────────────────────────
 
-/// Creates a new application and returns the created record.
+/// Creates a new application, then associates the given port numbers.
+///
+/// `ports` is a comma-separated list of port numbers (e.g. "80,443").
+/// An empty string means no ports are associated.
 #[server]
-pub async fn create_application(name: String) -> Result<Application, ServerFnError> {
+pub async fn create_application(name: String, ports: String) -> Result<Application, ServerFnError> {
     use sqlx::AnyPool;
     use crate::server::repository::applications as repo;
 
     let pool = use_context::<AnyPool>()
         .ok_or_else(|| ServerFnError::new("Database pool not found in context"))?;
 
-    repo::create_application(&pool, &name)
+    let app = repo::create_application(&pool, &name)
         .await
-        .map_err(|e| ServerFnError::new(e.to_string()))
+        .map_err(|e| ServerFnError::new(e.to_string()))?;
+
+    let port_numbers: Vec<u16> = ports
+        .split(',')
+        .filter_map(|s| s.trim().parse::<u16>().ok())
+        .filter(|&p| p >= 1)
+        .collect();
+
+    for port_number in port_numbers {
+        repo::add_port_to_application(&pool, app.id, port_number)
+            .await
+            .map_err(|e| ServerFnError::new(e.to_string()))?;
+    }
+
+    Ok(app)
 }
 
 /// Deletes an application and all its port associations.

src/client/applications.rs

@@ -65,6 +65,15 @@ fn AddApplicationModal(
                                 required
                             />
                         </label>
+                        <label>
+                            "Associated ports"
+                            <input
+                                type="text"
+                                name="ports"
+                                placeholder="e.g. 22, 80, 443"
+                            />
+                            <span class="field-hint">"Comma-separated port numbers"</span>
+                        </label>
                     </div>
 
                     <div class="modal__actions">