feat: Moves vendor branch views to their own files, starts to implement snapshot testing for html

Sources/App/Views/Vendors/VendorDetail.swift

@@ -2,7 +2,6 @@ import Elementary
 import ElementaryHTMX
 import SharedModels
 
-// TODO: Lazy Load branches when view appears.
 struct VendorDetail: HTML {
 
   let vendor: Vendor
@@ -11,8 +10,8 @@ struct VendorDetail: HTML {
     Float(shouldDisplay: true) {
       VendorForm(.formOnly(vendor))
       h2(.style("margin-left: 20px; font-size: 1.5em;"), .class("label")) { "Branches" }
-      branchForm
-      branches
+      VendorBranchForm(vendorID: vendor.id)
+      VendorBranchList(vendorID: vendor.id, branches: nil)
     } closeButton: {
       Button.close(id: "float")
         .attributes(
@@ -23,61 +22,4 @@ struct VendorDetail: HTML {
         )
     }
   }
-
-  // TODO: What route for here??
-  var branchForm: some HTML {
-    form(
-      .id(.branch(.form)),
-      .hx.post("/vendors/branches"),
-      .hx.target("#branches"),
-      .hx.swap(.beforeEnd),
-      .hx.on(.afterRequest, .ifSuccessful(.resetForm))
-      // .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
-    ) {
-      input(.type(.hidden), .name("vendorID"), .value(vendor.id.uuidString))
-      input(
-        .type(.text), .class("col-9"), .name("name"), .placeholder("Add branch..."), .required,
-        // FIX: route
-        // .hx.post(route: .vendorBranch(.index(for: vendor.id))),
-        .hx.trigger(.event(.keyup).changed().delay("800ms")),
-        .hx.target("#branches"),
-        .hx.swap(.beforeEnd) // ,
-        // .custom(name: "hx-on::after-request", value: "if(event.detail.successful) this.reset();")
-      )
-      button(
-        .type(.submit),
-        .class("btn-secondary"),
-        .style("float: right; padding: 10px 50px;"),
-        .hx.target("#branch-table"),
-        .hx.swap(.beforeEnd)
-      ) { "+" }
-    }
-  }
-
-  var branches: some HTML {
-    ul(.id("branches")) {
-      for branch in vendor.branches ?? [] {
-        BranchRow(branch: branch)
-      }
-    }
-  }
-
-  struct BranchRow: HTML {
-    let branch: VendorBranch
-
-    var content: some HTML<HTMLTag.li> {
-      li(.id(.branch(.row(id: branch.id))), .class("branch-row")) {
-        span(.class("label")) { branch.name.capitalized }
-        button(
-          .class("btn"),
-          .hx.delete(route: .vendorBranch(.delete(id: branch.id))),
-          .hx.target(.id(.branch(.row(id: branch.id)))),
-          .hx.swap(.outerHTML.transition(true).swap("0.5s"))
-        ) {
-          img(.src("/images/trash-can.svg"), .width(30), .height(30), .style("margin-top: 5px;"))
-        }
-      }
-    }
-  }
-
 }