Function wireSupportersDialog

static/js/catalog.js:1626–1706

()

// the partner tiles. Links open externally via the document-level
// a[target="_blank"] handler in main.js (Tauri open_url on desktop).
function wireSupportersDialog() {
  const btn = document.getElementById("friendsBtn");
  const dialog = document.getElementById("friendsDialog");
  const close = document.getElementById("friendsClose");
  const grid = document.getElementById("friendsDialogGrid");
  if (!btn || !dialog) return;

  if (grid && grid.dataset.ready !== "1") {
    grid.dataset.ready = "1";
    // Masonry: round-robin tiles into fixed columns so a tall tile in one
    // column does not push the next row down. Small per-tile tilt gives the
    // deliberately-uneven "frames on a wall" look.
    const COLS = 3;
    const tilts = ["-2deg", "1.5deg", "-1deg", "2deg", "-1.5deg", "1deg"];
    const cols = [];
    for (let i = 0; i < COLS; i++) {
      const col = document.createElement("div");
      col.className = "lib-friends-col";
      cols.push(col);
      grid.appendChild(col);
    }
    FRIENDS.forEach((f, i) => {
      const a = document.createElement("a");
      a.className = "lib-friend";
      a.href = f.url;
      a.target = "_blank";
      a.rel = "noopener noreferrer";
      a.title = f.name;
      a.style.setProperty("--tilt", tilts[i % tilts.length]);
      // A monogram avatar (first initial) keeps the tile on-brand when an entry
      // has no image, or its image fails to load (e.g. before the asset is added).
      const makeMonogram = () => {
        const m = document.createElement("span");
        m.className = "lib-friend-monogram";
        m.textContent = (f.name || "?").trim().charAt(0).toUpperCase();
        m.setAttribute("aria-hidden", "true");
        return m;
      };
      if (f.logo) {
        const img = document.createElement("img");
        img.className = f.avatar ? "lib-friend-avatar" : "lib-friend-logo";
        img.src = f.logo;
        img.alt = f.name;
        img.loading = "lazy";
        img.addEventListener("error", () => img.replaceWith(makeMonogram()));
        a.appendChild(img);
      } else {
        a.appendChild(makeMonogram());
      }
      const name = document.createElement("span");
      name.className = "lib-friend-name";
      name.textContent = f.name;
      a.appendChild(name);
      if (f.role) {
        const role = document.createElement("span");
        role.className = "lib-friend-role";
        role.textContent = f.role;
        a.appendChild(role);