feat: Mostly working user view with elementary html.

Sources/App/Views/Users/UserDetail.swift

@@ -0,0 +1,73 @@
+import Dependencies
+import Elementary
+import Foundation
+import SharedModels
+
+struct UserDetail: HTML, Sendable {
+  @Dependency(\.dateFormatter) var dateFormatter
+
+  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);")
+    ) {
+      if let user {
+        Button.close(id: "float")
+        form {
+          div(.class("row")) {
+            makeLabel(for: "username", value: "Username:")
+            input(.type(.text), .name("username"), .value(user.username))
+            makeLabel(for: "email", value: "Email:")
+            input(.type(.email), .name("email"), .value(user.username))
+          }
+          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) }
+            }
+          }
+        }
+        div(.class("btn-row user-buttons")) {
+          Button.danger { "Delete" }
+        }
+      }
+    }
+  }
+
+  func makeLabel(
+    for name: String,
+    value: String
+  ) -> some HTML {
+    label(.for(name)) { h3 { value } }
+  }
+
+  func row(_ label: String, _ value: String) -> some HTML<HTMLTag.tr> {
+    tr {
+      td(.class("label")) { h3 { label } }
+      td { h3 { value } }
+    }
+  }
+}
+
+extension DateFormatter {
+
+  func formattedDate(_ date: Date?) -> String {
+    guard let date else { return "" }
+    return string(from: date)
+  }
+}

Sources/App/Views/Users/UserIndex.swift

@@ -0,0 +1,19 @@
+import DatabaseClient
+import Elementary
+import SharedModels
+
+struct UserIndex: HTML {
+  let user: User?
+
+  init(user: User? = nil) {
+    self.user = user
+  }
+
+  var content: some HTML {
+    div {
+      // UserDetail(user: user)
+      div(.id("float"), .class("float")) {}
+      UserTable()
+    }
+  }
+}

Sources/App/Views/Users/UserTable.swift

@@ -14,7 +14,7 @@ struct UserTable: HTML {
         tr {
           th { "Username" }
           th { "Email" }
-          th { ToggleFormButton() }
+          th(.style("width: 50px;")) { ToggleFormButton() }
         }
       }
       tbody {
@@ -33,7 +33,16 @@ struct UserTable: HTML {
       tr {
         td { user.username }
         td { user.email }
-        td { "Fix me." }
+        td {
+          button(
+            .hx.get("/users/\(user.id.uuidString)"),
+            .hx.target("#float"),
+            .hx.swap(.outerHTML),
+            .class("btn-detail")
+          ) {
+            "〉"
+          }
+        }
       }
     }
   }