feat(panel): navigation as a left column, with a section index on the long pages

The navigation was a bar across the top that did not fit on one row — six page
entries and the session block against the panel's width — and had to be split
into two, costing the top of every page. It is now a column down the left edge:
one left edge to scan, the current entry marked down its leading edge, sticky so
it stays in view, and room under the entries for the current page's own
sections. Below the width the two columns need it lies back down into the same
wrapping rows as before; six entries need no drawer.

The section index is for the two pages long enough to need one — the domain page
(nine cards) and the status page (eight). Each card carries an id and the page's
template defines the list by overriding an empty "sections" block in the layout,
so a page that defines nothing renders no index. panel.js marks the section in
view, looking targets up by id on each pass so the status page swapping its
cards out every five seconds cannot leave it measuring boxes that have left the
document; the links themselves are plain fragment links and need no script.

Verified against the real pages rendered by a local panel at 1300px, 924px and
481px wide.

internal/web/static/panel.js

@@ -102,9 +102,72 @@
     });
   }
 
+  // --- Section index follows the page -----------------------------------
+  // The long pages list their own sections in the navigation column (the
+  // "sections" template). Marking the one currently in view turns that list
+  // from an index into a position, which is the whole point of it on a page
+  // nine cards tall. The links work without any of this; only the highlight
+  // depends on it.
+  //
+  // Each pass looks its targets up by id rather than holding on to elements
+  // found once: the status page replaces its cards wholesale every five
+  // seconds (hx-swap on #status-body), and anything remembered here would be
+  // measuring boxes that had left the document.
+  var sectionLinks = [];
+
+  function markCurrentSection() {
+    var current = null;
+    sectionLinks.forEach(function (link) {
+      var target = document.getElementById(link.hash.slice(1));
+      // The section in view is the last one whose top has passed the reading
+      // line; the links are in document order, so the last match wins.
+      if (target && target.getBoundingClientRect().top <= 100) {
+        current = link;
+      }
+    });
+    if (window.innerHeight + window.scrollY >= document.documentElement.scrollHeight - 2) {
+      // At the foot of the page there is no scroll left to bring the last
+      // cards up to the reading line, so without this they could never be
+      // marked however far down you are — and the last card of the domain
+      // page is the one that deletes it.
+      current = sectionLinks[sectionLinks.length - 1];
+    } else if (!current) {
+      // Above the first heading nothing has been passed yet, and the page is
+      // still on its first section.
+      current = sectionLinks[0];
+    }
+    sectionLinks.forEach(function (link) {
+      link.classList.toggle("current", link === current);
+    });
+  }
+
+  function initSectionIndex() {
+    sectionLinks = Array.prototype.slice.call(
+      document.querySelectorAll(".sections a[href^='#']")
+    );
+    if (!sectionLinks.length) {
+      return;
+    }
+    var pending = false;
+    // Scroll fires far more often than the highlight can change, so the work
+    // is collapsed onto the next frame.
+    window.addEventListener("scroll", function () {
+      if (pending) {
+        return;
+      }
+      pending = true;
+      window.requestAnimationFrame(function () {
+        pending = false;
+        markCurrentSection();
+      });
+    }, { passive: true });
+    markCurrentSection();
+  }
+
   document.addEventListener("DOMContentLoaded", function () {
     initAddressFields(document);
     initEncryptFields(document);
+    initSectionIndex();
   });
 
   // --- Skip polling while the tab is hidden ------------------------------