feat(go): M6.6.1 — QR payment popup modal on /adults and /juniors

Replace bare <a href=/qr> Pay buttons with <button data-*> elements that
open an in-page #qrModal (matching Python's showPayQR UX), driven by a
new payment-qr.js vanilla-JS IIFE module.  Remove the now-dead qrHref /
qrHrefAll template helpers from render.go.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

go/internal/web/html_handler_test.go

@@ -314,6 +314,52 @@ func TestServeSync(t *testing.T) {
 	}
 }
 
+func TestPaymentQRMarkup(t *testing.T) {
+	renderer, err := web.NewRenderer()
+	if err != nil {
+		t.Fatalf("NewRenderer: %v", err)
+	}
+	b := web.BuildInfo{Version: "v0", Commit: "abc1234", BuildDate: "2026-01-01"}
+	h := web.NewHTMLHandler(renderer, b, fixtureHandler(t), web.ActionHandlers{})
+
+	cases := []struct {
+		path    string
+		handler http.HandlerFunc
+	}{
+		{"/adults", h.ServeAdults},
+		{"/juniors", h.ServeJuniors},
+	}
+
+	for _, tc := range cases {
+		t.Run(tc.path, func(t *testing.T) {
+			req := httptest.NewRequest(http.MethodGet, tc.path, nil)
+			w := httptest.NewRecorder()
+			tc.handler(w, req)
+			body := w.Body.String()
+
+			for _, want := range []string{
+				`id="qrModal"`,
+				`id="qrImg"`,
+				`id="qrTitle"`,
+				`id="qrAccount"`,
+				`id="qrAmount"`,
+				`id="qrMessage"`,
+				`/static/js/payment-qr.js`,
+				`data-bank-account="CZ0000000000000000000000"`,
+			} {
+				if !strings.Contains(body, want) {
+					t.Errorf("body missing %q", want)
+				}
+			}
+
+			// Pay buttons must use <button>, never a bare href to /qr.
+			if strings.Contains(body, `href="/qr`) {
+				t.Error("body must not contain href=/qr (Pay buttons should be <button>, not <a>)")
+			}
+		})
+	}
+}
+
 func TestServeVersion(t *testing.T) {
 	req := httptest.NewRequest(http.MethodGet, "/api/version", nil)
 	w := httptest.NewRecorder()

go/internal/web/render.go

@@ -6,8 +6,6 @@ import (
 	"html/template"
 	"log/slog"
 	"net/http"
-	"net/url"
-	"strconv"
 )
 
 // PageData is the view model passed to every HTML template.
@@ -58,36 +56,7 @@ type Renderer struct {
 
 var pageNames = []string{"adults", "juniors", "payments", "sync", "flush_cache"}
 
-// qrHref builds the /qr query URL for a single-month Pay button.
-// rawMonth is "YYYY-MM"; it is converted to "MM/YYYY" in the QR message.
-func qrHref(account string, amount int, name, rawMonth string) string {
-	// Convert "YYYY-MM" → "MM/YYYY" to match Python's showPayQR JS.
-	if len(rawMonth) == 7 && rawMonth[4] == '-' {
-		rawMonth = rawMonth[5:] + "/" + rawMonth[:4]
-	}
-	msg := name + ": " + rawMonth
-	return "/qr?" + url.Values{
-		"account": {account},
-		"amount":  {strconv.Itoa(amount)},
-		"message": {msg},
-	}.Encode()
-}
-
-// qrHrefAll builds the /qr query URL for a Pay-All button.
-// rawPeriods is the "+" -joined MM/YYYY string from MemberRow.RawUnpaidPeriods.
-func qrHrefAll(account string, amount int, name, rawPeriods string) string {
-	msg := name + ": " + rawPeriods
-	return "/qr?" + url.Values{
-		"account": {account},
-		"amount":  {strconv.Itoa(amount)},
-		"message": {msg},
-	}.Encode()
-}
-
-var tmplFuncs = template.FuncMap{
-	"qrHref":    qrHref,
-	"qrHrefAll": qrHrefAll,
-}
+var tmplFuncs = template.FuncMap{}
 
 // NewRenderer parses all templates from the embedded FS.
 // A parse failure should be treated as a startup-time fatal error.

go/internal/web/static/css/app.css

@@ -442,6 +442,23 @@ tr:hover {
 }
 
 /* QR Modal styles */
+#qrModal {
+    display: none !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100vw;
+    height: 100vh;
+    background-color: rgba(0, 0, 0, 0.9);
+    z-index: 9999;
+    justify-content: center;
+    align-items: center;
+}
+
+#qrModal.active {
+    display: flex !important;
+}
+
 #qrModal .modal-content {
     max-width: 400px;
     text-align: center;

