From 5485d61390fc486d08e8c9b13d028880c35344c3 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: Sat, 12 Sep 2026 19:41:49 +0300
Subject: [PATCH] ui: sort the file manager tree by FID or symbolic name

- pysimFsSortChildren() groups DFs above EFs, then sorts each group by
  FID (default) or case-insensitive symbolic name; missing names fall
  back to the FID as the sort key; deterministic tie-break; the input
  array is not mutated
- render uses the sorted copy, so lazily loaded directories and custom
  file injections are sorted too
- FID / Name pills above the tree (pysimFsSetSort) persist the choice in
  localStorage (otaman_fs_sort) and re-render without refetching
- tests for the comparator (DF priority, both keys, fallbacks, custom
  entries, no mutation) and the pill wiring; help/README updated;
  SW cache v108 -> v109.
---
 README.md                      |  1 +
 README_RUS.md                  |  1 +
 frontend/help-ru.html          |  2 +-
 frontend/help.html             |  2 +-
 frontend/index.html            | 48 ++++++++++++++++++++++++-
 frontend/sw.js                 |  2 +-
 frontend/tests/fs_sort.test.js | 66 ++++++++++++++++++++++++++++++++++
 frontend/tests/html.test.js    |  6 ++++
 8 files changed, 124 insertions(+), 4 deletions(-)
 create mode 100644 frontend/tests/fs_sort.test.js

diff --git a/README.md b/README.md
index 1e1aba3..cb895e1 100644
--- a/README.md
+++ b/README.md
@@ -486,6 +486,7 @@ Connects to the bundled [`pysim-otaman-server`](pysim_otaman_server/) for live c
 
 Browse the UICC filesystem in a tree view. Files are shown with names, FIDs, and AIDs (for ADFs). Click to read contents.
 
+- Entries are grouped with DFs above EFs and sorted by **FID** or symbolic **Name** (pills above the tree, remembered in `localStorage`)
 - **Read** — reads the selected file (auto-detects transparent vs record files)
 - **Edit** — switch to edit mode, modify hex data, click **Save** to write back
 - **Raw / Decoded** — toggle between hex dump and pysim-decoded JSON view
diff --git a/README_RUS.md b/README_RUS.md
index ec4b68d..d30e9c4 100644
--- a/README_RUS.md
+++ b/README_RUS.md
@@ -460,6 +460,7 @@ Delivery PoR (SPI2 `01`) проще — карта возвращает PoR на
 
 Дерево файлов UICC. Отображаются имена, FID и AID (для ADF). Клик для чтения содержимого.
 
+- Элементы сгруппированы (DF выше EF) и отсортированы по **FID** или символьному **имени** (пиллы над деревом, выбор сохраняется в `localStorage`)
 - **Read** — чтение файла (автоопределение transparent/record)
 - **Edit** — режим редактирования, измените hex-данные и нажмите **Save** для записи
 - **Raw / Decoded** — переключение между hex-дампом и декодированным JSON
