From 8ffe9cf6c0d0238b711c7cc7a35bffcdcdb511ef Mon Sep 17 00:00:00 2001
From: CallMeTechie <34693633+CallMeTechie@users.noreply.github.com>
Date: Tue, 23 Jun 2026 10:35:03 +0200
Subject: [PATCH] =?UTF-8?q?fix(theme):=20Aurora=20routes=20=E2=80=94=20nes?=
 =?UTF-8?q?t=20grouped=20sub-routes=20+=20fix=20status=20toggle=20knob?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two Aurora-routes polish fixes:
- Grouped member routes were indistinguishable from standalone routes when a
  group was expanded. Mark them with .aurora-route-sub and nest them via an
  indent + a left rail in aurora.css, replacing the lone '└' hint, so they
  read as belonging to the group header above.
- The status toggle knob landed outside the switch when on: aurora's
  .toggle.on::after set left:20px but did not reset pro.css's inherited
  transform:translateX(18px), stacking both offsets. Add transform:none.

Aurora-only (auroraRenderTableRow path + aurora.css; default/pro untouched).
---
 public/css/aurora.css |  8 +++++++-
 public/js/routes.js   | 13 +++++++------
 2 files changed, 14 insertions(+), 7 deletions(-)

diff --git a/public/css/aurora.css b/public/css/aurora.css
index 4f5901d1..7ca41891 100644
--- a/public/css/aurora.css
+++ b/public/css/aurora.css
@@ -301,6 +301,10 @@ a{color:inherit}
 /* "Collapse all" toolbar toggle */
 #aurora-collapse-all{color:var(--muted)}
 #aurora-collapse-all:hover{color:var(--text)}
+/* Grouped member rows — nested under their group header via indent + a left
+   rail, so they're clearly set off from standalone routes (which sit flush). */
+.data-table tr.aurora-route-sub td.cell-name{position:relative; padding-left:34px; color:var(--muted)}
+.data-table tr.aurora-route-sub td.cell-name::before{content:""; position:absolute; left:17px; top:0; bottom:0; width:2px; background:var(--line-2); border-radius:1px}
 .row-actions{display:flex; gap:6px; justify-content:flex-end}
 .icon-action{width:30px;height:30px;border-radius:8px;border:1px solid var(--line);background:var(--chip);color:var(--muted);
   display:grid;place-items:center;cursor:pointer;transition:.15s}
@@ -386,7 +390,9 @@ input[type=date]:focus, select:focus {
 .toggle{width:42px;height:24px;border-radius:999px;background:var(--surface-3);border:1px solid var(--line-2);position:relative;cursor:pointer;transition:.2s; flex:0 0 auto}
 .toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:.2s}
 .toggle.on{background:linear-gradient(145deg,var(--teal),var(--teal-dim));border-color:transparent}
-.toggle.on::after{left:20px;background:#fff}
+/* transform:none resets pro.css's .toggle.on::after translateX(18px) — without
+   it the knob is shifted left:20px AND +18px, landing outside the switch. */
+.toggle.on::after{left:20px;transform:none;background:#fff}
 
 /* segmented button group (production: .toggle-group/.toggle-btn/.on) */
 .toggle-group{display:inline-flex; gap:2px; background:var(--surface-3); border:1px solid var(--line); border-radius:10px; padding:3px}
diff --git a/public/js/routes.js b/public/js/routes.js
index 3feed602..b31a48d9 100644
--- a/public/js/routes.js
+++ b/public/js/routes.js
@@ -472,14 +472,15 @@
     var status = view.routeStatus(r);
     var toggleEl = '<div class="toggle' + (status !== 'disabled' ? ' on' : '') + '" data-action="toggle" data-id="' + r.id + '" style="cursor:pointer" title="Toggle"></div>';
 
-    // Domain display (sub-rows indent with └)
-    var domainTxt = opts.subRow
-      ? '<span style="color:var(--faint)">└ ' + (r.domain ? escapeHtml(r.domain) : '—') + '</span>'
-      : (r.domain ? escapeHtml(r.domain) : '—');
+    // Domain display. Grouped members are visually nested via the
+    // .aurora-route-sub class (indent + left rail in aurora.css) so they read
+    // as belonging to the group header above, distinct from standalone routes.
+    var domainTxt = (r.domain ? escapeHtml(r.domain) : '—');
 
     var delDomain = r.domain ? escapeHtml(r.domain) : ((r.l4_protocol === 'udp' ? 'UDP' : 'TCP') + ' :' + (r.l4_listen_port || ''));
 
-    return '<tr data-route-id="' + r.id + '">'
+    var rowCls = opts.grouped ? ' class="aurora-route-sub"' : '';
+    return '<tr data-route-id="' + r.id + '"' + rowCls + '>'
       + '<td class="cell-name">' + domainTxt + '</td>'
       + '<td>' + typeTag + '</td>'
       + '<td class="mono">' + escapeHtml(targetTxt) + '</td>'
@@ -543,7 +544,7 @@
         if (collapsedGroups.has(g.key)) continue; // collapsed → members hidden
       }
       for (var ri = 0; ri < g.routes.length; ri++) {
-        rows += auroraRenderTableRow(g.routes[ri], { subRow: grouped && ri > 0 });
+        rows += auroraRenderTableRow(g.routes[ri], { grouped: grouped });
       }
     }
     auroraUpdateCollapseAll();