Add DM UI shell components

js/ui/dm/MessageThread.js

@@ -0,0 +1,80 @@
+import { DayDivider } from "./DayDivider.js";
+import { MessageBubble } from "./MessageBubble.js";
+
+function createElement(doc, tag, className, text) {
+  const element = doc.createElement(tag);
+  if (className) {
+    element.className = className;
+  }
+  if (typeof text === "string") {
+    element.textContent = text;
+  }
+  return element;
+}
+
+export function MessageThread({
+  document: doc,
+  contact = {},
+  messages = [],
+  state = "idle",
+  errorType = "",
+} = {}) {
+  if (!doc) {
+    throw new Error("MessageThread requires a document reference.");
+  }
+
+  const root = createElement(doc, "section", "dm-message-thread");
+
+  const header = createElement(doc, "header", "dm-message-thread__header");
+  header.appendChild(
+    createElement(
+      doc,
+      "h3",
+      "dm-message-thread__title",
+      contact.name || "Direct Messages",
+    ),
+  );
+  if (contact.status) {
+    header.appendChild(
+      createElement(doc, "span", "dm-message-thread__status", contact.status),
+    );
+  }
+  root.appendChild(header);
+
+  const timeline = createElement(doc, "div", "dm-message-thread__timeline");
+  timeline.setAttribute("role", "log");
+  timeline.setAttribute("aria-live", "polite");
+
+  const stateEl = createElement(doc, "div", "dm-message-thread__state");
+
+  if (state === "loading") {
+    stateEl.textContent = "Decrypting messages…";
+    timeline.appendChild(stateEl);
+  } else if (state === "empty") {
+    stateEl.textContent = "Say hello to start the conversation.";
+    timeline.appendChild(stateEl);
+  } else if (state === "error") {
+    const errorMessage =
+      errorType === "decrypt"
+        ? "We couldn't decrypt some messages."
+        : "Something went wrong loading this thread.";
+    stateEl.textContent = errorMessage;
+    timeline.appendChild(stateEl);
+  } else {
+    messages.forEach((message) => {
+      if (message.type === "day") {
+        timeline.appendChild(DayDivider({ document: doc, label: message.label }));
+        return;
+      }
+      const bubble = MessageBubble({
+        document: doc,
+        message,
+        variant: message.direction === "outgoing" ? "outgoing" : "incoming",
+      });
+      timeline.appendChild(bubble);
+    });
+  }
+
+  root.appendChild(timeline);
+  return root;
+}