coulomb/state-hub
2
0
Fork 0
generated from coulomb/repo-seed
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

dashboard: add toc-sidebar utility; move live indicator into TOC column

Browse Source 
Extracts the TOC-injection pattern into a reusable component:

  src/components/toc-sidebar.js
    injectTocTop(id, element) — prepends an element to #observablehq-toc,
    removing any previous instance with the same id first so reactive cells
    can re-inject on each poll without accumulating duplicates.

decisions.md now uses injectTocTop to place a single widget (live
indicator + Decision Health KPI box) into the right-column sidebar,
removing the standalone live-indicator cell and the ad-hoc id/remove
pattern that was previously inlined.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bernd Worsch
2026-02-26 14:42:38 +01:00
parent 5b743196db
commit 902aafcfb1
2 changed files with 37 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
dashboard/src/components/toc-sidebar.js Normal file
View File

@@ -0,0 +1,29 @@
/**
* toc-sidebar — inject a persistent widget into Observable Framework's
* right-column table-of-contents sidebar.
*
* Observable Framework renders a non-scrolling TOC aside (#observablehq-toc)
* in the right column. This helper lets you prepend a custom element to it,
* replacing any previously injected element with the same id on each call so
* reactive cells can refresh the widget without accumulating duplicates.
*
* Usage:
* import {injectTocTop} from "./components/toc-sidebar.js";
*
* const el = html`<div>…</div>`;
* injectTocTop("my-widget-id", el); // call again on each reactive update
*
* @param {string} id Stable id used to find and remove the previous
* instance. Must be unique per widget on the page.
* @param {HTMLElement} element Element to inject. Its id will be set to `id`.
* @returns {boolean} true if injected into the TOC sidebar;
* false if #observablehq-toc was not found.
*/
export function injectTocTop(id, element) {
document.getElementById(id)?.remove();
element.id = id;
const toc = document.querySelector("#observablehq-toc");
if (!toc) return false;
toc.prepend(element);
return true;
}