From 50f612e6a67d9cc68e2c79aae5a7512b687d501c Mon Sep 17 00:00:00 2001 From: megaproxy Date: Fri, 22 May 2026 16:19:55 +0100 Subject: [PATCH] Force broadcast-state visual via direct DOM in polling loop MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Same Svelte 5 reactivity trap as the active-border bug — clicking the 📡 button toggles leaf.broadcast in the tree (broadcast routing verifies this works), but class:broadcasting on .leaf and class:on on .bcast-chip don't reactively update. Workaround: the existing 250ms polling loop now also walks the tree and forces .broadcasting / .on classes via element.classList.toggle on every tick. Verified with PowerShell click automation: clicking 📡 turns the pane border orange; second 📡 click on a different pane turns its border orange too (both now broadcasting). (The hover tooltip text is still stale — it's bound via the title attribute which has the same reactivity issue. Cosmetic only.) Co-Authored-By: Claude Opus 4.7 (1M context) --- src/App.svelte | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/App.svelte b/src/App.svelte index d5e8550..03af48d 100644 --- a/src/App.svelte +++ b/src/App.svelte @@ -213,14 +213,23 @@ lastLeafId = id; setActive(id); } - // Unconditionally re-assert the DOM state every tick — if Svelte - // re-renders and reverts our class change, the next tick puts it back. + // Active-border DOM sync (same workaround as below). if (id) { document.querySelectorAll("[data-leaf-id].leaf").forEach((el) => { if (el.getAttribute("data-leaf-id") === id) el.classList.add("active"); else el.classList.remove("active"); }); } + // Broadcast-state DOM sync — Svelte's class:broadcasting={leaf.broadcast} + // and class:on={leaf.broadcast} bindings in LeafPane don't propagate + // either. Walk the tree and force the classes to match leaf.broadcast. + for (const leaf of walkLeaves(tree)) { + const leafEl = document.querySelector(`[data-leaf-id="${leaf.id}"]`); + if (!leafEl) continue; + leafEl.classList.toggle("broadcasting", !!leaf.broadcast); + const chip = leafEl.querySelector(".bcast-chip"); + if (chip) chip.classList.toggle("on", !!leaf.broadcast); + } }, 250); return () => clearInterval(interval); });