go/internal/web/static/js/payment-qr.js

@@ -0,0 +1,60 @@
+(function () {
+  'use strict';
+
+  const container = document.getElementById('filterContainer');
+  if (!container) return;
+  const bankAccount = container.dataset.bankAccount || '';
+
+  const modal     = document.getElementById('qrModal');
+  const titleEl   = document.getElementById('qrTitle');
+  const imgEl     = document.getElementById('qrImg');
+  const accountEl = document.getElementById('qrAccount');
+  const amountEl  = document.getElementById('qrAmount');
+  const messageEl = document.getElementById('qrMessage');
+  if (!modal || !titleEl || !imgEl || !accountEl || !amountEl || !messageEl) return;
+
+  // Convert "YYYY-MM" → "MM/YYYY"; "+"-joined ranges converted piece-wise.
+  // Mirrors templates/adults.html showPayQR logic.
+  function toCzechMonth(rawMonth) {
+    return rawMonth.split('+')
+      .map(function (p) { return p.replace(/^(\d{4})-(\d{2})$/, '$2/$1'); })
+      .join('+');
+  }
+
+  function showQR(name, amount, month, rawMonth) {
+    var numericMonth = toCzechMonth(rawMonth);
+    var message = name + ': ' + numericMonth;
+
+    titleEl.innerText   = 'Payment for ' + month;
+    accountEl.innerText = bankAccount;
+    amountEl.innerText  = amount;
+    messageEl.innerText = message;
+
+    imgEl.src = '/qr?'
+      + 'account=' + encodeURIComponent(bankAccount)
+      + '&amount=' + encodeURIComponent(amount)
+      + '&message=' + encodeURIComponent(message);
+
+    modal.classList.add('active');
+  }
+
+  function closeQR() {
+    modal.classList.remove('active');
+  }
+
+  document.addEventListener('click', function (ev) {
+    var btn = ev.target.closest('.pay-btn');
+    if (!btn) return;
+    ev.preventDefault();
+    showQR(
+      btn.dataset.name,
+      btn.dataset.amount,
+      btn.dataset.month,
+      btn.dataset.rawMonth
+    );
+  });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape' && modal.classList.contains('active')) closeQR();
+  });
+}());

go/internal/web/templates/adults.tmpl

@@ -12,7 +12,7 @@
   <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">Payments Ledger</a>
 </div>
 
-<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}" data-page="adults">
+<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}" data-page="adults" data-bank-account="{{.Data.BankAccount}}">
   <div class="filter-item">
     <label class="filter-label" for="nameFilter">Member</label>
     <input id="nameFilter" class="filter-input" type="text" placeholder="Filter by name…">
@@ -62,14 +62,14 @@
           class="{{if eq $cell.Status "empty"}}cell-empty{{else if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}}cell-unpaid-current{{else if or (eq $cell.Status "unpaid") (eq $cell.Status "partial")}}cell-unpaid{{else if eq $cell.Status "ok"}}cell-ok{{end}}{{if $cell.Overridden}} cell-overridden{{end}}">
         {{$cell.Text}}
         {{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (lt $cell.RawMonth $.Data.CurrentMonth)}}
-        <a class="pay-btn" href="{{qrHref $.Data.BankAccount $cell.Amount $row.Name $cell.RawMonth}}">Pay</a>
+        <button type="button" class="pay-btn" data-name="{{$row.Name}}" data-amount="{{$cell.Amount}}" data-month="{{$cell.Month}}" data-raw-month="{{$cell.RawMonth}}">Pay</button>
         {{end}}
       </td>
       {{end}}
       <td class="{{if lt $row.Balance 0}}balance-neg{{else if gt $row.Balance 0}}balance-pos{{end}}" style="position: relative;">
         {{$row.Balance}}
         {{if gt $row.PayableAmount 0}}
-        <a class="pay-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
+        <button type="button" class="pay-btn" data-name="{{$row.Name}}" data-amount="{{$row.PayableAmount}}" data-month="{{$row.UnpaidPeriods}}" data-raw-month="{{$row.RawUnpaidPeriods}}" data-pay-all="1">Pay All</button>
         {{end}}
       </td>
     </tr>
