From 626041a39e3c61eb41018f6ae0892aac9e3f291d Mon Sep 17 00:00:00 2001
From: librelad <librelad@digitalangels.vip>
Date: Thu, 18 Jun 2026 16:04:06 +0100
Subject: [PATCH] style(ports): use the shared lp-ui-advanced-toggle for 'Show
 advanced fields'
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The port manager's 'Show advanced fields' control was a raw <input type=
checkbox> + <span>, out of step with the modern pill switch the Services tab
uses for its Advanced toggle. Swap the markup to the shared .lp-ui-advanced-
toggle (track + thumb) structure — defined in services.css, which is loaded
globally — keeping .port-manager-show-advanced on the input for the JS hook.
Drop the now-dead .port-manager-advanced-toggle CSS.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Signed-off-by: librelad <librelad@digitalangels.vip>
---
 .../apps/port-manager/css/port-manager.css        | 15 ++++-----------
 .../apps/port-manager/js/port-manager.js          |  5 +++--
 2 files changed, 7 insertions(+), 13 deletions(-)

diff --git a/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css b/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
index f9bf205..fd0a918 100755
--- a/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
+++ b/containers/libreportal/frontend/components/apps/port-manager/css/port-manager.css
@@ -11,17 +11,10 @@
   gap: 0.75rem;
 }
 
-.port-manager-advanced-toggle {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.4rem;
-  font-size: 13px;
-  color: var(--text-secondary, #a0a0a0);
-  cursor: pointer;
-  user-select: none;
-}
-
-.port-manager-advanced-toggle input { margin: 0; }
+/* The "Show advanced fields" switch reuses the shared .lp-ui-advanced-toggle
+   pill (defined in services.css, loaded globally) so it matches the Services
+   tab's Advanced toggle exactly — only the input keeps .port-manager-show-advanced
+   for the JS hook. */
 
 /* Ensure help icons are always visible in port manager */
 .port-manager .help-icon {
diff --git a/containers/libreportal/frontend/components/apps/port-manager/js/port-manager.js b/containers/libreportal/frontend/components/apps/port-manager/js/port-manager.js
index 17b15f8..0afa5b2 100755
--- a/containers/libreportal/frontend/components/apps/port-manager/js/port-manager.js
+++ b/containers/libreportal/frontend/components/apps/port-manager/js/port-manager.js
@@ -261,9 +261,10 @@ class PortManager {
         <div class="port-manager-header">
           <h4>Port Configuration</h4>
           <div class="port-manager-header-actions">
-            <label class="port-manager-advanced-toggle">
+            <label class="lp-ui-advanced-toggle" title="Reveal advanced port fields (protocol, host IP, bind options)">
               <input type="checkbox" class="port-manager-show-advanced">
-              <span>Show advanced fields</span>
+              <span class="lp-ui-advanced-toggle-track"><span class="lp-ui-advanced-toggle-thumb"></span></span>
+              <span class="lp-ui-advanced-toggle-label">Show advanced fields</span>
             </label>
             <button type="button" class="btn btn-primary btn-sm add-port-btn">
               <span class="add-icon">+</span> Add Port