From 967d516d4d2d3b1382ae437c62f5df6c5dd10b24 Mon Sep 17 00:00:00 2001
From: Tobias Gesellchen <tobias@gesellix.de>
Date: Sun, 10 May 2026 22:52:42 +0200
Subject: [PATCH] fix(web): pair Current/Planned diffs per axis instead of
 mixing them
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

With XML+resolv selected together, the bottom panes rendered as
"Current XML | Planned XML | Planned resolv hook" plus a separate
full-width "Current /etc/resolv.conf" block above — three panes plus
a hanger above, each pair scattered.

Restructured into two side-by-side .diff-container rows that each
pair their own Current/Planned columns:

  - #xml-diff-row    — Current Config (on Speaker)   | Planned Config (AfterTouch)
  - #resolv-diff-row — Current /etc/resolv.conf      | Planned /etc/resolv.conf Hook

current-resolv-pane moved out of its standalone wrapper into the
resolv row. The deprecated #planned-hosts-pane is removed entirely
(hosts is no longer offered as a method, per the earlier UI cleanup).

onCustomizeChange now toggles the row IDs instead of per-pane IDs,
and uses display:"" rather than display:"block" so the .diff-container
flex layout isn't accidentally overridden.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 pkg/service/handlers/web/index.html   | 46 +++++++--------------------
 pkg/service/handlers/web/js/script.js | 17 +++++-----
 2 files changed, 20 insertions(+), 43 deletions(-)

diff --git a/pkg/service/handlers/web/index.html b/pkg/service/handlers/web/index.html
index 97520bc..2fcbc7f 100644
--- a/pkg/service/handlers/web/index.html
+++ b/pkg/service/handlers/web/index.html
@@ -968,15 +968,6 @@
                 </div>
             </div>
 
-            <div
-                id="current-resolv-pane"
-                style="display: none; margin-bottom: 20px"
-            >
-                        <span class="config-header"
-                        >Current /etc/resolv.conf</span
-                        >
-                <pre id="current-resolv-content"></pre>
-            </div>
 
             <div
                 id="telnet-method-pane"
@@ -1056,7 +1047,9 @@
                 ></div>
             </div>
 
-            <div class="diff-container">
+            <!-- XML diff pair: Current Config | Planned Config. Shown
+                 when URL flip = xml in the Customize form. -->
+            <div class="diff-container" id="xml-diff-row" style="display: none">
                 <div id="xml-diff-pane" class="diff-pane">
                             <span class="config-header"
                             >Current Config (on Speaker)</span
@@ -1082,33 +1075,18 @@
                         <a href="https://github.com/gesellix/bose-soundtouch/blob/main/docs/guides/TROUBLESHOOTING.md#hostname-resolution" target="_blank" style="color: #856404;">Learn more →</a>
                     </div>
                 </div>
-                <div
-                    id="planned-hosts-pane"
-                    class="diff-pane"
-                    style="display: none"
-                >
+            </div>
+
+            <!-- Resolv diff pair: Current /etc/resolv.conf | Planned hook.
+                 Shown when DNS = resolv in the Customize form. -->
+            <div class="diff-container" id="resolv-diff-row" style="display: none; margin-top: 12px">
+                <div id="current-resolv-pane" class="diff-pane">
                             <span class="config-header"
-                            >Planned /etc/hosts Entries</span
+                            >Current /etc/resolv.conf</span
                             >
-                    <pre id="planned-hosts"></pre>
-                    <div
-                        style="
-                                    margin-top: 10px;
-                                    font-size: 0.9em;
-                                    color: #666;
-                                "
-                    >
-                        <strong>Note:</strong> This method also injects
-                        the AfterTouch Local Root CA into
-                        <code>/etc/pki/tls/certs/ca-bundle.crt</code> to
-                        enable secure HTTPS communication.
-                    </div>
+                    <pre id="current-resolv-content"></pre>
                 </div>
-                <div
-                    id="planned-resolv-pane"
-                    class="diff-pane"
-                    style="display: none"
-                >
+                <div id="planned-resolv-pane" class="diff-pane">
                             <span class="config-header"
                             >Planned /etc/resolv.conf Hook</span
                             >
diff --git a/pkg/service/handlers/web/js/script.js b/pkg/service/handlers/web/js/script.js
index 36c4180..1262705 100644
--- a/pkg/service/handlers/web/js/script.js
+++ b/pkg/service/handlers/web/js/script.js
@@ -1811,7 +1811,6 @@ async function showSummary(deviceId) {
         currentConfigElem.style.color = summary.ssh_success ? "black" : "red";
 
         document.getElementById("planned-config").innerText = summary.planned_config;
-        document.getElementById("planned-hosts").innerText = summary.planned_hosts || "";
         document.getElementById("planned-resolv").innerText = summary.planned_resolv || "";
 
         const resolveErrEl = document.getElementById("resolve-ip-error");
@@ -3143,19 +3142,19 @@ function onCustomizeChange() {
     const dns = (document.querySelector('input[name="customize-dns"]:checked') || {}).value || "none";
     const caInstall = !!(document.getElementById("customize-ca-install") || {}).checked;
 
-    // Visibility of the legacy preview/test panes inside Customize.
+    // Visibility of the diff pairs and per-method panes. Each diff
+    // pair is its own .diff-container row so the Current/Planned
+    // columns line up side-by-side per axis instead of mixing into
+    // a single 3+ column layout.
     const show = (id, on) => {
         const el = document.getElementById(id);
-        if (el) el.style.display = on ? "block" : "none";
+        if (el) el.style.display = on ? "" : "none";
     };
-    show("xml-diff-pane",     flip === "xml");
-    show("planned-xml-pane",  flip === "xml");
+    show("xml-diff-row",     flip === "xml");
+    show("resolv-diff-row",  dns === "resolv");
     show("telnet-method-pane", flip === "telnet");
-    show("planned-resolv-pane", dns === "resolv");
-    show("planned-hosts-pane", false);
-    show("current-resolv-pane", dns === "resolv");
-    show("hosts-redirection-test", false);
     show("dns-redirection-test", dns === "resolv");
+    show("hosts-redirection-test", false);
 
     // Validate the combination and toggle the Apply button.
     const errors = [];