From 119b1cd54a52d1d004bd85cc70e53e25b8c69891 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=D0=90=D0=BD=D1=82=D0=BE=D0=BD=20=D0=A2=D1=80=D0=BE=D1=88?=
 =?UTF-8?q?=D0=B8=D0=BD?= <i@atroshin.ru>
Date: Sun, 18 Oct 2026 11:16:56 +0300
Subject: [PATCH] APDU list: the selected row gets a blue tint in dark mode too
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- the selection used --bg-input (#334155, a neutral slate) in dark mode, which
  sat right next to the GET RESPONSE pair rows' grey tint
  (--pair-row = rgba(148,163,184,0.12)) and was easy to mistake for them; the
  light theme already had its own blue (#dbeafe) through a
  [data-theme="light"] override
- both themes now set a --selected-bg variable (dark #1e3a8a = blue-900 — the
  palette counterpart of the light blue-100 — light #dbeafe unchanged) and a
  single `.apdu-entry.selected` rule uses it, so the override is gone
- Node test pins the variable in both themes and the single rule
- SW cache simtrace-analyser-v90 (cosmetic, no version bump)
---
 frontend/index.html          |  6 ++++--
 frontend/sw.js               |  2 +-
 frontend/tests/style.test.js | 10 ++++++++++
 3 files changed, 15 insertions(+), 3 deletions(-)

diff --git a/frontend/index.html b/frontend/index.html
index f8bf728..cb41589 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -18,6 +18,8 @@
     --bg: #0f172a;
     --bg-panel: #1e293b;
     --bg-input: #334155;
+    --selected-bg: #1e3a8a;   /* a blue tint, so a selected row stands out
+                                 from the GET RESPONSE pair rows */
     --border: #475569;
     --text: #e2e8f0;
     --text-muted: #94a3b8;
@@ -51,6 +53,7 @@
     --bg: #fafafa;
     --bg-panel: #e5e7eb;
     --bg-input: #ffffff;
+    --selected-bg: #dbeafe;
     --border: #d1d5db;
     --text: #1f2937;
     --text-muted: #6b7280;
@@ -147,8 +150,7 @@ body { font: 14px/1.5 system-ui, sans-serif; background: var(--bg); color: var(-
 .apdu-entry { display: flex; gap: 12px; padding: 3px 12px; border-bottom: 1px solid var(--bg-panel); cursor: pointer; align-items: baseline; }
 .apdu-entry.apdu-pair { background: var(--pair-row); }
 .apdu-entry:hover { background: var(--bg-panel); }
-.apdu-entry.selected { background: var(--bg-input); }
-[data-theme="light"] .apdu-entry.selected { background: #dbeafe; }
+.apdu-entry.selected { background: var(--selected-bg); }
 .apdu-time { color: var(--text-muted); font-family: monospace; white-space: nowrap; min-width: 80px; }
 .apdu-type { color: var(--text); font-weight: 600; min-width: 150px; }
 .apdu-type.atr { color: var(--green); }
diff --git a/frontend/sw.js b/frontend/sw.js
index fb65e99..cab5863 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'simtrace-analyser-v89';
+const CACHE = 'simtrace-analyser-v90';
 
 const PRECACHE = [
     'index.html',
diff --git a/frontend/tests/style.test.js b/frontend/tests/style.test.js
index 033d214..a153f1c 100644
--- a/frontend/tests/style.test.js
+++ b/frontend/tests/style.test.js
@@ -27,6 +27,16 @@ test('the P3 row labels Lc and Le', () => {
 	assert.match(src, /t\('Lc \(command data length\)'\)/);
 });
 
+test('the APDU selection is a blue tint in both themes', () => {
+	assert.match(src, /\.apdu-entry\.selected \{ background: var\(--selected-bg\); \}/);
+	assert.doesNotMatch(src, /\[data-theme="light"\] \.apdu-entry\.selected/);
+	// Dark: a blue (not the neutral --bg-input grey that blended with the
+	// GET RESPONSE pair rows); light: the established blue-100.
+	assert.match(src, /--selected-bg: #1e3a8a;/);
+	assert.match(src, /--selected-bg: #dbeafe;/);
+	assert.doesNotMatch(src, /--selected-bg: var\(--bg-input\)/);
+});
+
 // ── trace topbar layout ────────────────────────────────────────────────
 
 test('the view selector sits over the side panel at the panel width', () => {