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