file manager: an enabled inactive read pill is outlined, not grey

The Read decoded pill used the same grey fill as a disabled control, so
an enabled pill looked unavailable (reported live).  The inactive-but-
enabled state is now an outlined button (blue on white/slate) and the
grey fill plus dimming are reserved for the actually disabled state.
The active pill keeps a border of the same width so the row does not
shift.

Pinned in fs_edit.test.js.  1022 Python + 1058 frontend; simple-v469.

CHANGELOG.md

@@ -30,6 +30,9 @@ every change carries a descriptive commit message.
   reserved — a record with a mixed indicator (e.g. `E9`) showed DCS and hid VP.
 - The read-only EF.SMSP view decoded the TP-DA length as octets, although it is the digit
   count (TS 23.040 §9.1.2.5); a slot padded with `00` gained phantom digits.
+- The **Read decoded** pill no longer looks disabled when it is enabled: an inactive-but-
+  enabled pill is now an outlined button (blue on white/slate), and the grey fill and
+  dimming are left to the actually disabled state.
 
 ## [3.34.0] — 2026-10-23
 

frontend/index.html

@@ -1129,8 +1129,8 @@
 						<div id="pysim-fs-info" class="mb-1"></div>
 						<div id="pysim-fs-content" class="w-full font-mono text-xs border border-gray-300 dark:border-slate-600 rounded px-2 py-1.5 bg-gray-100 dark:bg-slate-800 min-h-20 overflow-y-auto hidden"></div>
 						<div class="flex gap-2 mt-1 items-center">
-							<button type="button" data-needs="card" onclick="pysimFsSetMode('raw')" id="pysim-fs-read-raw-btn" class="pysim-mode-pill px-2 py-0.5 text-xs rounded cursor-pointer bg-blue-600 text-white disabled:opacity-40 disabled:cursor-not-allowed" data-mode="raw" data-l10n="Read raw">Read raw</button>
-							<button type="button" data-needs="card" data-needs-decoder onclick="pysimFsSetMode('dec')" id="pysim-fs-read-dec-btn" class="pysim-mode-pill px-2 py-0.5 text-xs rounded cursor-pointer bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 disabled:opacity-40 disabled:cursor-not-allowed" data-mode="dec" data-l10n="Read decoded">Read decoded</button>
+							<button type="button" data-needs="card" onclick="pysimFsSetMode('raw')" id="pysim-fs-read-raw-btn" class="pysim-mode-pill px-2 py-0.5 text-xs rounded cursor-pointer border border-blue-500 bg-blue-600 text-white disabled:opacity-40 disabled:cursor-not-allowed" data-mode="raw" data-l10n="Read raw">Read raw</button>
+							<button type="button" data-needs="card" data-needs-decoder onclick="pysimFsSetMode('dec')" id="pysim-fs-read-dec-btn" class="pysim-mode-pill px-2 py-0.5 text-xs rounded cursor-pointer border border-blue-500 bg-white dark:bg-slate-800 text-blue-600 dark:text-blue-300 hover:bg-gray-100 dark:hover:bg-slate-600 disabled:opacity-40 disabled:cursor-not-allowed" data-mode="dec" data-l10n="Read decoded">Read decoded</button>
 							<div class="ml-auto flex gap-2">
 								<button data-needs="card" onclick="pysimFsSave()" id="pysim-fs-save-btn" class="px-2 py-1 text-xs rounded bg-emerald-600 text-white hover:bg-emerald-700 hidden disabled:opacity-40 disabled:cursor-not-allowed" data-l10n="Save">Save</button>
 								<button onclick="pysimFsCancel()" id="pysim-fs-cancel-btn" class="px-2 py-1 text-xs rounded bg-gray-600 text-white hover:bg-gray-700 hidden" data-l10n="Cancel">Cancel</button>
@@ -16405,10 +16405,15 @@ function pysimFsSetMode(mode, skipRead) {
 		const active = el.dataset.mode === mode;
 		el.classList.toggle('bg-blue-600', active);
 		el.classList.toggle('text-white', active);
-		el.classList.toggle('bg-gray-200', !active);
-		el.classList.toggle('dark:bg-slate-700', !active);
-		el.classList.toggle('text-gray-700', !active);
-		el.classList.toggle('dark:text-slate-300', !active);
+		// An enabled inactive pill is an outlined button, not a grey one:
+		// grey reads as "disabled" while the pill is still clickable.  The
+		// grey/dimmed look is left to the disabled state alone.
+		el.classList.toggle('bg-white', !active);
+		el.classList.toggle('dark:bg-slate-800', !active);
+		el.classList.toggle('text-blue-600', !active);
+		el.classList.toggle('dark:text-blue-300', !active);
+		el.classList.toggle('hover:bg-gray-100', !active);
+		el.classList.toggle('dark:hover:bg-slate-600', !active);
 	});
 	if (!skipRead && pysimFsSelected) pysimFsRead();
 }

frontend/sw.js

@@ -1,4 +1,4 @@
-const CACHE = 'simple-v468';
+const CACHE = 'simple-v469';
 const URLS = [
   'index.html',
   'help.html',

frontend/tests/fs_edit.test.js

@@ -117,12 +117,19 @@ test('Read raw / Read decoded pills switch the view and read the file', () => {
 	assert.strictEqual(h.reads(), 0, 'skipRead updates the pills only');
 	assert.ok(h.pill('raw').classList.contains('bg-blue-600'));
 	assert.ok(!h.pill('dec').classList.contains('bg-blue-600'));
+	// an enabled inactive pill is outlined, not grey: the grey fill reads as
+	// "disabled" although the pill is clickable (reported live)
+	assert.ok(h.pill('dec').classList.contains('bg-white'));
+	assert.ok(h.pill('dec').classList.contains('text-blue-600'));
+	assert.ok(!h.pill('dec').classList.contains('bg-gray-200'));
 
 	pysimFsSetMode('dec');
 	assert.strictEqual(pysimFsDecodedMode, true);
 	assert.strictEqual(h.reads(), 1, 'a pill click reads the selected file');
 	assert.ok(h.pill('dec').classList.contains('bg-blue-600'));
 	assert.ok(!h.pill('raw').classList.contains('bg-blue-600'));
+	assert.ok(h.pill('raw').classList.contains('bg-white'));
+	assert.ok(!h.pill('raw').classList.contains('bg-gray-200'));
 });
 
 test('pill clicks are ignored while editing', () => {
@@ -221,4 +228,7 @@ test('the file manager row exposes the read pills and Edit raw', () => {
 	assert.ok(html.includes('id="pysim-fs-read-raw-btn"') && html.includes('data-needs="card"'));
 	const dec = /<button[^>]*id="pysim-fs-read-dec-btn"[^>]*>/.exec(html);
 	assert.ok(dec && dec[0].includes('data-needs-decoder'), 'the decoded pill is decoder-gated');
+	// the enabled-inactive look is an outline; the grey fill is for disabled
+	assert.ok(dec[0].includes('bg-white') && dec[0].includes('text-blue-600'));
+	assert.ok(!dec[0].includes('bg-gray-200'));
 });