diff --git a/frontend/help-ru.html b/frontend/help-ru.html
index 58c6a24..45be55c 100644
--- a/frontend/help-ru.html
+++ b/frontend/help-ru.html
@@ -317,7 +317,7 @@
 	<p class="mb-3">Подключение к локальному <a href="https://github.com/anttro/otaman" class="text-blue-600 dark:text-blue-400 hover:underline">pysim-otaman-server</a> для работы с картой: введите URL сервера (по умолчанию <code class="font-mono text-sm">http://127.0.0.1:8080</code>) и нажмите <strong>Подключиться</strong>. Область статуса показывает состояние ридера/карты, а <strong>Подключить карту</strong> (пере)инициализирует карту после вставки. Подвкладки: <strong>Файловый менеджер</strong>, <strong>Командная строка pySim</strong> и <strong>Отправка APDU</strong>. <strong>&laquo;Профайлер&raquo;</strong> и <strong>&laquo;Симулятор телефона&raquo;</strong> — отдельные вкладки верхнего уровня.</p>
 
 	<h3 id="file-manager" class="text-lg font-medium mb-2">4.1 Файловый менеджер</h3>
-	<p class="text-sm mb-2">Дерево файловой системы отображается слева; выбор файла открывает панель деталей справа.</p>
+	<p class="text-sm mb-2">Дерево файловой системы отображается слева; выбор файла открывает панель деталей справа. Элементы сгруппированы: DF выше EF, сортировка по <strong>FID</strong> или символьному <strong>имени</strong> (пиллы над деревом; выбор сохраняется в <code class="font-mono text-sm">localStorage</code>).</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>Прочитать</strong> — чтение файла (автоопределение transparent/record)</li>
 		<li><strong>Редактировать</strong> — изменение hex-данных, <strong>Сохранить</strong> для записи (или <strong>Отмена</strong>)</li>
diff --git a/frontend/help.html b/frontend/help.html
index 4f628cc..57d95e2 100644
--- a/frontend/help.html
+++ b/frontend/help.html
@@ -317,7 +317,7 @@
 	<p class="mb-3">Connects to a local <a href="https://github.com/anttro/otaman" class="text-blue-600 dark:text-blue-400 hover:underline">pysim-otaman-server</a> for live card operations: enter the server URL (default <code class="font-mono text-sm">http://127.0.0.1:8080</code>) and press <strong>Connect</strong>. The status area shows the reader/card state, and <strong>Equip card</strong> (re)initializes the card after insertion. Sub-tabs: <strong>File manager</strong>, <strong>pySim command line</strong>, and <strong>Raw APDU</strong>. The <strong>Profiler</strong> and <strong>Phone simulator</strong> are separate top-level tabs.</p>
 
 	<h3 id="file-manager" class="text-lg font-medium mb-2">4.1 File manager</h3>
-	<p class="text-sm mb-2">The file system tree is displayed on the left; selecting a file opens its detail pane on the right.</p>
+	<p class="text-sm mb-2">The file system tree is displayed on the left; selecting a file opens its detail pane on the right. Entries are grouped with DFs above EFs and sorted by <strong>FID</strong> or symbolic <strong>Name</strong> (pills above the tree; the choice is remembered in <code class="font-mono text-sm">localStorage</code>).</p>
 	<ul class="list-disc list-inside text-sm space-y-1 mb-3">
 		<li><strong>Read</strong> — reads the selected file (auto-detects transparent vs record files)</li>
 		<li><strong>Edit</strong> — modify hex data, <strong>Save</strong> to write back (or <strong>Cancel</strong>)</li>
diff --git a/frontend/index.html b/frontend/index.html
index bb2e528..45a6dcf 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -772,6 +772,11 @@
 		<div id="pysim-sub-files">
 			<div class="flex gap-2">
 				<div class="w-1/3 border border-gray-300 dark:border-slate-600 rounded p-2 text-xs font-mono overflow-y-auto bg-gray-50 dark:bg-slate-800" style="max-height:420px">
+					<div class="flex items-center gap-1 mb-1 text-gray-500 dark:text-slate-400">
+						<span data-l10n="Sort:">Sort:</span>
+						<span class="pysim-fs-sort-pill px-2 py-0.5 rounded cursor-pointer bg-blue-600 text-white" data-fs-sort="fid" onclick="pysimFsSetSort('fid')">FID</span>
+						<span class="pysim-fs-sort-pill px-2 py-0.5 rounded cursor-pointer bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300" data-fs-sort="name" onclick="pysimFsSetSort('name')" data-l10n="Name">Name</span>
+					</div>
 					<div id="pysim-fs-tree"></div>
 				</div>
 				<div class="flex-1">
@@ -5849,6 +5854,44 @@ function pysimCustomInject(node) {
 	}
 }
 
+let pysimFsSort = localStorage.getItem('otaman_fs_sort') === 'name' ? 'name' : 'fid';
+
+function pysimFsSortChildren(children, mode) {
+	return (children || []).slice().sort((a, b) => {
+		if (!!a.isDir !== !!b.isDir) return a.isDir ? -1 : 1;
+		const af = (a.fid || '').toUpperCase();
+		const bf = (b.fid || '').toUpperCase();
+		const an = (a.name || '').toUpperCase();
+		const bn = (b.name || '').toUpperCase();
+		let r;
+		if (mode === 'name') {
+			const ak = an || af;
+			const bk = bn || bf;
+			r = ak < bk ? -1 : ak > bk ? 1 : 0;
+			if (r === 0) r = af < bf ? -1 : af > bf ? 1 : 0;
+		} else {
+			r = af < bf ? -1 : af > bf ? 1 : 0;
+			if (r === 0) r = an < bn ? -1 : an > bn ? 1 : 0;
+		}
+		return r;
+	});
+}
+
+function pysimFsSetSort(mode) {
+	pysimFsSort = mode === 'name' ? 'name' : 'fid';
+	localStorage.setItem('otaman_fs_sort', pysimFsSort);
+	document.querySelectorAll('.pysim-fs-sort-pill').forEach(p => {
+		const active = p.dataset.fsSort === pysimFsSort;
+		p.classList.toggle('bg-blue-600', active);
+		p.classList.toggle('text-white', active);
+		p.classList.toggle('bg-gray-200', !active);
+		p.classList.toggle('dark:bg-slate-700', !active);
+		p.classList.toggle('text-gray-700', !active);
+		p.classList.toggle('dark:text-slate-300', !active);
+	});
+	pysimFsRenderTree();
+}
+
 async function pysimFsRefresh() {
 	const detailEl = document.getElementById('pysim-fs-detail');
 	detailEl.classList.add('hidden');
@@ -5946,7 +5989,7 @@ function pysimFsRenderNode(node, depth) {
 	}
 	html += '</div>';
 	if (isDir && node.children && node.expanded) {
-		for (const child of node.children) {
+		for (const child of pysimFsSortChildren(node.children, pysimFsSort)) {
 			html += pysimFsRenderNode(child, depth + 1);
 		}
 	}
@@ -9050,6 +9093,8 @@ const LANG_RU = {
 	'Verify vs pySim': 'Проверить в pySim',
 	'Send to Card': 'Отправить на карту',
 	'Phone simulator': 'Симулятор телефона',
+	'Sort:': 'Сортировка:',
+	'Name': 'Имя',
 	'No server connection': 'Нет соединения с сервером',
 	'Server connected, no card equipped': 'Сервер подключён, карта не подключена',
 	'Card equipped': 'Карта подключена',
@@ -9269,6 +9314,7 @@ updateHelpLink();
 
 cardsLoad();
 pysimStartAvailabilityProbe();
+pysimFsSetSort(pysimFsSort);
 
 if (localStorage.getItem('theme') === 'dark' ||
     (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
diff --git a/frontend/sw.js b/frontend/sw.js
index 00ab40f..80cf7b0 100644
--- a/frontend/sw.js
+++ b/frontend/sw.js
@@ -1,4 +1,4 @@
-const CACHE = 'otaman-v108';
+const CACHE = 'otaman-v109';
 const URLS = [
   'index.html',
   'help.html',
diff --git a/frontend/tests/fs_sort.test.js b/frontend/tests/fs_sort.test.js
new file mode 100644
index 0000000..c95ed4d
--- /dev/null
+++ b/frontend/tests/fs_sort.test.js
@@ -0,0 +1,66 @@
+const { test } = require('node:test');
+const assert = require('node:assert');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+
+function extractFunc(src, name) {
+	const re = new RegExp('function\\s+' + name + '\\s*\\([^)]*\\)\\s*\\{');
+	const m = re.exec(src);
+	if (!m) throw new Error('function ' + name + ' not found');
+	let i = m.index + m[0].length - 1;
+	let depth = 0;
+	for (; i < src.length; i++) {
+		if (src[i] === '{') depth++;
+		else if (src[i] === '}') {
+			depth--;
+			if (depth === 0) break;
+		}
+	}
+	return src.slice(m.index, i + 1);
+}
+
+eval(extractFunc(html, 'pysimFsSortChildren'));
+
+const f = (fid, name) => ({ fid, name, isDir: false });
+const d = (fid, name) => ({ fid, name, isDir: true });
+
+test('DFs sort before EFs in both modes', () => {
+	const children = [f('6F07', 'EF.IMSI'), d('7F20', 'DF.GSM'), f('2FE2', 'EF.ICCID'), d('7F10', 'DF.TELECOM')];
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'fid').map(x => x.fid), ['7F10', '7F20', '2FE2', '6F07']);
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'name').map(x => x.name), ['DF.GSM', 'DF.TELECOM', 'EF.ICCID', 'EF.IMSI']);
+});
+
+test('FID mode sorts EFs numerically by FID string', () => {
+	const children = [f('6F3A', 'EF.ADN'), f('2FE2', 'EF.ICCID'), f('6F07', 'EF.IMSI')];
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'fid').map(x => x.fid), ['2FE2', '6F07', '6F3A']);
+});
+
+test('name mode sorts case-insensitively', () => {
+	const children = [f('6F3A', 'EF.ADN'), f('2FE2', 'ef.iccid'), f('6F07', 'EF.IMSI')];
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'name').map(x => x.name), ['EF.ADN', 'ef.iccid', 'EF.IMSI']);
+});
+
+test('missing name falls back to the FID as the sort key', () => {
+	const children = [f('2FE2', null), f('6F07', 'EF.IMSI'), f('6F3A', '')];
+	// keys: '2FE2', 'EF.IMSI', '6F3A' -> '2FE2' < '6F3A' < 'EF.IMSI'
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'name').map(x => x.fid), ['2FE2', '6F3A', '6F07']);
+});
+
+test('custom entries use their isDir flag for the DF priority', () => {
+	const children = [f('6F3A', 'EF.ADN'), d('7F20', 'DF.GSM')];
+	assert.strictEqual(pysimFsSortChildren(children, 'fid')[0].name, 'DF.GSM');
+});
+
+test('equal keys keep a deterministic tie-break by the other field', () => {
+	const children = [f('6F07', 'EF.SAME'), f('2FE2', 'EF.SAME')];
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'name').map(x => x.fid), ['2FE2', '6F07']);
+	assert.deepStrictEqual(pysimFsSortChildren(children, 'fid').map(x => x.fid), ['2FE2', '6F07']);
+});
+
+test('does not mutate the input array', () => {
+	const children = [f('6F3A', 'B'), f('2FE2', 'A')];
+	pysimFsSortChildren(children, 'fid');
+	assert.deepStrictEqual(children.map(x => x.fid), ['6F3A', '2FE2']);
+});
diff --git a/frontend/tests/html.test.js b/frontend/tests/html.test.js
index 6d8e5ac..93e4b76 100644
--- a/frontend/tests/html.test.js
+++ b/frontend/tests/html.test.js
@@ -48,3 +48,9 @@ test('header state indicator and profiler custom-files tab', () => {
     assert.ok(html.includes('data-list-tab="custom"'));
     assert.ok(!html.includes('data-pysim-sub="custom"'));
 });
+
+test('file manager has FID / Name sort pills', () => {
+    assert.match(html, /data-fs-sort="fid" onclick="pysimFsSetSort\('fid'\)"/);
+    assert.match(html, /data-fs-sort="name" onclick="pysimFsSetSort\('name'\)"/);
+    assert.ok(html.includes('pysim-fs-sort-pill'));
+});