Function renderIconGrid

app.js:3028–3071

()

}

function renderIconGrid() {
  if (!iconGrid) return;
  const icons = filterFileIcons(iconSearchInput ? iconSearchInput.value : "");
  iconGrid.innerHTML = "";
  if (iconCountPill) {
    iconCountPill.textContent = `${icons.length} icons`;
  }

  const totalPages = Math.max(1, Math.ceil(icons.length / ICONS_PER_PAGE));
  iconPage = Math.min(totalPages - 1, Math.max(0, iconPage));
  if (iconPagePill) iconPagePill.textContent = `Page ${iconPage + 1} / ${totalPages}`;
  if (iconPrevBtn) iconPrevBtn.disabled = iconPage <= 0;
  if (iconNextBtn) iconNextBtn.disabled = iconPage >= totalPages - 1;

  const start = iconPage * ICONS_PER_PAGE;
  const pageIcons = icons.slice(start, start + ICONS_PER_PAGE);

  pageIcons.forEach((ic) => {
    const btn = document.createElement("button");
    btn.type = "button";
    btn.className = "icon-tile";
    btn.title = ic.name;
    const img = document.createElement("img");
    img.src = withCacheBust(ic.url);
    img.alt = ic.name;
    img.loading = "lazy";
    btn.appendChild(img);

    btn.addEventListener("click", async (e) => {
      await addIconElement(ic);
      if (e.shiftKey) {
        try {
          await navigator.clipboard.writeText(ic.url);
          setIconHint(`Added + copied: ${ic.url}`);
        } catch {
          setIconHint(`Added: ${ic.name}`);
        }
      } else {
        setIconHint(`Added: ${ic.name}`);
      }
    });
    iconGrid.appendChild(btn);
  });
}


function createScreen(name, fnName) {