From 4389cfcd8b57d5bf972265bdee10fa2e26811bbc Mon Sep 17 00:00:00 2001
From: d00f <tokyusho@chatik.pl>
Date: Wed, 5 Aug 2026 21:35:54 +0200
Subject: [PATCH] l2: show which column sorts and in which direction

Clicking a heading sorted the table but nothing said so afterwards - the
only feedback was the rows moving, which is no help when the sort key is a
column you are not looking at.

Give every sortable heading a permanent marker: a neutral double arrow when
it is not the sort key, up or down when it is. The marker sits in its own
span so the i18n pass, which replaces the heading text, does not wipe it.
---
 html/l2.html   | 8 ++++----
 html/l2.js     | 4 ++++
 html/style.css | 1 +
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/html/l2.html b/html/l2.html
index b739d0f..6134372 100644
--- a/html/l2.html
+++ b/html/l2.html
@@ -13,13 +13,13 @@
     <p><span data-i18n="l2_shown">Shown:</span> <span id="l2count">-</span></p>
     <table id="l2table">
       <tr>
-        <th><span class="l2sort" onclick="l2SortBy('port')" data-i18n="l2_col_port">Port</span><br>
+        <th><span class="l2sort" onclick="l2SortBy('port')"><span data-i18n="l2_col_port">Port</span><span id="l2a_port" class="l2arrow"></span></span><br>
             <input id="l2f_port" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
-        <th><span class="l2sort" onclick="l2SortBy('mac')">MAC</span><br>
+        <th><span class="l2sort" onclick="l2SortBy('mac')">MAC<span id="l2a_mac" class="l2arrow"></span></span><br>
             <input id="l2f_mac" class="l2filter" oninput="l2FilterChanged()" size="14"></th>
-        <th><span class="l2sort" onclick="l2SortBy('vlan')">VLAN</span><br>
+        <th><span class="l2sort" onclick="l2SortBy('vlan')">VLAN<span id="l2a_vlan" class="l2arrow"></span></span><br>
             <input id="l2f_vlan" class="l2filter" oninput="l2FilterChanged()" size="5"></th>
-        <th><span class="l2sort" onclick="l2SortBy('type')" data-i18n="l2_col_type">Type</span><br>
+        <th><span class="l2sort" onclick="l2SortBy('type')"><span data-i18n="l2_col_type">Type</span><span id="l2a_type" class="l2arrow"></span></span><br>
             <input id="l2f_type" class="l2filter" oninput="l2FilterChanged()" size="8"></th>
         <th data-i18n="l2_col_remove">Remove Entry</th></tr>
       <script src="/l2.js"></script>
diff --git a/html/l2.js b/html/l2.js
index f68f837..20125dc 100644
--- a/html/l2.js
+++ b/html/l2.js
@@ -100,6 +100,10 @@ function renderL2() {
     var x = l2Key(a, l2SortCol), y = l2Key(b, l2SortCol);
     return (x < y ? -1 : x > y ? 1 : 0) * l2SortDir;
   });
+  ['port', 'mac', 'vlan', 'type'].forEach(function(c) {
+    var a = document.getElementById('l2a_' + c);
+    if (a) a.textContent = (c === l2SortCol) ? (l2SortDir > 0 ? ' \u25b2' : ' \u25bc') : ' \u21c5';
+  });
   paintL2(tbl, rows);
   var cnt = document.getElementById('l2count');
   if (cnt) cnt.textContent = rows.length + ' / ' + l2All.length;
diff --git a/html/style.css b/html/style.css
index 3533c6b..758800b 100644
--- a/html/style.css
+++ b/html/style.css
@@ -168,4 +168,5 @@ option { direction: rtl; font-family: sans-serif}
 /* L2 table: sortable headers and per-column filters */
 .l2sort{cursor:pointer;user-select:none}
 .l2sort:hover{text-decoration:underline}
+.l2arrow{opacity:0.55;font-size:0.85em}
 .l2filter{width:100%;box-sizing:border-box;font-weight:normal;font-size:0.9em}