Fix: color changes re-render in-place without page flash

theme-changed now dispatches theme-refresh event instead of
full navigate(). Map re-renders markers, packets re-renders
table rows. No teardown/rebuild, no flash.
This commit is contained in:
you
2026-03-23 02:06:26 +00:00
parent 6362c4338a
commit b4ce4ede42
5 changed files with 47 additions and 8 deletions

View File

@@ -315,7 +315,10 @@ function navigate() {
}
window.addEventListener('hashchange', navigate);
window.addEventListener('theme-changed', () => { if (typeof navigate === 'function') navigate(); });
window.addEventListener('theme-changed', () => {
// Notify current page to re-render without full teardown
window.dispatchEvent(new CustomEvent('theme-refresh'));
});
window.addEventListener('DOMContentLoaded', () => {
connectWS();

View File

@@ -85,10 +85,10 @@
<script src="region-filter.js?v=1774325000"></script>
<script src="hop-resolver.js?v=1774223973"></script>
<script src="hop-display.js?v=1774221932"></script>
<script src="app.js?v=1774229496"></script>
<script src="app.js?v=1774231586"></script>
<script src="home.js?v=1774350000"></script>
<script src="packets.js?v=1774225004"></script>
<script src="map.js?v=1774220756" onerror="console.error('Failed to load:', this.src)"></script>
<script src="packets.js?v=1774231586"></script>
<script src="map.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
<script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
<script src="nodes.js?v=1774221131" onerror="console.error('Failed to load:', this.src)"></script>
<script src="traces.js?v=1774135052" onerror="console.error('Failed to load:', this.src)"></script>
@@ -96,7 +96,7 @@
<script src="audio.js?v=1774208460" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-v1-constellation.js?v=1774207165" onerror="console.error('Failed to load:', this.src)"></script>
<script src="audio-lab.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774229396" onerror="console.error('Failed to load:', this.src)"></script>
<script src="live.js?v=1774231586" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observers.js?v=1774290000" onerror="console.error('Failed to load:', this.src)"></script>
<script src="observer-detail.js?v=1774219440" onerror="console.error('Failed to load:', this.src)"></script>
<script src="node-analytics.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>

View File

@@ -2237,5 +2237,17 @@
VCR.buffer = []; VCR.playhead = -1; VCR.mode = 'LIVE'; VCR.missedCount = 0; VCR.speed = 1;
}
registerPage('live', { init, destroy });
let _themeRefreshHandler = null;
registerPage('live', {
init: function(app, routeParam) {
_themeRefreshHandler = () => { /* live map rebuilds on next packet */ };
window.addEventListener('theme-refresh', _themeRefreshHandler);
return init(app, routeParam);
},
destroy: function() {
if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
return destroy();
}
});
})();

View File

@@ -680,5 +680,17 @@
}
}
registerPage('map', { init, destroy });
let _themeRefreshHandler = null;
registerPage('map', {
init: function(app, routeParam) {
_themeRefreshHandler = () => { if (markerLayer) renderMarkers(); };
window.addEventListener('theme-refresh', _themeRefreshHandler);
return init(app, routeParam);
},
destroy: function() {
if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
return destroy();
}
});
})();

View File

@@ -1695,7 +1695,19 @@
} catch {}
}
registerPage('packets', { init, destroy });
let _themeRefreshHandler = null;
registerPage('packets', {
init: function(app, routeParam) {
_themeRefreshHandler = () => { if (typeof renderTableRows === 'function') renderTableRows(); };
window.addEventListener('theme-refresh', _themeRefreshHandler);
return init(app, routeParam);
},
destroy: function() {
if (_themeRefreshHandler) { window.removeEventListener('theme-refresh', _themeRefreshHandler); _themeRefreshHandler = null; }
return destroy();
}
});
// Standalone packet detail page: #/packet/123 or #/packet/HASH
registerPage('packet-detail', {