Show connection creation errors in modal

When a connection create fails (e.g. port already in use), the error
message now appears as a red alert in the modal instead of silently
re-rendering the 'no connection' state. Added Error field to
ConnectionModalData and created renderConnectionModalError helper.

internal/handlers/connections.go

@@ -144,7 +144,7 @@ func (h *Handlers) ConnectionCreate(w http.ResponseWriter, r *http.Request) {
 
 	if err := h.Store.ConnectionCreate(conn); err != nil {
 		if returnPortID != "" {
-			h.renderConnectionModal(w, returnPortID)
+			h.renderConnectionModalError(w, returnPortID, err.Error())
 			return
 		}
 		h.redirect(w, r, "/")
@@ -159,6 +159,14 @@ func (h *Handlers) ConnectionCreate(w http.ResponseWriter, r *http.Request) {
 }
 
 func (h *Handlers) renderConnectionModal(w http.ResponseWriter, returnPortID string) {
+	h.renderConnectionModalWithError(w, returnPortID, "")
+}
+
+func (h *Handlers) renderConnectionModalError(w http.ResponseWriter, returnPortID string, errMsg string) {
+	h.renderConnectionModalWithError(w, returnPortID, errMsg)
+}
+
+func (h *Handlers) renderConnectionModalWithError(w http.ResponseWriter, returnPortID string, errMsg string) {
 	portID, err := strconv.ParseInt(returnPortID, 10, 64)
 	if err != nil {
 		http.Error(w, "invalid port id", http.StatusBadRequest)
@@ -180,6 +188,7 @@ func (h *Handlers) renderConnectionModal(w http.ResponseWriter, returnPortID str
 		Trace           *services.TraceResult
 		ConnectionTypes []models.ConnectionType
 		PortGroups      []PortGroup
+		Error           string
 	}
 
 	allDevices, _ := h.Store.DeviceGetAllUnracked()
@@ -225,13 +234,24 @@ func (h *Handlers) renderConnectionModal(w http.ResponseWriter, returnPortID str
 
 	var groups []PortGroup
 	for _, id := range groupOrder {
-		groups = append(groups, *groupMap[id])
+		grp := *groupMap[id]
+		filtered := grp.Ports[:0]
+		for _, fp := range grp.Ports {
+			if fp.ID != portID {
+				filtered = append(filtered, fp)
+			}
+		}
+		if len(filtered) > 0 {
+			grp.Ports = filtered
+			groups = append(groups, grp)
+		}
 	}
 
 	h.render(w, "connection_modal.html", ConnectionModalData{
 		Trace:           trace,
 		ConnectionTypes: connTypes,
 		PortGroups:      groups,
+		Error:           errMsg,
 	})
 }
 

templates/connection_modal.html

@@ -1,10 +1,9 @@
 <div class="modal-inner">
     <button class="modal-close" onclick="closeModal()">&times;</button>
+    {{if .Error}}<div class="alert alert-error">{{.Error}}</div>{{end}}
     {{if not .Trace.HasConnection}}
     <h3>No connection on port {{.Trace.ClickedPortName}} ({{.Trace.ClickedDeviceName}})</h3>
-    <details>
-        <summary>Create Connection</summary>
-        <form method="POST" action="/connections/create" hx-post="/connections/create" hx-target="#modal-content" hx-swap="innerHTML">
+    <form method="POST" action="/connections/create" hx-post="/connections/create" hx-target="#modal-content" hx-swap="innerHTML">
             <input type="hidden" name="return_port_id" value="{{.Trace.ClickedPortID}}">
             <label>Connection type
                 <select name="connection_type_id">
@@ -27,7 +26,6 @@
             <label>Color <input type="color" name="color" value="#808080"></label>
             <button type="submit">Create</button>
         </form>
-    </details>
     {{else}}
     <h3>Connection &mdash; {{.Trace.ConnectionType}}</h3>