@@ -184,6 +184,24 @@
   </div>
 </div>
 
+<div id="qrModal" onclick="if(event.target===this)this.classList.remove('active')">
+  <div class="modal-content">
+    <div class="modal-header">
+      <div class="modal-title" id="qrTitle">Payment for —</div>
+      <div class="close-btn" onclick="document.getElementById('qrModal').classList.remove('active')">[close]</div>
+    </div>
+    <div class="qr-image">
+      <img id="qrImg" src="" alt="Payment QR Code">
+    </div>
+    <div class="qr-details">
+      <div>Account: <span id="qrAccount"></span></div>
+      <div>Amount: <span id="qrAmount"></span> CZK</div>
+      <div>Message: <span id="qrMessage"></span></div>
+    </div>
+  </div>
+</div>
+
 <script src="/static/js/filters.js" defer></script>
 <script src="/static/js/member-detail.js" defer></script>
+<script src="/static/js/payment-qr.js" defer></script>
 {{end}}

go/internal/web/templates/juniors.tmpl

@@ -12,7 +12,7 @@
   <a href="{{.Data.PaymentsURL}}" target="_blank" rel="noopener">Payments Ledger</a>
 </div>
 
-<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}" data-page="juniors">
+<div class="filter-container" id="filterContainer" data-current-month="{{.Data.CurrentMonth}}" data-page="juniors" data-bank-account="{{.Data.BankAccount}}">
   <div class="filter-item">
     <label class="filter-label" for="nameFilter">Member</label>
     <input id="nameFilter" class="filter-input" type="text" placeholder="Filter by name…">
@@ -62,14 +62,14 @@
           class="{{if eq $cell.Status "empty"}}cell-empty{{else if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (ge $cell.RawMonth $.Data.CurrentMonth)}}cell-unpaid-current{{else if or (eq $cell.Status "unpaid") (eq $cell.Status "partial")}}cell-unpaid{{else if eq $cell.Status "ok"}}cell-ok{{end}}{{if $cell.Overridden}} cell-overridden{{end}}">
         {{$cell.Text}}
         {{if and (or (eq $cell.Status "unpaid") (eq $cell.Status "partial")) (lt $cell.RawMonth $.Data.CurrentMonth)}}
-        <a class="pay-btn" href="{{qrHref $.Data.BankAccount $cell.Amount $row.Name $cell.RawMonth}}">Pay</a>
+        <button type="button" class="pay-btn" data-name="{{$row.Name}}" data-amount="{{$cell.Amount}}" data-month="{{$cell.Month}}" data-raw-month="{{$cell.RawMonth}}">Pay</button>
         {{end}}
       </td>
       {{end}}
       <td class="{{if lt $row.Balance 0}}balance-neg{{else if gt $row.Balance 0}}balance-pos{{end}}" style="position: relative;">
         {{$row.Balance}}
         {{if gt $row.PayableAmount 0}}
-        <a class="pay-btn" href="{{qrHrefAll $.Data.BankAccount $row.PayableAmount $row.Name $row.RawUnpaidPeriods}}">Pay All</a>
+        <button type="button" class="pay-btn" data-name="{{$row.Name}}" data-amount="{{$row.PayableAmount}}" data-month="{{$row.UnpaidPeriods}}" data-raw-month="{{$row.RawUnpaidPeriods}}" data-pay-all="1">Pay All</button>
         {{end}}
       </td>
     </tr>
@@ -164,6 +164,24 @@
   </div>
 </div>
 
+<div id="qrModal" onclick="if(event.target===this)this.classList.remove('active')">
+  <div class="modal-content">
+    <div class="modal-header">
+      <div class="modal-title" id="qrTitle">Payment for —</div>
+      <div class="close-btn" onclick="document.getElementById('qrModal').classList.remove('active')">[close]</div>
+    </div>
+    <div class="qr-image">
+      <img id="qrImg" src="" alt="Payment QR Code">
+    </div>
+    <div class="qr-details">
+      <div>Account: <span id="qrAccount"></span></div>
+      <div>Amount: <span id="qrAmount"></span> CZK</div>
+      <div>Message: <span id="qrMessage"></span></div>
+    </div>
+  </div>
+</div>
+
 <script src="/static/js/filters.js" defer></script>
 <script src="/static/js/member-detail.js" defer></script>
+<script src="/static/js/payment-qr.js" defer></script>
 {{end}}