From 19344942b01157550fcc792a5fa62744ae478e9f Mon Sep 17 00:00:00 2001
From: Laan Tungir <laantungir@proton.md>
Date: Fri, 26 Jun 2026 09:43:02 -0400
Subject: [PATCH] Fix relays.html sidenav connection history toggle: remove
 section title and horizontal rules, use SVG checkbox style matching the relay
 table checkboxes

---
 www/js/version.json |  6 +++---
 www/relays.html     | 26 +++++++++++++++-----------
 2 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/www/js/version.json b/www/js/version.json
index 299d46e..e3e671e 100644
--- a/www/js/version.json
+++ b/www/js/version.json
@@ -1,5 +1,5 @@
 {
-  "VERSION": "v0.7.40",
-  "VERSION_NUMBER": "0.7.40",
-  "BUILD_DATE": "2026-06-26T13:38:31.838Z"
+  "VERSION": "v0.7.41",
+  "VERSION_NUMBER": "0.7.41",
+  "BUILD_DATE": "2026-06-26T13:43:02.547Z"
 }
diff --git a/www/relays.html b/www/relays.html
index 09bab34..d7c7741 100644
--- a/www/relays.html
+++ b/www/relays.html
@@ -419,25 +419,24 @@ const versionInfo = await getVersion();
       if (hamburgerInstance) {
         hamburgerInstance.animateTo('arrow_left');
       }
+      const historyEnabled = localStorage.getItem('relayConnectionHistory') === 'true';
+      connectionHistoryEnabled = historyEnabled;
       divSideNavBody.innerHTML = `
-  <div id="divRelaySettings" class="sidenavSection">
-    <div class="sidenavSectionTitle">Relays</div>
-    <label class="sidenavRowToggle" for="chkShowConnectionHistory">
-      <span>Show connection history</span>
-      <input id="chkShowConnectionHistory" type="checkbox" />
-    </label>
+  <div id="divRelaySettings" style="display:flex;align-items:center;padding:4px 10px;cursor:pointer;font-size:80%;color:var(--primary-color);">
+    <span style="flex:1;">Show connection history</span>
+    <div id="divHistoryToggleCheckbox" class="divSvg" style="width:16px;height:16px;flex-shrink:0;">${historyEnabled ? SVG_CHECKED : SVG_UNCHECKED}</div>
   </div>
 `;
 
       // Wire up the connection history toggle
-      const chkShowConnectionHistory = document.getElementById('chkShowConnectionHistory');
-      if (chkShowConnectionHistory) {
-        chkShowConnectionHistory.checked = localStorage.getItem('relayConnectionHistory') === 'true';
-        chkShowConnectionHistory.addEventListener('change', () => {
-          const checked = chkShowConnectionHistory.checked;
+      const divHistoryToggle = document.getElementById('divHistoryToggleCheckbox');
+      if (divHistoryToggle) {
+        const toggleHistory = () => {
+          const checked = !connectionHistoryEnabled;
           connectionHistoryEnabled = checked;
           localStorage.setItem('relayConnectionHistory', checked);
           setRelayEventLogging(checked);
+          divHistoryToggle.innerHTML = checked ? SVG_CHECKED : SVG_UNCHECKED;
           const wrap = document.getElementById('divRelayEventsWrap');
           if (wrap) {
             wrap.style.display = checked ? '' : 'none';
@@ -452,7 +451,12 @@ const versionInfo = await getVersion();
               divRelayEvents.innerHTML = '';
             }
           }
+        };
+        divHistoryToggle.addEventListener('click', (e) => {
+          e.stopPropagation();
+          toggleHistory();
         });
+        document.getElementById('divRelaySettings').addEventListener('click', toggleHistory);
       }
       
       // Initialize version bar buttons when sidenav opens (lazy load)