From aeb441540d8c75225c2de0c99cf4cf9ba6a6eb2b Mon Sep 17 00:00:00 2001
From: dborup <kontakt@meshview.dk>
Date: Tue, 28 Jul 2026 06:11:07 +0200
Subject: [PATCH] fix: Observer Neighbors tool header never actually got the
 sort-active highlight class

Caught live on stg: clicking a column sorted correctly (confirmed via
sortValue/data ordering) but no header ever visually highlighted as the
active sort column -- the thead template hardcoded class="sortable" on
every <th> and never added sort-active, even though sortArrow() computed
the right up/down glyph. Refactored into a sortTh(col, label) helper so
the class and arrow can't drift apart again; added a regression test.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
---
 public/observer-neighbors-tool.js | 15 ++++++++++-----
 test-observer-neighbors-tool.js   |  9 +++++++++
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/public/observer-neighbors-tool.js b/public/observer-neighbors-tool.js
index aa150856..cc17225d 100644
--- a/public/observer-neighbors-tool.js
+++ b/public/observer-neighbors-tool.js
@@ -83,6 +83,11 @@
     return '<span class="sort-arrow">' + (sortState.dir === 'asc' ? '↑' : '↓') + '</span>';
   }
 
+  function sortTh(col, label) {
+    var cls = 'sortable' + (col === sortState.col ? ' sort-active' : '');
+    return '<th class="' + cls + '" data-sort-col="' + col + '">' + label + sortArrow(col) + '</th>';
+  }
+
   function matchesFilter(row) {
     if (!filterText) return true;
     var observer = (row.observerName || row.observerId || '').toLowerCase();
@@ -149,12 +154,12 @@
 
     wrap.innerHTML =
       '<table class="data-table" id="obs-nb-table"><thead><tr>' +
-        '<th class="sortable" data-sort-col="observer">Observer' + sortArrow('observer') + '</th>' +
-        '<th class="sortable" data-sort-col="neighbor">Neighbor' + sortArrow('neighbor') + '</th>' +
+        sortTh('observer', 'Observer') +
+        sortTh('neighbor', 'Neighbor') +
         '<th>Configured Scope</th>' +
-        '<th class="sortable" data-sort-col="evidence">Packet Evidence' + sortArrow('evidence') + '</th>' +
-        '<th class="sortable" data-sort-col="status">Status' + sortArrow('status') + '</th>' +
-        '<th class="sortable" data-sort-col="reportedAt">Reported' + sortArrow('reportedAt') + '</th>' +
+        sortTh('evidence', 'Packet Evidence') +
+        sortTh('status', 'Status') +
+        sortTh('reportedAt', 'Reported') +
       '</tr></thead><tbody>' + rows + '</tbody></table>';
 
     var table = document.getElementById('obs-nb-table');
diff --git a/test-observer-neighbors-tool.js b/test-observer-neighbors-tool.js
index 6bee2e33..4a19a51b 100644
--- a/test-observer-neighbors-tool.js
+++ b/test-observer-neighbors-tool.js
@@ -151,6 +151,15 @@ function waitForLoad() {
     assert.strictEqual(sv({ neighborPubkey: 'AABB' }, 'neighbor'), 'aabb');
   });
 
+  await test('the default-sorted column (Observer) header carries sort-active', async () => {
+    const sb = initWith([makeRow(), makeRow({ observerId: 'obs2', observerName: 'Observer Two' })]);
+    await waitForLoad();
+    const wrap = sb.__docStore['obs-nb-table-wrap'];
+    assert.ok(/data-sort-col="observer"[^>]*class="sortable sort-active"|class="sortable sort-active"[^>]*data-sort-col="observer"/.test(wrap.innerHTML),
+      `expected Observer header to carry sort-active by default; got: ${wrap.innerHTML.slice(0, 400)}`);
+    assert.ok(!/data-sort-col="neighbor"[^>]*sort-active/.test(wrap.innerHTML), 'Neighbor header should not be marked active');
+  });
+
   await test('sortValue: evidence sorts booleans as 1/0', () => {
     const sb = createSandbox([]);
     const sv = sb.window.ObserverNeighborsTool.sortValue;