Move verse selector to htmx

assets/templates/reference.njk

@@ -0,0 +1,74 @@
+{# The navbar's reference picker: which book you are in, and where in it to go.
+
+   Context: reference (or null), oob.
+
+   reference is built by sw.js from bible/verses.json, which compile_bible.py
+   writes from the same tree it renders the books from -- so an option can
+   never name an anchor that is not in the page it lands on.
+
+   It used to be built in the browser, by app.js, reading the chapters and
+   verses off the book already on screen. That was free, and it only worked
+   where there was a document to read: this shell is composed in a service
+   worker, which has no DOM, before any document exists. What the picker needs
+   is a fact on disk now, and everything below is markup and htmx.
+
+   Outside the collapse deliberately -- it is the main way of moving around a
+   book now that the chapter list is gone from the page, and a chapter picker
+   behind a hamburger is no use on a phone.
+
+   d-none for the empty state rather than the hidden attribute: Bootstrap
+   declares .d-flex after Reboot's [hidden] rule, both !important and at the
+   same specificity, so the utility would win.
+
+   Two things bring it back into step with the page, because the navbar is
+   never the swap target -- every boosted link lands in #content:
+
+     a navigation   sw.js appends this template to the fragment with oob set,
+                    the same way a bookmark write carries the modal's status
+                    line, so one response moves both.
+     a restore      htmx swaps the history element straight in and processes
+                    no out-of-band elements at all, so the picker asks for
+                    itself instead. worker-ready is in the same trigger for
+                    the empty state below.
+
+   Neither carries the book: the request does, in HX-Current-URL, which is the
+   address the page is actually showing. An address baked into this attribute
+   is the one thing here that can go stale, because the picker outlives the
+   page it was rendered for. #}
+<div class="reference navbar-text {% if reference %}d-flex{% else %}d-none{% endif %} align-items-center gap-1 ms-3"
+     id="reference"
+     {%- if oob %} hx-swap-oob="true"{% endif %}
+     hx-get="api/reference"
+     hx-trigger="worker-ready from:body, htmx:historyRestore from:body"
+     hx-target="this" hx-swap="outerHTML">
+{%- if reference %}
+  <span class="reference-book text-light fw-semibold"
+        id="reference-book">{{ reference.book }}</span>
+  <label class="visually-hidden" for="reference-chapter">Chapter</label>
+  {# The value is the id of the element to land on, so nothing downstream has
+     to know how a verse anchor is spelled -- including the worker, which
+     reads the chapter back out of the id it sent.
+
+     hx-target is spelled out on both selects because the one on the div above
+     is "this", and an inherited "this" would resolve to the select. #}
+  <select class="reference-chapter form-select form-select-sm"
+          id="reference-chapter" name="chapter"
+          hx-get="api/reference" hx-target="#reference-verse"
+          hx-swap="innerHTML">
+  {%- for chapter in reference.chapters %}
+    <option value="{{ chapter.id }}"
+            {%- if chapter.id == reference.chapter %} selected{% endif %}>{{ chapter.label }}</option>
+  {%- endfor %}
+  </select>
+  <span class="reference-sep text-light">:</span>
+  <label class="visually-hidden" for="reference-verse">Verse</label>
+  {# Answers with its own options again rather than nothing, so the response
+     has something to hang the scroll on -- and so the option the reader chose
+     comes back marked selected instead of being reset by the swap. #}
+  <select class="reference-verse form-select form-select-sm"
+          id="reference-verse" name="verse"
+          hx-get="api/reference" hx-target="this" hx-swap="innerHTML">
+{% include "verses.njk" %}
+  </select>
+{%- endif %}
+</div>