feat: Finalizes room-pressure view.

Sources/ViewController/Views/RoomPressure.swift

@@ -16,12 +16,6 @@ struct RoomPressureForm: HTML, Sendable {
     div(.class("relative")) {
       FormHeader(label: "Room Pressure Calculator", svg: .leftRightArrow)
 
-      // FIX: Remove when done testing.
-      WarningBox(
-        "This calculator is currently under construction, so it does not do anything when the form is submitted."
-      )
-      .attributes(.class("mb-8"))
-
       // Mode toggle / buttons.
       div(.class("absolute top-0 right-0 flex items-center gap-x-0")) {
         switch mode {
@@ -74,7 +68,10 @@ struct RoomPressureForm: HTML, Sendable {
     let mode: RoomPressure.Mode
 
     var content: some HTML<HTMLTag.form> {
-      form {
+      form(
+        .hx.post(route: .roomPressure(.index)),
+        .hx.target("#result")
+      ) {
         div(.class("space-y-6")) {
           LabeledContent(label: pressureLabel) {
             // NB: using .attributes(..., when:...) not working, so using a switch statement.
@@ -171,4 +168,76 @@ struct RoomPressureForm: HTML, Sendable {
 
 struct RoomPressureResult: HTML, Sendable {
   let response: RoomPressure.Response
+
+  var content: some HTML {
+    ResultContainer(reset: .roomPressure(.index(mode: response.mode))) {
+      div(.class("grid grid-cols-1 lg:grid-cols-2 gap-4")) {
+        RoundedContainer(title: "Return / Transfer Grille") {
+          div(.class("flex justify-between mt-6")) {
+            span(.class("font-semibold")) { "Standard Size:" }
+            span { """
+              \(response.grilleSize.width)" x \(response.grilleSize.height)"
+            """ }
+          }
+          div(.class("flex justify-between mt-3")) {
+            span(.class("font-semibold")) { "Required Net Free Area:" }
+            span {
+              """
+                \(double: response.grilleSize.area, fractionDigits: 1) in
+              """
+              sup { "2" }
+            }
+          }
+          div(.class("mt-8 text-sm")) {
+            span(.class("font-semibold")) { "Note: " }
+            span {
+              "Select a grille with at least \(double: response.grilleSize.area, fractionDigits: 1) in"
+              sup { "2" }
+              span { " net free area." }
+            }
+          }
+        }
+        .attributes(.class("bg-blue-100 border border-blue-600 text-blue-600"))
+
+        RoundedContainer(title: "Return / Transfer Duct") {
+          div(.class("flex justify-between mt-6")) {
+            span(.class("font-semibold")) { "Standard Size:" }
+            span { "\(response.ductSize.diameter)\"" }
+          }
+          div(.class("flex justify-between mt-3")) {
+            span(.class("font-semibold")) { "Air Velocity:" }
+            span { "\(double: response.ductSize.velocity, fractionDigits: 1) FPM" }
+          }
+        }
+        .attributes(.class("bg-purple-100 border border-purple-600 text-purple-600"))
+      }
+
+      WarningBox(warnings: response.warnings)
+
+      Note {
+        """
+        Calculations are based on a target velocity of 400 FPM for return/transfer air paths.
+        The required net free area is the minimum needed - select a grille that meets or exceeds this value.
+        Verify manufacturer specifications for actual net free area of selected grilles.
+        """
+      }
+    }
+  }
+
+  private struct RoundedContainer<Body: HTML>: HTML, Sendable where Body: Sendable {
+    let title: String
+    let body: Body
+
+    init(title: String, @HTMLBuilder body: () -> Body) {
+      self.title = title
+      self.body = body()
+    }
+
+    var content: some HTML<HTMLTag.div> {
+      div(.class("rounded-xl p-6")) {
+        h4(.class("text-xl font-bold")) { title }
+        body
+      }
+    }
+  }
 }