Function renderUiExamples

app.js:2595–2637

()

}

function renderUiExamples() {
  if (!uiExamplesList) return;
  uiExamplesList.innerHTML = "";

  const list = uiExamplesActiveTab === "oled" ? UI_EXAMPLES_OLED : UI_EXAMPLES;
  const totalPages = Math.max(1, Math.ceil(list.length / UI_EXAMPLES_PER_PAGE));
  const currentPage = Math.min(
    totalPages - 1,
    Math.max(0, uiExamplesPageByTab[uiExamplesActiveTab] || 0)
  );
  uiExamplesPageByTab[uiExamplesActiveTab] = currentPage;

  if (uiExamplesPagePill) {
    uiExamplesPagePill.textContent = `Page ${currentPage + 1} / ${totalPages}`;
  }
  if (uiExamplesPrevBtn) uiExamplesPrevBtn.disabled = currentPage <= 0;
  if (uiExamplesNextBtn) uiExamplesNextBtn.disabled = currentPage >= totalPages - 1;

  const start = currentPage * UI_EXAMPLES_PER_PAGE;
  const pageItems = list.slice(start, start + UI_EXAMPLES_PER_PAGE);

  pageItems.forEach((ex) => {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "link-chip example-chip";
    btn.innerHTML = `
      <span class="icon">${ex.icon}</span>
      <span class="example-chip-text">
        <span class="example-chip-title">${ex.title}</span>
        <span class="example-chip-desc">${ex.desc}</span>
      </span>
    `;
    btn.addEventListener("click", () => {
      const screen = createScreen(ex.title, safeFnNameFromTitle(ex.title));
      screen.elements = ex.build(dispWidth, dispHeight);
      refreshScreenUI();
      setActiveScreen(screen.id, false);
      pushHistory();
      scrollToScreensSettings();
    });
    uiExamplesList.appendChild(btn);
  });
}

function normalizeIconNameFromFile(file) {
  const raw = String(file || "").replace(/\\/g, "/");