feat: Working on layout / css.

Sources/App/Views/Users/UserDetail.swift

@@ -8,42 +8,41 @@ struct UserDetail: HTML, Sendable {
 
   let user: User?
 
-  var classString: String {
-    user != nil ? "float" : ""
-  }
-
-  var display: String {
-    user != nil ? "block" : "hidden"
-  }
-
   var content: some HTML {
-    div(
-      .id("float"),
-      .class(classString),
-      .style("display: \(display);")
-    ) {
+    Float(shouldDisplay: user != nil, resetURL: "/users") {
       if let user {
-        Button.close(id: "float")
-        form {
+        form(
+          .hx.post("/users/\(user.id)"),
+          .hx.swap(.outerHTML),
+          .hx.target("#user_\(user.id)"),
+          .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
+        ) {
           div(.class("row")) {
             makeLabel(for: "username", value: "Username:")
-            input(.type(.text), .name("username"), .value(user.username))
+            input(.class("col-5"), .type(.text), .id("username"), .name("username"), .value(user.username), .required)
             makeLabel(for: "email", value: "Email:")
-            input(.type(.email), .name("email"), .value(user.username))
+            input(.class("col-5"), .type(.email), .id("email"), .name("email"), .value(user.email), .required)
           }
           div(.class("row")) {
-            div(.style("display: inline-block;")) {
-              h3(.class("label")) { "Created:" }
-              h3 { dateFormatter.formattedDate(user.createdAt) }
-            }
-            div(.style("display: inline-block;")) {
-              h3(.class("label")) { "Updated:" }
-              h3 { dateFormatter.formattedDate(user.updatedAt) }
-            }
+            span(.class("label col-1")) { "Created:" }
+            span(.class("date col-4")) { dateFormatter.formattedDate(user.createdAt) }
+            span(.class("label col-1")) { "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;")
+            ) { "Update" }
+            Button.danger { "Delete" }
+              .attributes(
+                .hx.delete("/users/\(user.id)"),
+                .hx.trigger(.event(.click)),
+                .hx.swap(.outerHTML),
+                .hx.target("#user_\(user.id)"),
+                .custom(name: "hx-on::after-request", value: "toggleContent('float'); window.location.href='/users';")
+              )
           }
-        }
-        div(.class("btn-row user-buttons")) {
-          Button.danger { "Delete" }
         }
       }
     }
@@ -53,7 +52,7 @@ struct UserDetail: HTML, Sendable {
     for name: String,
     value: String
   ) -> some HTML {
-    label(.for(name)) { h3 { value } }
+    label(.for(name), .class("col-1")) { span(.class("label")) { value } }
   }
 
   func row(_ label: String, _ value: String) -> some HTML<HTMLTag.tr> {