Implemented phase 2 for the POC prototype in the Website service.

Services/Website/Sources/Library/Internal/Components/Icon.swift

@@ -56,6 +56,8 @@ extension Icon {
         case bookmark
         /// A check mark.
         case check
+        /// A cross.
+        case close
         /// A page of text.
         case document
         /// Filter lines.
@@ -85,6 +87,7 @@ extension Icon.Glyph {
         case .bell: #"<path d="M6 16V11a6 6 0 0 1 12 0v5l2 2H4z"></path><path d="M10 21h4"></path>"#
         case .bookmark: #"<path d="M6 3h12v18l-6-4-6 4z"></path>"#
         case .check: #"<path d="m5 12 5 5 9-10"></path>"#
+        case .close: #"<path d="M6 6l12 12M18 6 6 18"></path>"#
         case .document: #"<rect x="5" y="3" width="14" height="18" rx="1"></rect><path d="M9 8h6M9 12h6M9 16h3"></path>"#
         case .filter: #"<path d="M4 6h16M7 12h10M10 18h4"></path>"#
         case .key: #"<circle cx="7.5" cy="15.5" r="4.5"></circle><path d="M10.7 12.3 21 2"></path><path d="m18 5 3 3"></path><path d="m15 8 3 3"></path>"#
@@ -100,7 +103,7 @@ extension Icon.Glyph {
     var strokeWidth: String {
         switch self {
         case .check: "3.5"
-        case .filter, .key, .search, .sort: "2.2"
+        case .close, .filter, .key, .search, .sort: "2.2"
         default: "2"
         }
     }

Services/Website/Sources/Library/Internal/Components/SiteHeader.swift

@@ -218,12 +218,25 @@ private extension SiteHeader {
             )
         ) {
             span(.class("from-desktop")) {
-                viewer.displayName
+                viewer.firstName
             }
             span(.class("site-header__avatar")) {
                 viewer.initials
             }
         }
+        // Not in the design, whose sign-out lives on the account screen the prototype leaves out.
+        form(
+            .class("site-header__sign-out"),
+            .action(.Route.signOut),
+            .method(.post)
+        ) {
+            button(
+                .class("site-header__text-link"),
+                .type(.submit)
+            ) {
+                "Sign out"
+            }
+        }
     }
 
     /// An icon link with a count badge, omitted at zero.

Services/Website/Sources/Library/Internal/Components/Unavailable.swift

@@ -0,0 +1,41 @@
+import Elementary
+
+/// An action the prototype shows but does not build: a button that is visibly, and audibly, unavailable.
+struct Unavailable: HTML {
+
+    // MARK: Properties
+
+    /// The action's name.
+    let label: String
+
+    /// A modifier class sizing or styling the button, or `nil` for none.
+    let modifier: String?
+
+    // MARK: Initializers
+
+    /// Creates an unavailable action.
+    /// - Parameters:
+    ///   - label: the action's name.
+    ///   - modifier: a modifier class sizing or styling the button, or `nil` (the default) for none.
+    init(
+        _ label: String,
+        modifier: String? = nil
+    ) {
+        self.label = label
+        self.modifier = modifier
+    }
+
+    // MARK: Computed
+
+    var body: some HTML {
+        button(
+            .class(["button", modifier].compactMap(\.self).joined(separator: " ")),
+            .type(.button),
+            .disabled,
+            .title("Not part of the prototype")
+        ) {
+            label
+        }
+    }
+
+}