bitvid/js/ui/dm/ContactRow.js

import { Avatar } from "./Avatar.js";
import { formatZapAmount } from "./zapHelpers.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 ContactRow({
  document: doc,
  contact = {},
  isActive = false,
  tabIndex = -1,
  onSelect,
} = {}) {
  if (!doc) {
    throw new Error("ContactRow requires a document reference.");
  }

  const {
    id = "",
    name = "Unknown",
    preview = "",
    timestamp = "",
    unreadCount = 0,
    avatarSrc = "",
    status = "",
    zapTotalSats = null,
  } = contact;

  const button = createElement(doc, "button", "dm-contact-row");
  button.type = "button";
  button.dataset.conversationId = id;
  button.setAttribute("role", "option");
  button.setAttribute("aria-selected", String(Boolean(isActive)));
  button.tabIndex = tabIndex;
  if (isActive) {
    button.classList.add("dm-contact-row--active");
  }

  const avatar = Avatar({
    document: doc,
    src: avatarSrc,
    alt: name,
    size: "md",
    initials: name,
    status,
  });
  button.appendChild(avatar);

  const content = createElement(doc, "div", "dm-contact-row__content");
  const header = createElement(doc, "div", "dm-contact-row__header");
  const nameEl = createElement(doc, "span", "dm-contact-row__name", name);
  header.appendChild(nameEl);

  const meta = createElement(doc, "span", "dm-contact-row__meta");

  if (Number.isFinite(zapTotalSats)) {
    const zapTotal = createElement(
      doc,
      "span",
      "dm-contact-row__zap",
      formatZapAmount(zapTotalSats, { compact: true }),
    );
    zapTotal.setAttribute(
      "aria-label",
      `Total zaps ${formatZapAmount(zapTotalSats)}`,
    );
    meta.appendChild(zapTotal);
  }

  header.appendChild(meta);
  content.appendChild(header);

  if (unreadCount > 0) {
    const badge = createElement(doc, "span", "dm-contact-row__badge");
    badge.textContent = `${unreadCount}`;
    badge.setAttribute("aria-label", `${unreadCount} unread messages`);
    content.appendChild(badge);
  }

  button.appendChild(content);

  if (typeof onSelect === "function") {
    button.addEventListener("click", () => onSelect(contact));
  }

  return button;
}