From 7e0cd455aefc6728c03f0bc4f1ed51b3398b36e2 Mon Sep 17 00:00:00 2001
From: you <you@example.com>
Date: Sat, 21 Mar 2026 23:41:24 +0000
Subject: [PATCH] fix: move observation sort to filter bar dropdown, save to
 localStorage

- Removed per-group sort bar links (broken navigation)
- Added global 'Sort:' dropdown in filter toolbar
- Persists to localStorage across sessions
- Re-sorts all expanded groups on change
---
 public/index.html |  2 +-
 public/packets.js | 34 ++++++++++++++++++++--------------
 2 files changed, 21 insertions(+), 15 deletions(-)

diff --git a/public/index.html b/public/index.html
index ea1a5655..e741d93f 100644
--- a/public/index.html
+++ b/public/index.html
@@ -84,7 +84,7 @@
   <script src="hop-resolver.js?v=1774126708"></script>
   <script src="app.js?v=1774126708"></script>
   <script src="home.js?v=1774042199"></script>
-  <script src="packets.js?v=1774135925"></script>
+  <script src="packets.js?v=1774136484"></script>
   <script src="map.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="channels.js?v=1774331200" onerror="console.error('Failed to load:', this.src)"></script>
   <script src="nodes.js?v=1774126708" onerror="console.error('Failed to load:', this.src)"></script>
diff --git a/public/packets.js b/public/packets.js
index 315e600c..78ce2485 100644
--- a/public/packets.js
+++ b/public/packets.js
@@ -413,6 +413,11 @@
         <select id="fType" aria-label="Filter by packet type"><option value="">All Types</option></select>
         <button class="btn ${groupByHash ? 'active' : ''}" id="fGroup">Group by Hash</button>
         <button class="btn" id="fMyNodes" title="Show only packets from claimed/favorited nodes">★ My Nodes</button>
+        <select id="fObsSort" aria-label="Observation sort order" title="Sort order for expanded observations">
+          <option value="observer">Sort: Observer</option>
+          <option value="path">Sort: Path length</option>
+          <option value="chrono">Sort: Chronological</option>
+        </select>
         <div class="col-toggle-wrap">
           <button class="col-toggle-btn" id="colToggleBtn">Columns ▾</button>
           <div class="col-toggle-menu" id="colToggleMenu"></div>
@@ -460,6 +465,19 @@
       loadPackets();
     });
 
+    // Observation sort dropdown
+    const obsSortSel = document.getElementById('fObsSort');
+    obsSortSel.value = obsSortMode;
+    obsSortSel.addEventListener('change', function () {
+      obsSortMode = this.value;
+      localStorage.setItem('meshcore-obs-sort', obsSortMode);
+      // Re-sort all expanded groups
+      for (const p of packets) {
+        if (expandedHashes.has(p.hash) && p._children) sortGroupChildren(p);
+      }
+      renderTableRows();
+    });
+
     // Column visibility toggle (#71)
     const COL_DEFS = [
       { key: 'region', label: 'Region' },
@@ -600,13 +618,6 @@
           if (hash) selectPacket(null, hash);
           else selectPacket(Number(value));
         }
-        else if (action === 'sort-group') {
-          e.preventDefault();
-          const sortType = btn.dataset.sort;
-          groupSortModes[value] = sortType;
-          const group = packets.find(p => p.hash === value);
-          if (group) { sortGroupChildren(group); renderTableRows(); }
-        }
         else if (action === 'select-observation') {
           const parentHash = row.dataset.parentHash;
           const group = packets.find(p => p.hash === parentHash);
@@ -699,11 +710,6 @@
         </tr>`;
         // Child rows (loaded async when expanded)
         if (isExpanded && p._children) {
-          const sortMode = groupSortModes[p.hash] || SORT_OBSERVER;
-          const obsLabel = sortMode === SORT_OBSERVER ? '<strong>Observer</strong>' : 'Observer';
-          const pathLabel = sortMode === SORT_PATH_LENGTH ? '<strong>Path length</strong>' : 'Path length';
-          const chronoLabel = sortMode === SORT_CHRONO ? '<strong>Chronological</strong>' : 'Chronological';
-          html += `<tr class="group-sort-bar"><td colspan="10" style="padding:2px 8px;font-size:0.8em;color:var(--text-muted)">Sort: <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_OBSERVER}" style="color:var(--primary);cursor:pointer">${obsLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_PATH_LENGTH}" style="color:var(--primary);cursor:pointer">${pathLabel}</a> · <a href="#" data-action="sort-group" data-value="${p.hash}" data-sort="${SORT_CHRONO}" style="color:var(--primary);cursor:pointer">${chronoLabel}</a></td></tr>`;
           for (const c of p._children) {
             const typeName = payloadTypeName(c.payload_type);
             const typeClass = payloadTypeColor(c.payload_type);
@@ -1253,7 +1259,7 @@
   const SORT_OBSERVER = 'observer';
   const SORT_PATH_LENGTH = 'path';
   const SORT_CHRONO = 'chrono';
-  const groupSortModes = {}; // hash → sort mode
+  let obsSortMode = localStorage.getItem('meshcore-obs-sort') || SORT_OBSERVER;
 
   function getPathHopCount(c) {
     try { return JSON.parse(c.path_json || '[]').length; } catch { return 0; }
@@ -1261,7 +1267,7 @@
 
   function sortGroupChildren(group) {
     if (!group || !group._children) return;
-    const mode = groupSortModes[group.hash] || SORT_OBSERVER;
+    const mode = obsSortMode;
 
     if (mode === SORT_CHRONO) {
       group._children.sort((a, b) => {