diff --git a/frontend/app.js b/frontend/app.js index 56e997f..8553f2d 100644 --- a/frontend/app.js +++ b/frontend/app.js @@ -360,12 +360,14 @@ function renderSidebar(sessions, currentSession) { list.innerHTML = sessions.map((session) => buildSidebarHTML(session, currentSession)).join(''); // Bind click handlers on each sidebar item - list.querySelectorAll('.sidebar-item').forEach((item) => { - const name = item.dataset.session; - on(item, 'click', () => { - if (name !== currentSession) openSession(name); + if (typeof list.querySelectorAll === 'function') { + list.querySelectorAll('.sidebar-item').forEach((item) => { + const name = item.dataset.session; + on(item, 'click', () => { + if (name !== currentSession) openSession(name); + }); }); - }); + } } const SIDEBAR_KEY = 'muxplex.sidebarOpen'; @@ -604,6 +606,10 @@ async function openSession(name, opts = {}) { _viewingSession = name; _viewMode = 'fullscreen'; + // Pre-render sidebar with current sessions before first poll tick + initSidebar(); + renderSidebar(_currentSessions, name); + // Update expanded header const nameEl = $('expanded-session-name'); if (nameEl) nameEl.textContent = name; @@ -638,6 +644,9 @@ async function openSession(name, opts = {}) { } // Mount terminal AFTER view is visible so FitAddon measures real dimensions if (window._openTerminal) window._openTerminal(name); + // Re-render sidebar after DOM is visible and dimensions are correct + initSidebar(); + renderSidebar(_currentSessions, name); }, 260); // Mobile pill diff --git a/frontend/tests/test_app.mjs b/frontend/tests/test_app.mjs index 6680b1d..ab6a1c8 100644 --- a/frontend/tests/test_app.mjs +++ b/frontend/tests/test_app.mjs @@ -1927,6 +1927,16 @@ test('toggleSidebar removes sidebar--collapsed class when opening (from closed) globalThis.document.getElementById = origGetById; }); +// --- Guard: initSidebar and renderSidebar are exported and callable --- + +test('initSidebar is exported and callable', () => { + assert.strictEqual(typeof app.initSidebar, 'function', 'initSidebar should be a function'); +}); + +test('renderSidebar is exported and callable', () => { + assert.strictEqual(typeof app.renderSidebar, 'function', 'renderSidebar should be a function'); +}); + // --- bindStaticEventListeners sidebar toggle buttons --- test('bindStaticEventListeners binds sidebar-toggle-btn and sidebar-collapse-btn click to toggleSidebar', () => {