overlord/Overlord-Server/public/assets/render.js

import {
  formatAgo,
  formatPing,
  countryToFlag,
  osBadge,
  archBadge,
  versionBadge,
  monitorsBadge,
  shortId,
} from "./viewUtils.js";

function escapeHtml(text) {
  const div = document.createElement("div");
  div.textContent = text;
  return div.innerHTML;
}

export function createRenderer({
  grid,
  totalPill,
  pageLabel,
  openMenu,
  openModal,
  requestPreview,
  requestThumbnail,
  pingClient,
  userRole,
}) {
  const isViewer = userRole === "viewer";
  const MAX_ANIMATED_CARDS = 120;
  const INSERT_BATCH_SIZE = 40;
  const TOUCH_LONG_PRESS_MS = 520;
  const TOUCH_MOVE_CANCEL_PX = 10;
  let renderToken = 0;

  function renderMerge(data, options = {}) {
    const { reorder = false } = options;
    totalPill.textContent = `${data.online ?? data.total} online / ${data.total} total`;
    const totalPages = Math.max(1, Math.ceil(data.total / data.pageSize));
    pageLabel.textContent = `Page ${data.page} of ${totalPages}`;
    prevBtnState(data.page, totalPages);

    const items = data.items || [];
    const seen = new Set();
    const newClients = [];
    const renderId = ++renderToken;
    const prefersReducedMotion =
      typeof window !== "undefined" &&
      window.matchMedia &&
      window.matchMedia("(prefers-reduced-motion: reduce)").matches;

    const hadCards = grid.querySelectorAll("article[data-id]").length > 0;

    items.forEach((client) => {
      seen.add(client.id);
      const existing = grid.querySelector(`article[data-id="${client.id}"]`);
      if (existing) {
        updateCard(existing, client);
        return;
      }
      newClients.push(client);
    });

    Array.from(grid.querySelectorAll("article[data-id]"))
      .filter((el) => !seen.has(el.dataset.id))
      .forEach((el) => el.remove());

    if (reorder) {
      items.forEach((client) => {
        const card = grid.querySelector(`article[data-id="${client.id}"]`);
        if (card) grid.appendChild(card);
      });
    }

    if (newClients.length === 0) {
      return;
    }

    const allowAnimation = !hadCards && !prefersReducedMotion && items.length <= 1000;
    const animateLimit = Math.min(newClients.length, MAX_ANIMATED_CARDS);

    let idx = 0;
    const insertBatch = () => {
      if (renderId !== renderToken) return;
      const fragment = document.createDocumentFragment();
      for (
        let batch = 0;
        batch < INSERT_BATCH_SIZE && idx < newClients.length;
        batch++, idx++
      ) {
        const client = newClients[idx];
        const shouldAnimate = allowAnimation && idx < animateLimit;
        const card = buildCard(client, {
          animate: shouldAnimate,
          delayIndex: idx,
        });
        fragment.appendChild(card);
      }
      grid.appendChild(fragment);
      if (idx < newClients.length) {
        requestAnimationFrame(insertBatch);
        return;
      }
    };

    insertBatch();
  }

  function prevBtnState(currentPage, totalPages) {
    const prevBtn = document.getElementById("prev");
    const nextBtn = document.getElementById("next");
    if (prevBtn) prevBtn.disabled = currentPage <= 1;
    if (nextBtn) nextBtn.disabled = currentPage >= totalPages;
  }

  function buildCard(client, options = {}) {
    const card = document.createElement("article");
    card.dataset.id = client.id;
    card.dataset.hwid = client.hwid || "";
    let longPressTimer = null;
    card._longPressTriggered = false;
    let pointerStartX = 0;
    let pointerStartY = 0;

    const clearLongPress = () => {
      if (longPressTimer) {
        clearTimeout(longPressTimer);
        longPressTimer = null;
      }
    };

    updateCard(card, client);
    card.addEventListener("contextmenu", (e) => {
      e.preventDefault();
      if (isViewer) return;
      const clientId = card.dataset.id;
      if (!clientId) return;
      const { clientX, clientY } = e;
      openMenu(clientId, clientX, clientY);
    });

    card.addEventListener("pointerdown", (e) => {
      if (isViewer || e.pointerType !== "touch") return;
      if (e.target.closest("button") || e.target.closest(".client-checkbox")) return;
      const clientId = card.dataset.id;
      if (!clientId) return;

      card._longPressTriggered = false;
      pointerStartX = e.clientX;
      pointerStartY = e.clientY;
      clearLongPress();
      longPressTimer = setTimeout(() => {
        card._longPressTriggered = true;
        openMenu(clientId, e.clientX, e.clientY);
      }, TOUCH_LONG_PRESS_MS);
    });

    card.addEventListener("pointermove", (e) => {
      if (!longPressTimer || e.pointerType !== "touch") return;
      const movedX = Math.abs(e.clientX - pointerStartX);
      const movedY = Math.abs(e.clientY - pointerStartY);
      if (movedX > TOUCH_MOVE_CANCEL_PX || movedY > TOUCH_MOVE_CANCEL_PX) {
        clearLongPress();
      }
    });

    card.addEventListener("pointerup", clearLongPress);
    card.addEventListener("pointercancel", clearLongPress);
    card.addEventListener("pointerleave", clearLongPress);

    if (options.animate) {
      card.classList.add("card-animate");
      card.style.animationDelay = `${(options.delayIndex || 0) * 0.05}s`;
      card.style.opacity = "0";
      card.style.transform = "translateY(10px)";
      if (typeof anime !== "undefined") {
        requestAnimationFrame(() => {
          anime({
            targets: card,
            opacity: [0, 1],
            translateY: [10, 0],
            duration: 400,
            easing: "easeOutQuad",
          });
        });
      }
    }

    return card;
  }

  function updateCard(card, client) {
    const oldCheckbox = card.querySelector(".client-checkbox");
    const wasChecked = oldCheckbox?.checked || false;
    const wasTagNoteExpanded = card.dataset.tagNoteExpanded === "true";

    card.dataset.online = String(!!client.online);
    card.dataset.os = String(client.os || "").toLowerCase();
    card.dataset.nickname = String(client.nickname || "");
    card.dataset.customTag = String(client.customTag || "");
    card.dataset.bookmarked = String(!!client.bookmarked);
    card._customTagNote = String(client.customTagNote || "");
    const os = osBadge(client.os || "unknown");
    const arch = archBadge(client.arch || "");
    const ver = versionBadge(client.version || "");
    const mons = monitorsBadge(client.monitors);
    const deviceId = shortId(client.id);
    const hwid = shortId(client.hwid || "");
    const nickname = String(client.nickname || "").trim();
    const customTag = String(client.customTag || "").trim();
    const customTagNote = String(client.customTagNote || "");
    const displayName = nickname || client.host || deviceId;
    const hasTagNote = customTag.length > 0 && customTagNote.length > 0;
    const isTagNoteExpanded = hasTagNote && wasTagNoteExpanded;
    card.dataset.tagNoteExpanded = isTagNoteExpanded ? "true" : "false";
    card.className = `card rounded-xl border ${client.bookmarked ? "border-yellow-600/60" : "border-slate-800"} bg-slate-900/70 p-4 shadow-lg ${client.online ? "" : "card-offline"} tone-${os.tone}`;
    const cardThumb = client.thumbnail
      ? (() => {
          const wrapper = document.createElement("div");
          wrapper.className = "flex-shrink-0";
          const img = document.createElement("img");
          img.className =
            "w-40 h-24 rounded-lg border border-slate-800 object-cover cursor-pointer thumb-img";
          img.alt = "preview";
          img.src = client.thumbnail;
          wrapper.appendChild(img);
          return wrapper;
        })()
      : (() => {
          const wrapper = document.createElement("div");
          wrapper.className = "flex-shrink-0";
          wrapper.innerHTML = `<div class="w-40 h-24 rounded-lg border border-dashed border-slate-700 bg-slate-800/40 flex items-center justify-center text-slate-500"><i class="fa-regular fa-image"></i></div>`;
          return wrapper;
        })();

    card.innerHTML = `
      <div class="flex items-center gap-4 flex-wrap">
        <div class="flex-shrink-0 flex items-center">
          <input type="checkbox" class="client-checkbox w-5 h-5 rounded border-slate-600 bg-slate-800 checked:bg-blue-600" data-id="${escapeHtml(client.id)}" ${client.online ? "" : "disabled"}>
        </div>
        <div class="flex-shrink-0"></div>
        <div class="flex-1 min-w-[240px] flex flex-col gap-2">
          <div class="flex items-center gap-3 flex-wrap text-lg font-semibold">
            <span class="text-2xl">${countryToFlag(client.country)}</span>
            <span>${escapeHtml(displayName)}</span>
            ${nickname && client.host ? `<span class="pill pill-ghost text-xs"><i class="fa-solid fa-laptop"></i> ${escapeHtml(client.host)}</span>` : ""}
            ${customTag ? `<button type="button" class="client-tag-toggle pill text-xs border border-amber-700/80 bg-amber-900/30 text-amber-200 ${hasTagNote ? "cursor-pointer hover:bg-amber-800/40" : "cursor-default opacity-90"}" ${hasTagNote ? `aria-expanded="${isTagNoteExpanded ? "true" : "false"}"` : `disabled aria-disabled="true"`}><i class="fa-solid fa-tag"></i> ${escapeHtml(customTag)} ${customTagNote ? `<i class="fa-regular fa-note-sticky"></i><i class="fa-solid ${isTagNoteExpanded ? "fa-chevron-up" : "fa-chevron-down"}"></i>` : ""}</button>` : ""}
            <span class="text-slate-300 text-lg font-semibold flex items-center gap-1"><i class="fa-solid fa-user"></i> ${escapeHtml(client.user || "unknown")}</span>
            <span class="pill ${client.online ? "pill-online" : "pill-offline"}">
              <i class="fa-solid fa-circle"></i>
              ${client.online ? "Online" : "Offline"}
            </span>
          </div>
          ${hasTagNote ? `<div class="client-tag-note rounded-lg border border-amber-900/60 bg-amber-950/20 px-3 py-2 text-sm text-amber-100 whitespace-pre-wrap break-words max-h-48 overflow-auto ${isTagNoteExpanded ? "" : "hidden"}">${escapeHtml(customTagNote)}</div>` : ""}
          <div class="flex items-center gap-2 flex-wrap text-sm text-slate-300">
            <span class="pill pill-ghost"><i class="fa-regular fa-clock"></i> ${formatAgo(client.lastSeen)}</span>
            <span class="pill ${os.tone}"><i class="fa ${os.icon}"></i> ${os.label}</span>
            <span class="pill ${arch.tone}"><i class="fa ${arch.icon}"></i> ${arch.label}</span>
            <span class="pill ${ver.tone}"><i class="fa ${ver.icon}"></i> ${ver.label}</span>
            <span class="pill ${mons.tone}"><i class="fa ${mons.icon}"></i> ${mons.label}</span>
          </div>
          <div class="flex items-center gap-2 flex-wrap text-xs text-slate-400 font-mono">
            <span class="pill pill-ghost">ID ${deviceId}</span>
            ${client.hwid ? `<span class="pill pill-ghost">HW ${hwid}</span>` : ""}
          </div>
        </div>
        <div class="flex items-center gap-3">
          <button class="bookmark-btn inline-flex items-center justify-center w-9 h-9 rounded-lg border ${client.bookmarked ? "border-yellow-600 bg-yellow-900/50 text-yellow-300" : "border-slate-700 bg-slate-800/50 text-slate-500 hover:text-yellow-300 hover:border-yellow-700"} transition-colors" data-id="${escapeHtml(client.id)}" title="${client.bookmarked ? "Remove bookmark" : "Bookmark"}"><i class="fa-${client.bookmarked ? "solid" : "regular"} fa-star"></i></button>
          <span class="text-emerald-300 font-mono text-sm inline-flex items-center gap-2"><i class="fa-solid fa-satellite-dish"></i> ${formatPing(client.pingMs)}</span>
          ${isViewer ? "" : `<button class="command-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-slate-800 bg-slate-800/70 hover:bg-slate-700" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-bars"></i> Commands</button>`}
          ${isViewer ? "" : `<button class="ban-btn inline-flex items-center gap-2 px-3 py-2 rounded-lg border border-red-800 bg-red-900/60 hover:bg-red-800 text-red-100" data-id="${escapeHtml(client.id)}"><i class="fa-solid fa-ban"></i> Ban</button>`}
        </div>
      </div>
    `;

    const thumbSlots = card.querySelectorAll(".flex-shrink-0");
    if (thumbSlots.length >= 2) {
      thumbSlots[1].replaceWith(cardThumb);
    }

    const checkbox = card.querySelector(".client-checkbox");
    if (checkbox) {
      const isSelected =
        typeof window.isClientSelected === "function"
          ? window.isClientSelected(client.id)
          : false;

      if ((wasChecked || isSelected) && client.online) {
        checkbox.checked = true;
      }

      checkbox.addEventListener("change", (e) => {
        e.stopPropagation();
        if (window.toggleClientSelection) {
          window.toggleClientSelection(client.id);
        }
      });
    }

    if (!isViewer) {
      card.querySelector(".command-btn")?.addEventListener("click", (e) => {
        e.stopPropagation();
        const rect = e.currentTarget.getBoundingClientRect();
        openMenu(client.id, rect.right, rect.bottom);
      });
      card.querySelector(".ban-btn")?.addEventListener("click", (e) => {
        e.stopPropagation();
        if (window.banClient) {
          window.banClient(client.id);
        }
      });
    }

    card.querySelector(".bookmark-btn")?.addEventListener("click", async (e) => {
      e.stopPropagation();
      const btn = e.currentTarget;
      const id = btn.dataset.id;
      const isBookmarked = card.dataset.bookmarked === "true";
      try {
        const res = await fetch(`/api/clients/${id}/bookmark`, {
          method: "PATCH",
          headers: { "Content-Type": "application/json" },
          body: JSON.stringify({ bookmarked: !isBookmarked }),
        });
        if (res.ok) {
          card.dataset.bookmarked = String(!isBookmarked);
          const icon = btn.querySelector("i");
          if (!isBookmarked) {
            btn.classList.remove("border-slate-700", "bg-slate-800/50", "text-slate-500");
            btn.classList.add("border-yellow-600", "bg-yellow-900/50", "text-yellow-300");
            card.classList.remove("border-slate-800");
            card.classList.add("border-yellow-600/60");
            if (icon) { icon.classList.remove("fa-regular"); icon.classList.add("fa-solid"); }
            btn.title = "Remove bookmark";
          } else {
            btn.classList.remove("border-yellow-600", "bg-yellow-900/50", "text-yellow-300");
            btn.classList.add("border-slate-700", "bg-slate-800/50", "text-slate-500");
            card.classList.remove("border-yellow-600/60");
            card.classList.add("border-slate-800");
            if (icon) { icon.classList.remove("fa-solid"); icon.classList.add("fa-regular"); }
            btn.title = "Bookmark";
          }
        }
      } catch (err) {
        console.error("bookmark toggle failed", err);
      }
    });

    card.querySelector(".client-tag-toggle")?.addEventListener("click", (e) => {
      e.stopPropagation();
      const notePanel = card.querySelector(".client-tag-note");
      if (!notePanel) return;
      const expanded = notePanel.classList.toggle("hidden") === false;
      card.dataset.tagNoteExpanded = expanded ? "true" : "false";
      const tagToggle = card.querySelector(".client-tag-toggle");
      tagToggle?.setAttribute("aria-expanded", expanded ? "true" : "false");
      const chevron = tagToggle?.querySelector(".fa-chevron-up, .fa-chevron-down");
      if (chevron) {
        chevron.classList.toggle("fa-chevron-up", expanded);
        chevron.classList.toggle("fa-chevron-down", !expanded);
      }
    });

    card
      .querySelector(".thumb-img")
      ?.addEventListener("click", () => openModal(client.thumbnail));

    card.onclick = (e) => {
      if (card._longPressTriggered) {
        card._longPressTriggered = false;
        e.preventDefault();
        e.stopPropagation();
        return;
      }
      if (e.target.closest(".command-btn") || e.target.closest("button"))
        return;
      if (e.target.closest(".client-checkbox")) return;
      if (e.ctrlKey || e.metaKey || e.shiftKey) {
        if (checkbox && !checkbox.disabled) {
          checkbox.checked = !checkbox.checked;
          if (window.toggleClientSelection) {
            window.toggleClientSelection(client.id);
          }
        }
        return;
      }
      if (!client.online) return;
      if (pingClient) pingClient(client.id);
      requestThumbnail(client.id);
    };
  }

  return { renderMerge };
}