UI: collapsible sections in help modal

Post-processes rendered markdown: each H2 becomes a <details>/<summary>.
Top 4 sections (Header Controls, Chat, Sessions, Notes) open by default;
remaining sections (Backends, Talk, Files, Context, Shortcuts, API,
Planned) start collapsed.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
2026-03-17 23:16:11 -04:00
parent 2ca02006dd
commit 2144d7c2c0
2 changed files with 65 additions and 0 deletions

View File

@@ -884,6 +884,33 @@
const helpBody = document.getElementById('help-modal-body');
const helpClose = document.getElementById('help-close-btn');
// Sections open by default — everything after "Notes" starts collapsed
const HELP_OPEN_SECTIONS = new Set(['Header Controls', 'Chat', 'Sessions', 'Notes']);
function makeCollapsible(container) {
const h2s = Array.from(container.querySelectorAll('h2'));
for (const h2 of h2s) {
const title = h2.textContent.trim();
const details = document.createElement('details');
if (HELP_OPEN_SECTIONS.has(title)) details.open = true;
const summary = document.createElement('summary');
summary.textContent = title;
details.appendChild(summary);
// Collect all following siblings until the next h2
const siblings = [];
let node = h2.nextSibling;
while (node && node.nodeName !== 'H2') {
siblings.push(node);
node = node.nextSibling;
}
for (const sib of siblings) details.appendChild(sib);
h2.parentNode.replaceChild(details, h2);
}
}
async function openHelp() {
helpBody.textContent = 'Loading…';
helpModal.classList.add('open');
@@ -895,6 +922,7 @@
helpBody.querySelectorAll('a').forEach(a => {
a.target = '_blank'; a.rel = 'noopener noreferrer';
});
makeCollapsible(helpBody);
} catch (err) {
helpBody.textContent = `Failed to load help: ${err.message}`;
}