shell.js

/*
 * shell.js - injects a consistent mobile bottom-nav across every page.
 *
 * Why: the topbar nav works fine on desktop but on a 390px-wide phone the 5 nav
 * items either wrap or require horizontal scroll. RBTs use this on their phones
 * mid-day; the bottom-nav matches native iOS / Android conventions and keeps
 * primary actions always reachable with thumb.
 *
 * Hides itself on viewports >= 720px (CSS-driven). Topbar nav hides on < 720px
 * so the two don't compete.
 *
 * Auto-detects current page from URL, marks the matching item active.
 */
(function () {
  const RBT_LINKS = [
    { href: "rbt-home.html",          label: "Today",        icon: "🏠" },
    { href: "rbt-session-entry.html", label: "Write",        icon: "✍️" },
    { href: "rbt-quick-log.html",     label: "Quick Log",    icon: "⚡" },
    { href: "rbt-note-review.html",   label: "Review",       icon: "✓" },
    { href: "rbt-cancellation.html",  label: "Cancel",       icon: "✕" }
  ];

  const ADMIN_LINKS = [
    { href: "admin-overview.html",          label: "Overview",  icon: "📊" },
    { href: "admin-review-queue.html",      label: "Queue",     icon: "📋" },
    { href: "admin-reference-library.html", label: "Library",   icon: "📚" }
  ];

  function currentPath() {
    return (location.pathname.split("/").pop() || "rbt-home.html").replace(/\.html$/, "");
  }

  function isAdminPage() {
    return /^admin-/.test(currentPath());
  }

  function build() {
    const links = isAdminPage() ? ADMIN_LINKS : RBT_LINKS;
    const cur = currentPath();
    const nav = document.createElement("nav");
    nav.className = "mobile-bottom-nav";
    nav.setAttribute("aria-label", "Primary");
    links.forEach(l => {
      const a = document.createElement("a");
      a.href = l.href;
      const isActive = l.href.replace(/\.html$/, "") === cur;
      a.className = "mbn-item" + (isActive ? " mbn-active" : "");
      a.innerHTML = `<span class="mbn-icon" aria-hidden="true">${l.icon}</span><span class="mbn-label">${l.label}</span>`;
      nav.appendChild(a);
    });
    return nav;
  }

  function inject() {
    // Don't double-inject on pages that already include shell.js multiple times
    if (document.querySelector(".mobile-bottom-nav")) return;
    document.body.appendChild(build());
    // Add bottom padding to body so content doesn't get hidden behind the nav on mobile
    document.body.classList.add("has-mobile-bottom-nav");
    collapseFooterOnMobile();
  }

  /*
   * collapseFooterOnMobile - on mobile only, wrap the footer disclaimer in a
   * <details><summary> so it reads as a single-line "Compliance details" tap
   * target instead of three lines of dense legal copy on every short page.
   * Desktop is unaffected. Media-query-keyed; a hard reload after rotating /
   * widening past 720px restores the inline disclaimer.
   */
  function collapseFooterOnMobile() {
    if (!window.matchMedia || !window.matchMedia("(max-width: 720px)").matches) return;
    const disclaimer = document.querySelector(".footer-disclaimer");
    if (!disclaimer || disclaimer.closest(".footer-disclaimer-details")) return;
    const details = document.createElement("details");
    details.className = "footer-disclaimer-details";
    const summary = document.createElement("summary");
    summary.textContent = "Compliance details";
    details.appendChild(summary);
    // Insert the details right before the disclaimer, then move the disclaimer
    // inside so existing content stays semantically intact.
    disclaimer.parentNode.insertBefore(details, disclaimer);
    details.appendChild(disclaimer);
  }

  if (document.readyState === "loading") {
    document.addEventListener("DOMContentLoaded", inject);
  } else {
    inject();
  }
})();