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

@@ -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);
+        var fields  = document.getElementById('fields-'  + k);
-        if (el) el.classList.toggle('hidden', k !== kind);
+        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