captain-claude/hst-frontend/js/views/tree.js

// === TREE VIEW ===

function renderTree() {
    const el = document.getElementById("tree-view");
    const filtered = filterTags();

    if (!filtered.length) {
        el.innerHTML = '<div class="empty-state"><div>Sin datos</div></div>';
        return;
    }

    // Group tags by set_hst
    const groups = new Map();
    filtered.forEach(t => {
        const g = t.set_hst || "other";
        if (!groups.has(g)) groups.set(g, []);
        groups.get(g).push(t);
    });

    el.innerHTML = [...groups.entries()].map(([gid, tags]) => {
        const info = state.groups.find(g => g.mrf === gid);
        const name = info ? (info.name_es || info.ref) : gid === "other" ? "Sin grupo" : gid.slice(0, 10);

        return `<div class="tree-root">
            <div class="tree-item" data-expand="${gid}">
                <span class="tree-toggle">+</span>
                <span class="tree-name" style="font-weight:600;color:var(--accent)">${name} (${tags.length})</span>
            </div>
            <div class="tree-children" id="tree-${gid}">
                ${tags.map(t => {
                    const sel = state.selected.has(t.mrf);
                    const img = getImg(t);
                    return `<div class="tree-node">
                        <div class="tree-item ${sel ? "selected" : ""}" data-mrf="${t.mrf}">
                            <span class="tree-checkbox ${state.selectionMode ? "visible" : ""} ${sel ? "checked" : ""}"></span>
                            <span class="tree-toggle"></span>
                            ${img ? `<img class="tree-img" src="${img}" alt="">` : ""}
                            <span class="tree-name">${t.ref} - ${getName(t)}</span>
                        </div>
                    </div>`;
                }).join("")}
            </div>
        </div>`;
    }).join("");

    // Bind expand/collapse
    el.querySelectorAll(".tree-item[data-expand]").forEach(i => {
        i.onclick = () => {
            const ch = document.getElementById(`tree-${i.dataset.expand}`);
            if (ch) {
                ch.classList.toggle("open");
                i.querySelector(".tree-toggle").textContent = ch.classList.contains("open") ? "-" : "+";
            }
        };
    });

    // Bind tag click
    el.querySelectorAll(".tree-item[data-mrf]").forEach(i => {
        i.onclick = e => {
            e.stopPropagation();
            state.selectionMode ? toggleSel(i.dataset.mrf) : showDetail(i.dataset.mrf);
        };
    });
}