Web dashboard step 2: full issue pages, article chapters, POST /rate

Signed-in issue page with the Brief, downloads, index and colophon; article,
World Briefing and Behind the paper pages under the login guard; the rating
widget with its fetch enhancement; the admin-only POST /rate writing
dashboard-attributed rating events; the HMAC confirmation page links to the
site.

Co-Authored-By: Claude Fable 5.1 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01NHyYupFdBiR4VfoUM7NjSM

src/web/static/app.js

@@ -1,5 +1,35 @@
 document.addEventListener("submit", (event) => {
-  const message = event.target.dataset.confirm;
+  const form = event.target;
+  if (form.matches("form.rating") && event.submitter) {
+    event.preventDefault();
+    const submitted = event.submitter;
+    const body = new URLSearchParams(new FormData(form));
+    body.set(submitted.name, submitted.value);
+    fetch(form.action, {
+      method: "POST",
+      body,
+      credentials: "same-origin",
+      headers: { Accept: "application/json" },
+    }).then((response) => {
+      if (!response.ok) throw new Error("rating request failed");
+      return response.json();
+    }).then((result) => {
+      form.querySelectorAll("button[data-label]").forEach((button) => {
+        const active = button.dataset.label === result.label;
+        button.classList.toggle("active", active);
+        button.setAttribute("aria-pressed", active ? "true" : "false");
+      });
+    }).catch(() => {
+      const label = document.createElement("input");
+      label.type = "hidden";
+      label.name = submitted.name;
+      label.value = submitted.value;
+      form.appendChild(label);
+      form.submit();
+    });
+    return;
+  }
+  const message = form.dataset.confirm;
   if (message && !window.confirm(message)) event.preventDefault();
 });
 document.querySelectorAll("details[id]").forEach((details) => {