feat: Working on dehumidifier sizing, api and routes implemented, views are not complete.

Sources/ViewController/Views/DehumidifierSize.swift

@@ -0,0 +1,96 @@
+import Elementary
+import ElementaryHTMX
+import Routes
+import Styleguide
+
+struct DehumidifierSizeForm: HTML {
+  var content: some HTML {
+    FormHeader(label: "Dehumidifier Sizing Calculator", svg: .droplets)
+    form(
+      // Using index to get the correct path, but really uses the `submit` end-point.
+      .hx.post(route: .dehumidifierSize(.index)),
+      .hx.target("#result")
+    ) {
+      div(.class("space-y-6")) {
+        LabeledContent(label: "Latent Load (BTU/h)") {
+          Input(id: "latentLoad", placeholder: "Latent load from Manual-J")
+            .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus, .required)
+        }
+
+        LabeledContent(label: "Indoor Temperature (°F)") {
+          Input(id: "temperature", placeholder: "Indoor dry bulb temperature")
+            .attributes(.type(.number), .step("0.1"), .min("0.1"), .required)
+        }
+
+        LabeledContent(label: "Indoor Humdity (%)") {
+          Input(id: "humidity", placeholder: "Relative humidity")
+            .attributes(.type(.number), .step("0.1"), .min("0.1"), .required)
+        }
+
+        div {
+          SubmitButton(label: "Calculate Dehumidifier Size")
+        }
+      }
+    }
+    div(.id("result")) {}
+  }
+}
+
+struct DehumidifierSizeResult: HTML {
+  let response: DehumidifierSize.Response
+
+  var content: some HTML {
+    ResultContainer(reset: .dehumidifierSize(.index)) {
+      div(.class("""
+        p-2 rounded-lg shadow-lg bg-blue-500
+        """
+      )) {
+        p { "Recommended Size: \(response.recommendedSize)" }
+      }
+
+      // Display warnings, if applicable
+      if response.warnings.count > 0 {
+        div(.class("w-full mt-8 p-4 rounded-lg shadow-lg text-amber-500 bg-amber-200 border border-amber-500")) {
+          span(.class("font-semibold mb-4 border-b")) { "Warning\(response.warnings.count > 1 ? "s:" : ":")" }
+          ul(.class("list-disc mx-10")) {
+            for warning in response.warnings {
+              li { warning }
+            }
+          }
+        }
+      }
+
+      Note {
+        """
+        Sizing is based on continuous operation at rated conditions. Actual performance will vary based on
+        operating conditions. Consider Energy Star rated units for better efficiency. For whole-house
+        applications, ensure proper air distribution and drainage.
+        """
+      }
+    }
+  }
+}
+
+// <div className = "p-4 bg-white rounded-lg shadow-sm">
+// <p className = Recommended < "text-sm text-gray-600 mb-2" Size: </p>
+// <a
+// href = { result.recommendedSize.url }
+// target = "_blank"
+// rel = "noopener noreferrer"
+// className = "block p-4 bg-blue-100 rounded-lg hover:bg-blue-200 transition-colors group"
+// >
+// <div className = "flex items-center justify-between">
+// <div>
+//   <span className = "text-2xl font-bold text-blue-700">
+//   { result.recommendedSize.size } PPD
+//   </span>
+//   <p className = "text-sm text-blue-600 mt-1">
+//   Click to view available models →
+//   </p>
+//   </div>
+//   <div className = "w-12 h-12 bg-blue-200 rounded-full flex items-center justify-center group-hover:bg-blue-300 transition-colors">
+//   <Droplets className = "w-6 h-6 text-blue-700" />
+//   </div>
+//   </div>
+//   </a>
+//   </div >

Sources/ViewController/Views/MainPage.swift

@@ -1,4 +1,6 @@
 import Elementary
+import ElementaryHTMX
+import Routes
 import Styleguide
 
 struct MainPage<Inner: HTML>: SendableHTMLDocument where Inner: Sendable {
@@ -68,7 +70,10 @@ private struct Header: HTML {
             }
           }
           li {
-            a(.href("#"), .class("[&:hover]:border-b \(border: .yellow)")) {
+            a(
+              .class("[&:hover]:border-b \(border: .yellow)"),
+              .hx.get(route: .dehumidifierSize(.index)), .hx.target("#content"), .hx.pushURL(true)
+            ) {
               "Dehumidifier-Sizing"
             }
           }

Sources/ViewController/Views/MoldRisk.swift

@@ -1,4 +1,5 @@
 import Elementary
+import ElementaryHTMX
 import PsychrometricClient
 import Routes
 import Styleguide
@@ -20,7 +21,7 @@ struct MoldRiskForm: HTML {
             .attributes(.type(.number), .step("0.1"), .min("0.1"), .autofocus)
         }
 
-        LabeledContent(label: "Indor Humdity (%)") {
+        LabeledContent(label: "Indoor Humdity (%)") {
           Input(id: "humidity", placeholder: "Relative humidity")
             .attributes(.type(.number), .step("0.1"), .min("0.1"))
         }
@@ -88,15 +89,12 @@ struct MoldRiskResponse: HTML {
         .attributes(.class("mx-6"))
 
       // Disclaimer.
-      div(.class("mt-8 p-4 bg-gray-100 dark:bg-gray-700 rounded-md shadow-md border border-blue-500")) {
-        p(.class("text-sm text-blue-500")) {
-          span(.class("font-extrabold pe-2")) { "Note:" }
-          """
-           These calculations are based on typical indoor conditions and common mold species. Actual mold growth can
-           vary based on surface materials, air movement, and other environmental factors. Always address moisture
-           issues promptly and consult professionals for severe cases.
-          """
-        }
+      Note {
+        """
+         These calculations are based on typical indoor conditions and common mold species. Actual mold growth can
+         vary based on surface materials, air movement, and other environmental factors. Always address moisture
+         issues promptly and consult professionals for severe cases.
+        """
       }
     }
   }