Changeset 6a2abb1 in Klonkt for src/views/shell.ejs

Timestamp:

06/18/2026 03:06:02 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

98ecf51

Parents:

c50f22e

Message:

Fix: colour leaks on back button in hub (htmx history restore does not fire pcmsNav)

On back/forward htmx only restores #pcms-main; the per-site accent/palette (via
HX-Trigger) and the OOB chrome were not refreshed → the colour of the previous
artist remained. New htmx:historyRestore listener re-fetches the partial and
applies accent/palette (by re-dispatching pcmsNav) + the OOB chrome; #pcms-main
is already restored so it is left alone.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

• src/views/shell.ejs (modified) (1 diff)

src/views/shell.ejs

@@ -360 +360 @@
     matched.forEach(function(c) { document.body.classList.add(c); });
   });
+
+  // Back/forward: htmx herstelt alleen #pcms-main, maar NIET de OOB-chrome of de
+  // per-site accent/palette (die komen via de HX-Trigger-header, en een history-
+  // restore vuurt die niet). Zonder dit blijft de kleur van de vorige artiest
+  // hangen. We halen de partial opnieuw op en passen alleen die twee toe —
+  // #pcms-main is al hersteld, dus die laten we met rust.
+  document.body.addEventListener('htmx:historyRestore', function () {
+    var url = location.pathname + location.search;
+    var sep = url.indexOf('?') >= 0 ? '&' : '?';
+    fetch(url + sep + 'partial=1', { headers: { 'HX-Request': 'true' }, credentials: 'same-origin' })
+      .then(function (r) {
+        var trig = r.headers.get('HX-Trigger-After-Settle');
+        if (trig) {
+          try {
+            var nav = JSON.parse(trig).pcmsNav;
+            if (nav) document.body.dispatchEvent(new CustomEvent('pcmsNav', { detail: nav }));
+          } catch (e) { /* geen/ongeldige trigger */ }
+        }
+        return r.text();
+      })
+      .then(function (html) {
+        try {
+          var fresh = new DOMParser().parseFromString(html, 'text/html').querySelector('#pcms-chrome');
+          var cur = document.getElementById('pcms-chrome');
+          if (fresh && cur) cur.replaceWith(fresh);
+        } catch (e) { /* chrome-update overslaan */ }
+      })
+      .catch(function () { /* netwerkfout: laat staan */ });
+  });
 })();
 </script>