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.
This commit is contained in:
2026-08-07 04:11:32 +03:00
parent 76ad20efdf
commit c0c66dfcdb
8 changed files with 349 additions and 70 deletions
+73
View File
@@ -29,6 +29,79 @@ func TestEveryPageResolvesNav(t *testing.T) {
}
}
// The section index each long page shows in the navigation column works by
// overriding an empty "sections" block defined in the layout, which only holds
// as long as the layout is parsed before the page's own files (see pageFiles).
// Reverse that order and every index would silently disappear — the empty
// definition would win and no page would fail to render — so the two ends are
// asserted here: the long pages produce a list, and a page that defines nothing
// produces nothing at all.
func TestSectionIndexIsOnTheLongPagesOnly(t *testing.T) {
tmpl, err := loadTemplates()
if err != nil {
t.Fatalf("loadTemplates: %v", err)
}
// Anchors the index links to, taken from the page's own cards.
wantAnchors := map[string]string{
"status": `href="#certificate"`,
"domain_detail": `href="#danger"`,
}
for name, page := range tmpl.pages {
var buf bytes.Buffer
// The domain page's index hides the freshly generated credential entry
// unless one is on the page, so the data map carries the key it reads.
if err := page.ExecuteTemplate(&buf, "sections", map[string]any{"NewCred": nil}); err != nil {
t.Fatalf("execute sections for %q: %v", name, err)
}
out := buf.String()
anchor, wanted := wantAnchors[name]
switch {
case wanted && !strings.Contains(out, anchor):
t.Errorf("page %q shows no section index (expected %s):\n%s", name, anchor, out)
case !wanted && strings.TrimSpace(out) != "":
t.Errorf("page %q is not long enough to carry a section index:\n%s", name, out)
}
}
}
// A section link that points at no card is a link that does nothing, and
// nothing about rendering the page says so. Every anchor the index offers must
// name an element the same page defines an id for.
func TestSectionLinksPointAtCardsThatExist(t *testing.T) {
tmpl, err := loadTemplates()
if err != nil {
t.Fatalf("loadTemplates: %v", err)
}
// The pages that carry an index; both are checked with a credential shown,
// which is the domain page's one conditional entry.
for _, name := range []string{"status", "domain_detail"} {
var index bytes.Buffer
if err := tmpl.pages[name].ExecuteTemplate(&index, "sections", map[string]any{"NewCred": true}); err != nil {
t.Fatalf("execute sections for %q: %v", name, err)
}
// The cards are spread over the page's template files, so the ids are
// collected from the files rather than from a rendered page — rendering
// one would need the whole of a handler's data map.
ids := map[string]bool{}
for _, file := range pageFiles[name] {
body, err := fs.ReadFile(assetsFS, file)
if err != nil {
t.Fatalf("read %s: %v", file, err)
}
// Cards only: a form field's id is not somewhere a section link may
// land, so matching those too would weaken the check.
for _, m := range regexp.MustCompile(`class="card[^"]*" id="([a-z-]+)"`).FindAllStringSubmatch(string(body), -1) {
ids[m[1]] = true
}
}
for _, m := range regexp.MustCompile(`href="#([a-z-]+)"`).FindAllStringSubmatch(index.String(), -1) {
if !ids[m[1]] {
t.Errorf("page %q indexes #%s, which no card on it carries", name, m[1])
}
}
}
}
// The version comes from render(), not from each handler's data map, so the
// footer is only correct as long as every page composes with the layout and
// render keeps supplying the key. Both are asserted here rather than trusted.