feat: Mostly working user view with elementary html.

Sources/App/Views/Buttons.swift

@@ -7,3 +7,14 @@ struct ToggleFormButton: HTML {
     }
   }
 }
+
+enum Button {
+
+  static func danger<C: HTML>(@HTMLBuilder body: () -> C) -> some HTML<HTMLTag.button> {
+    button(.class("danger")) { body() }
+  }
+
+  static func close(id: String) -> some HTML<HTMLTag.button> {
+    button(.class("btn-add"), .on(.click, "toggleContent('\(id)')")) { "x" }
+  }
+}

Sources/App/Views/Float.swift

@@ -0,0 +1,27 @@
+import Elementary
+
+struct Float<C: HTML>: HTML {
+
+  let id: String
+  let body: C?
+
+  init(id: String = "float") {
+    self.id = id
+    self.body = nil
+  }
+
+  init(id: String = "float", @HTMLBuilder body: () -> C) {
+    self.id = id
+    self.body = body()
+  }
+
+  var content: some HTML {
+    div(.id(id), .class("float")) {
+      if let body {
+        body
+      }
+    }
+  }
+}
+
+extension Float: Sendable where C: Sendable {}

Sources/App/Views/Main.swift

@@ -7,9 +7,15 @@ struct MainPage<Inner: HTML>: HTMLDocument {
 
   let inner: Inner
   let displayNav: Bool
+  let routeHeader: RouteHeaderView
 
-  init(displayNav: Bool = false, _ inner: () -> Inner) {
+  init(
+    displayNav: Bool = false,
+    route: ViewRoute,
+    _ inner: () -> Inner
+  ) {
     self.displayNav = displayNav
+    self.routeHeader = .init(route: route)
     self.inner = inner()
   }
 
@@ -27,6 +33,7 @@ struct MainPage<Inner: HTML>: HTMLDocument {
         Navbar()
       }
     }
+    routeHeader
     inner
   }
 }

Sources/App/Views/RouteHeaderView.swift

@@ -0,0 +1,26 @@
+import Elementary
+import ElementaryHTMX
+
+struct RouteHeaderView: HTML {
+
+  let title: String
+  let description: String
+
+  init(title: String, description: String) {
+    self.title = title
+    self.description = description
+  }
+
+  init(route: ViewRoute) {
+    self.init(title: route.title, description: route.description)
+  }
+
+  var content: some HTML {
+    div(.class("container"), .style("padding: 20px 20px;")) {
+      h1 { title }
+      br()
+      p { description }
+      br()
+    }
+  }
+}

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")
+          ) {
+            "〉"
+          }
+        }
       }
     }
   }

Sources/App/Views/ViewRoute.swift

@@ -0,0 +1,31 @@
+enum ViewRoute: String {
+
+  case employees
+  case login
+  case purchaseOrders
+  case users
+  case vendors
+
+  var title: String {
+    switch self {
+    case .purchaseOrders:
+      return "Purchase Orders"
+    default:
+      return rawValue.capitalized
+    }
+  }
+
+  var description: String {
+    switch self {
+    case .employees:
+      return "Employees are who purchase orders can be issued to."
+    case .purchaseOrders, .login:
+      return ""
+    case .users:
+      return "Users are who can login and issue purchase orders for employees."
+    case .vendors:
+      return "Vendors are where purchase orders can be issued to."
+    }
+  }
+
+}