feat: Begins vendor views

Sources/App/Views/Users/UserDetail.swift

@@ -19,20 +19,20 @@ struct UserDetail: HTML, Sendable {
         ) {
           div(.class("row")) {
             makeLabel(for: "username", value: "Username:")
-            input(.class("col-5"), .type(.text), .id("username"), .name("username"), .value(user.username), .required)
+            input(.class("col-4"), .type(.text), .id("username"), .name("username"), .value(user.username), .required)
             makeLabel(for: "email", value: "Email:")
-            input(.class("col-5"), .type(.email), .id("email"), .name("email"), .value(user.email), .required)
+            input(.class("col-4"), .type(.email), .id("email"), .name("email"), .value(user.email), .required)
           }
           div(.class("row")) {
-            span(.class("label col-1")) { "Created:" }
+            span(.class("label col-2")) { "Created:" }
             span(.class("date col-4")) { dateFormatter.formattedDate(user.createdAt) }
-            span(.class("label col-1")) { "Updated:" }
+            span(.class("label col-2")) { "Updated:" }
             span(.class("date col-4")) { dateFormatter.formattedDate(user.updatedAt) }
           }
           div(.class("btn-row user-buttons")) {
             button(
               .type(.submit),
-              .style("background-color: blue; color: white;")
+              .class("btn-secondary")
             ) { "Update" }
             Button.danger { "Delete" }
               .attributes(
@@ -40,6 +40,7 @@ struct UserDetail: HTML, Sendable {
                 .hx.trigger(.event(.click)),
                 .hx.swap(.outerHTML),
                 .hx.target("#user_\(user.id)"),
+                .hx.confirm("Are you sure you want to delete this user?"),
                 .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
               )
           }
@@ -52,7 +53,7 @@ struct UserDetail: HTML, Sendable {
     for name: String,
     value: String
   ) -> some HTML {
-    label(.for(name), .class("col-1")) { span(.class("label")) { value } }
+    label(.for(name), .class("col-2")) { span(.class("label")) { value } }
   }
 
   func row(_ label: String, _ value: String) -> some HTML<HTMLTag.tr> {

Sources/App/Views/Users/UserForm.swift

@@ -1,6 +1,7 @@
 import Elementary
 import ElementaryHTMX
 
+// Form used to login or create a new user.
 struct UserForm: HTML, Sendable {
   let context: Context
 
@@ -27,25 +28,31 @@ struct UserForm: HTML, Sendable {
         value: "if(event.detail.successful) this.reset(); toggleContent('float');"
       )
     ) {
-      input(.type(.text), .id("username"), .name("username"), .placeholder("Username"), .autofocus, .required)
-      br()
+      div(.class("row")) {
+        input(.type(.text), .id("username"), .name("username"), .placeholder("Username"), .autofocus, .required)
+      }
       if context.showEmailInput {
-        input(.type(.email), .id("email"), .name("email"), .placeholder("Email"), .required)
-        br()
+        div(.class("row")) {
+          input(.type(.email), .id("email"), .name("email"), .placeholder("Email"), .required)
+        }
+      }
+      div(.class("row")) {
+        input(.type(.password), .id("password"), .name("password"), .placeholder("Password"), .required)
       }
-      input(.type(.password), .id("password"), .name("password"), .placeholder("Password"), .required)
-      br()
       if context.showConfirmPassword {
-        input(
-          .type(.password),
-          .id("confirmPassword"),
-          .name("confirmPassword"),
-          .placeholder("Confirm Password"),
-          .required
-        )
-        br()
+        div(.class("row")) {
+          input(
+            .type(.password),
+            .id("confirmPassword"),
+            .name("confirmPassword"),
+            .placeholder("Confirm Password"),
+            .required
+          )
+        }
+      }
+      div(.class("row")) {
+        button(.type(.submit), .class("btn-primary")) { context.buttonLabel }
       }
-      input(.type(.submit), .value(context.buttonLabel))
     }
   }
 

Sources/App/Views/Users/UserTable.swift

@@ -44,15 +44,12 @@ struct UserTable: HTML {
         td { user.username }
         td { user.email }
         td {
-          button(
+          Button.detail().attributes(
             .hx.get("/users/\(user.id.uuidString)"),
             .hx.target("#float"),
             .hx.swap(.outerHTML),
-            .hx.pushURL(true),
-            .class("btn-detail")
-          ) {
-            "〉"
-          }
+            .hx.pushURL(true)
+          )
         }
       }
     }