From bd310d918b202244230c88144c50dbbe150438df Mon Sep 17 00:00:00 2001
From: Steve Cliff <steve@devcloud.guru>
Date: Mon, 4 May 2026 22:40:46 +0100
Subject: [PATCH] fix: payload-preview rail follows kind switcher

Right-rail preview was rendered server-side via {{if eq $f.Kind ...}},
so it stayed on whatever kind the page loaded with. Editing an SMTP
channel and flipping to ntfy in the picker left the email RFC 5322
sample on screen.

Render all three preview panels with id='preview-<kind>' (only the
matching one visible on first render) and toggle their .hidden class
in the kind-switcher JS alongside the field panels. Same pattern
used for fields-<kind>.
---
 web/templates/pages/settings.html | 23 +++++++++++++++--------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/web/templates/pages/settings.html b/web/templates/pages/settings.html
index 62242cf..a9cea0d 100644
--- a/web/templates/pages/settings.html
+++ b/web/templates/pages/settings.html
@@ -423,9 +423,12 @@
       {{end}}
     </div>
 
-    {{/* ---------- right rail — payload preview ---------- */}}
+    {{/* ---------- right rail — payload preview ----------
+         All three are rendered; the kind-switcher JS toggles which is
+         visible. Server-side {{if}} would freeze the panel at whichever
+         kind was loaded, so flipping the picker leaves it stale. */}}
     <aside>
-      {{if eq $f.Kind "webhook"}}
+      <div id="preview-webhook" class="{{if ne $f.Kind "webhook"}}hidden{{end}}">
         <div class="panel rounded-[7px] p-4">
           <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2.5">Payload preview</div>
           <div class="text-[12.5px] text-ink-mute mb-3 leading-[1.6]">
@@ -453,7 +456,8 @@
             with the updated event field.
           </div>
         </div>
-      {{else if eq $f.Kind "ntfy"}}
+      </div>
+      <div id="preview-ntfy" class="{{if ne $f.Kind "ntfy"}}hidden{{end}}">
         <div class="panel rounded-[7px] p-4">
           <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2.5">Ntfy delivery shape</div>
           <div class="text-[12.5px] text-ink-mute mb-3 leading-[1.6]">
@@ -472,7 +476,8 @@ Click:    https://restic-manager.example/alerts/01KQTABCDEFGHJ
 Backup 'system-config' failed: rest-server returned 401</pre>
           </div>
         </div>
-      {{else if eq $f.Kind "smtp"}}
+      </div>
+      <div id="preview-smtp" class="{{if ne $f.Kind "smtp"}}hidden{{end}}">
         <div class="panel rounded-[7px] p-4">
           <div class="text-[11px] text-ink-fade uppercase tracking-[0.08em] mb-2.5">Email shape</div>
           <div class="text-[12.5px] text-ink-mute mb-3 leading-[1.6]">
@@ -499,7 +504,7 @@ Open in restic-manager:
 https://restic-manager.example/alerts/01KQTABCDEFGHJ</pre>
           </div>
         </div>
-      {{end}}
+      </div>
     </aside>
 
   </div>
@@ -516,10 +521,12 @@ https://restic-manager.example/alerts/01KQTABCDEFGHJ</pre>
       var kind = radio.value;
       document.getElementById('kind-hidden').value = kind;
 
-      // Show/hide field panels
+      // Show/hide field panels + matching right-rail payload preview.
       kinds.forEach(function(k) {
-        var el = document.getElementById('fields-' + k);
-        if (el) el.classList.toggle('hidden', k !== kind);
+        var fields  = document.getElementById('fields-'  + k);
+        var preview = document.getElementById('preview-' + k);
+        if (fields)  fields .classList.toggle('hidden', k !== kind);
+        if (preview) preview.classList.toggle('hidden', k !== kind);
       });
 
       // Update card styles