popover.js

// a simple widget for positioning HTML popovers using a vendored floating ui (because I can't use css anchor positioning yet)
const { computePosition, flip } = window.FloatingUIDOM;

export function ActionMenuPopover(container) {
    const trigger = container.querySelector("[popovertarget]");
    const popover = container.querySelector("[popover]");
    const update = () => {
        computePosition(trigger, popover, {
            placement: "bottom",
            middleware: [flip()],
        }).then(({ x, y }) => {
            Object.assign(popover.style, {
                left: `${x}px`,
                top: `${y}px`,
            });
        });
    };
    popover.addEventListener("toggle", update);
}

progress.js

// shows a lightweight progress bar at the top of the screen while d* requests are in flight
document.addEventListener("datastar-sse", function (evt) {
    const { elId, type } = evt.detail;
    if (elId === "long-lived-sse") return;
    if (type === "started") {
        NProgress.start();
    } else if (type === "finished") {
        NProgress.done();
        setTimeout(() => NProgress.remove(), 1000);
    } else if (type === "error") {
        NProgress.done();
        NProgress.remove();
    } else if (type === "retries-failed") {
        NProgress.done();
        NProgress.remove();
    }
});

typeahead.js

// a little typeahead search widget that handles the back button (server side d* sends the history push)
export function TypeaheadSearch(inputId, containerId) {
    const searchPhrase = document.getElementById(inputId);
    const container = document.getElementById(containerId);
    if (!searchPhrase) return;
    if (!container) return;
    searchPhrase.focus();

    if (searchPhrase.hasAttribute("data-history-bound")) return;
    searchPhrase.setAttribute("data-history-bound", "true");
    window.addEventListener("popstate", (event) => {
        // the current URL already reflects the desired state.
        const currentUrl = new URL(window.location.href);
        const searchPhraseValue = currentUrl.searchParams.get("phrase") || "";
        searchPhrase.value = searchPhraseValue;
        const sections = currentUrl.searchParams.get("sections") || 0;

        const historyChangeEvent = new CustomEvent("historychange", {
            detail: {
                phrase: searchPhrase.value,
                sections: sections,
            },
        });

        searchPhrase.dispatchEvent(historyChangeEvent);
    });
    container.addEventListener("historychange", (e) => {
        searchPhrase.focus();
    });
}