Function renderLibraryRows

static/js/catalog.js:1770–1818

(tbody)

// textContent — titles/URLs are untrusted (YouTube/SoundCloud) so never
// interpolate them into innerHTML.
function renderLibraryRows(tbody) {
  tbody.textContent = "";
  const trashIds = new Set(getTrashFolder()?.items || []);
  // Only out-of-sync (audio missing) tracks — this table sits next to Resync.
  const entries = Object.entries(tracks)
    .filter(([id, t]) => !trashIds.has(id) && t.status === "unavailable")
    .sort((a, b) => (b[1].createdAt || 0) - (a[1].createdAt || 0));

  if (!entries.length) {
    const tr = document.createElement("tr");
    const td = document.createElement("td");
    td.colSpan = 3;
    td.className = "library-editor-empty";
    td.textContent = "All tracks are in sync.";
    tr.appendChild(td);
    tbody.appendChild(tr);
    return;
  }

  for (const [id, t] of entries) {
    const tr = document.createElement("tr");
    tr.dataset.id = id;
    if (t.status === "unavailable") tr.className = "unavailable";

    const name = document.createElement("td");
    name.className = "le-name";
    name.textContent = t.title || "—";
    name.title = t.title || "";
    if (t.status === "unavailable") {
      const badge = document.createElement("span");
      badge.className = "le-badge";
      badge.textContent = "unavailable";
      name.appendChild(badge);
    }

    const source = document.createElement("td");
    source.className = "le-source";
    source.textContent = deriveSource(t.sourceUrl);

    const loc = document.createElement("td");
    loc.className = "le-loc";
    const locText = libraryLocation(t.sourceUrl);
    loc.textContent = locText;
    loc.title = locText;

    tr.append(name, source, loc);
    tbody.appendChild(tr);
  }
}

// "Make StemDeck available on your network" toggle. The backend always binds
// all interfaces and gates LAN access on a runtime flag (GET/POST /api/settings)