feat: Style updates, begins adding name/label to trunk sizes. Need to remove register id.

Sources/ViewController/Views/DuctSizing/DuctSizingView.swift

@@ -13,7 +13,7 @@ struct DuctSizingView: HTML, Sendable {
   var body: some HTML {
     div(.class("space-y-4")) {
       PageTitleRow {
-        div(.class("space-y-4")) {
+        div {
           PageTitle("Duct Sizes")
 
           Alert(
@@ -22,7 +22,7 @@ struct DuctSizingView: HTML, Sendable {
             """
           )
           .hidden(when: rooms.count > 0)
-          .attributes(.class("text-error font-bold italic"))
+          .attributes(.class("text-error font-bold italic mt-4"))
         }
       }
 

Sources/ViewController/Views/DuctSizing/TrunkSizeForm.swift

@@ -40,7 +40,7 @@ struct TrunkSizeForm: HTML, Sendable {
 
   var body: some HTML {
     ModalForm(id: Self.id(container), dismiss: dismiss) {
-      h1(.class("text-lg font-bold mb-4")) { "Trunk Size" }
+      h1(.class("text-lg font-bold mb-4")) { "Trunk / Runout Size" }
       form(
         .class("space-y-4"),
         trunk == nil
@@ -72,30 +72,49 @@ struct TrunkSizeForm: HTML, Sendable {
           )
         }
 
-        // Add room select here.
-        div(.class("grid grid-cols-5 gap-6")) {
-          h2(.class("label font-bold col-span-5")) { "Associated Supply Runs" }
-          for room in rooms {
-            div(.class("flex justify-center items-center col-span-1")) {
-              div(.class("grid grid-cols-1 justify-center items-center space-y-1")) {
-                p(.class("label block")) { room.roomName }
-                input(
-                  .class("checkbox mx-auto"),
-                  .type(.checkbox),
-                  .name("rooms"),
-                  .value("\(room.roomID)_\(room.roomRegister)")
-                )
-                .attributes(
-                  .checked,
-                  when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
-                )
+        LabeledInput(
+          "Name",
+          .type(.text),
+          .name("name"),
+          .value(trunk?.name),
+          .placeholder("Trunk-1 (Optional)")
+        )
+
+        div {
+          h2(.class("label font-bold col-span-3 mb-6")) { "Associated Supply Runs" }
+          div(
+            .class(
+              """
+              grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 justify-center items-center gap-4
+              """
+            )
+          ) {
+            for room in rooms {
+              div(.class("block grow")) {
+                div(.class("grid grid-cols-1 space-y-1")) {
+                  div(.class("flex justify-center")) {
+                    p(.class("label")) { room.roomName }
+                  }
+                  div(.class("flex justify-center")) {
+                    input(
+                      .class("checkbox"),
+                      .type(.checkbox),
+                      .name("rooms"),
+                      .value("\(room.roomID)_\(room.roomRegister)")
+                    )
+                    .attributes(
+                      .checked,
+                      when: trunk == nil ? false : trunk!.rooms.hasRoom(room)
+                    )
+                  }
+                }
               }
             }
           }
         }
 
         SubmitButton()
-          .attributes(.class("btn-block"))
+          .attributes(.class("btn-block mt-6"))
       }
     }
   }

Sources/ViewController/Views/DuctSizing/TrunksTable.swift

@@ -11,14 +11,16 @@ extension DuctSizingView {
     let rooms: [DuctSizing.RoomContainer]
 
     private var sortedTrunks: [DuctSizing.TrunkContainer] {
-      trunks.sorted(by: { $0.type.rawValue > $1.type.rawValue })
+      trunks
+        .sorted(by: { $0.designCFM.value > $1.designCFM.value })
+        .sorted(by: { $0.type.rawValue > $1.type.rawValue })
     }
 
     var body: some HTML {
       table(.class("table table-zebra text-lg")) {
         thead {
           tr(.class("text-lg")) {
-            th { "Type" }
+            th { "Name / Type" }
             th { "Associated Supplies" }
             th { "Dsn CFM" }
             th { "Velocity" }
@@ -45,11 +47,17 @@ extension DuctSizingView {
     var body: some HTML<HTMLTag.tr> {
       tr {
         td {
-          Badge {
-            trunk.trunk.type.rawValue
+          div(.class("grid grid-cols-1 space-y-2")) {
+            if let name = trunk.name {
+              p(.class("w-fit")) { name }
+            }
+
+            Badge {
+              trunk.trunk.type.rawValue
+            }
+            .attributes(.class("badge-info"), when: trunk.type == .supply)
+            .attributes(.class("badge-error"), when: trunk.type == .return)
           }
-          .attributes(.class("badge-info"), when: trunk.type == .supply)
-          .attributes(.class("badge-error"), when: trunk.type == .return)
         }
         td {
           div(.class("flex flex-wrap space-x-2 space-y-2")) {