feat: Begins room-pressure calculator

Sources/ViewController/Views/MoldRisk.swift

@@ -85,8 +85,8 @@ struct MoldRiskResponse: HTML {
       }
 
       // Display psychrometric properties.
-      PsychrometricPropertiesGrid(properties: response.psychrometricProperties)
-        .attributes(.class("mx-6"))
+      Properties(properties: response.psychrometricProperties)
+        .attributes(.class("mt-8"))
 
       // Disclaimer.
       Note {
@@ -98,6 +98,20 @@ struct MoldRiskResponse: HTML {
       }
     }
   }
+
+  private struct Properties: HTML, Sendable {
+    let properties: PsychrometricProperties
+
+    var content: some HTML<HTMLTag.div> {
+      div(.class("w-full rounded-lg border")) {
+        h3(.class("flex justify-center text-xl font-semibold mb-6 mt-2")) { "Psychrometric Properties" }
+        PsychrometricPropertiesView(properties: properties)
+          .attributes(.class("""
+          grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-x-6 gap-y-2 px-4 pb-4
+          """))
+      }
+    }
+  }
 }
 
 private extension MoldRisk.RiskLevel {
@@ -129,46 +143,3 @@ private extension MoldRisk.RiskLevel {
   }
 
 }
-
-// TODO: Remove and use PsychrometricPropertiesView as the base.
-struct PsychrometricPropertiesGrid: HTML {
-  let properties: PsychrometricProperties
-
-  var content: some HTML<HTMLTag.div> {
-    div(.class("pt-8")) {
-      p(.class("text-xl font-semibold border-b")) {
-        "Psychrometric Properties:"
-      }
-      div(.class("w-full mt-6 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4")) {
-        displayProperty("Dew Point", \.dewPoint.rawValue)
-        displayProperty("Wet Bulb", \.wetBulb.rawValue)
-        displayProperty("Enthalpy", \.enthalpy.rawValue)
-        displayProperty("Density", \.density.rawValue)
-        displayProperty("Vapor Pressure", \.vaporPressure.rawValue)
-        displayProperty("Specific Volume", properties.specificVolume.rawValue)
-        displayProperty("Absolute Humidity", \.absoluteHumidity)
-        displayProperty("Humidity Ratio", properties.humidityRatio.value)
-        displayProperty("Degree of Saturation", properties.degreeOfSaturation.value)
-      }
-    }
-  }
-
-  private func displayProperty(_ label: String, _ value: Double, _ symbol: String? = nil) -> some HTML {
-    let symbol = "\(symbol == nil ? "" : " \(symbol!)")"
-
-    return p(.class("text-blue-500 dark:text-slate-200")) {
-      span(.class("font-semibold")) { "\(label): " }
-      span(.class("font-light")) {
-        "\(double: value)\(symbol)"
-      }
-    }
-  }
-
-  private func displayProperty<N: NumberWithUnitOfMeasure>(
-    _ label: String,
-    _ keyPath: KeyPath<PsychrometricProperties, N>
-  ) -> some HTML where N.Number == Double, N.Units: RawRepresentable, N.Units.RawValue == String {
-    let property = properties[keyPath: keyPath]
-    return displayProperty(label, property.rawValue, property.units.rawValue)
-  }
-}