STK menu: remove warning, restructure buttons (OK/Back/Cancel/Timeout/Exit), fix double-fetch

index.html

@@ -916,15 +916,15 @@
 
 	<div id="stk-menu-panel" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
 		<div class="bg-white dark:bg-slate-800 rounded-lg p-4 max-w-md w-full max-h-[80vh] flex flex-col">
-			<div id="stk-menu-warning" class="hidden mb-2 text-xs text-amber-600 dark:text-amber-400 text-center bg-amber-50 dark:bg-amber-900/30 rounded px-2 py-1">Menu session blocks all other commands, click Cancel/Exit to leave menu and unblock</div>
 			<div class="flex justify-between items-center mb-3">
 				<button id="stk-back-btn" onclick="stkMenuRespond('back')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600" disabled>← Back</button>
 				<span id="stk-menu-panel-title" class="font-bold text-sm"></span>
-				<button id="stk-cancel-btn" onclick="stkMenuRespond('cancel')" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Cancel/Exit</button>
+				<button onclick="stkMenuExit()" class="px-3 py-1 text-xs rounded-full bg-red-100 dark:bg-red-900/30 text-red-700 dark:text-red-400 hover:bg-red-200 dark:hover:bg-red-900/50">Exit</button>
 			</div>
 			<div id="stk-menu-panel-content" class="flex-1 overflow-auto"></div>
 			<div id="stk-menu-buttons" class="flex justify-between mt-3 pt-3 border-t border-gray-200 dark:border-slate-700 hidden">
 				<button onclick="stkMenuRespond('timeout')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600">Timeout</button>
+				<button onclick="stkMenuRespond('cancel')" class="px-3 py-1 text-xs rounded-full bg-gray-200 dark:bg-slate-700 text-gray-700 dark:text-slate-300 hover:bg-gray-300 dark:hover:bg-slate-600">Cancel</button>
 				<button onclick="stkMenuRespond('ok')" class="px-4 py-1 text-xs rounded-full bg-blue-600 text-white hover:bg-blue-700">OK</button>
 			</div>
 		</div>
@@ -2560,8 +2560,7 @@ async function pysimConnect() {
 			pysimSetConnected(false);
 			statusEl.innerHTML = '<span class="text-red-500">No card detected. Insert card and click Equip card button</span>';
 			pysimShowConnected(true);
-		btn.textContent = 'Connected';
+			btn.textContent = 'Connected';
-		stkCheckMenu();
 			btn.disabled = false;
 			return;
 		}
@@ -2571,6 +2570,7 @@ async function pysimConnect() {
 		pysimLoadCommands();
 		pysimFsRefresh();
 		btn.textContent = 'Connected';
+		stkCheckMenu();
 	} catch (e) {
 		pysimSetConnected(false);
 		statusEl.innerHTML = '<span class="text-red-500">Connection failed: ' + esc(e.message) + '</span>';
@@ -2743,7 +2743,9 @@ let stkMenuStack = [];
 
 async function stkCheckMenu() {
 	try {
+		console.log('stkCheckMenu called');
 		const data = await pysimFetch('/api/menu');
+		console.log('menu data:', data);
 		const btn = document.getElementById('stk-menu-btn');
 		if (data && data.title && data.items && data.items.length) {
 			document.getElementById('stk-menu-title').textContent = data.title;
@@ -2751,7 +2753,9 @@ async function stkCheckMenu() {
 		} else {
 			btn.style.display = 'none';
 		}
-	} catch (e) {}
+	} catch (e) {
+		console.error('stkCheckMenu error:', e);
+	}
 }
 
 function stkSetPillsDisabled(disabled) {
@@ -2763,13 +2767,11 @@ function stkSetPillsDisabled(disabled) {
 }
 
 function stkMenuOpen() {
-	const menu = document.getElementById('stk-menu-btn');
 	document.getElementById('stk-menu-panel-title').textContent = document.getElementById('stk-menu-title').textContent;
-	document.getElementById('stk-menu-warning').classList.remove('hidden');
 	stkSetPillsDisabled(true);
 	stkMenuStack = [];
 	document.getElementById('stk-back-btn').disabled = true;
-	document.getElementById('stk-menu-buttons').classList.remove('hidden');
+	document.getElementById('stk-menu-buttons').classList.add('hidden');
 	document.getElementById('stk-menu-panel').classList.remove('hidden');
 	stkMenuRenderItems();
 }
@@ -2777,7 +2779,13 @@ function stkMenuOpen() {
 function stkMenuClose() {
 	document.getElementById('stk-menu-panel').classList.add('hidden');
 	stkSetPillsDisabled(false);
-	document.getElementById('stk-menu-warning').classList.add('hidden');
+}
+
+async function stkMenuExit() {
+	try {
+		await pysimFetch('/api/menu-respond', { result: 'cancel' });
+	} catch (e) {}
+	stkMenuClose();
 }
 
 function stkMenuRenderItems() {
@@ -2810,9 +2818,12 @@ async function stkMenuItemClick(itemId) {
 function stkMenuHandleResponse(data) {
 	const content = document.getElementById('stk-menu-panel-content');
 	const backBtn = document.getElementById('stk-back-btn');
+	const btns = document.getElementById('stk-menu-buttons');
+	btns.classList.add('hidden');
 	if (data.type === 'display_text') {
 		content.innerHTML = '<div class="text-sm whitespace-pre-wrap p-2 bg-gray-50 dark:bg-slate-700 rounded">' + esc(data.text) + '</div>';
 		backBtn.disabled = stkMenuStack.length === 0;
+		btns.classList.remove('hidden');
 	} else if (data.type === 'select_item') {
 		stkMenuStack.push(data.items);
 		content.innerHTML = '';
@@ -2824,6 +2835,7 @@ function stkMenuHandleResponse(data) {
 		html += '</div>';
 		content.innerHTML = html;
 		backBtn.disabled = false;
+		btns.classList.remove('hidden');
 	} else {
 		content.innerHTML = '<span class="text-gray-500 text-sm">Done</span>';
 		stkSetPillsDisabled(false);
@@ -2845,23 +2857,10 @@ async function stkSubItemClick(itemId) {
 async function stkMenuRespond(result) {
 	try {
 		const data = await pysimFetch('/api/menu-respond', { result: result });
-		if (result === 'cancel') {
+		if (result === 'cancel' || result === 'back' || result === 'timeout') {
-			stkMenuClose();
+			stkMenuRenderItems();
-			return;
+			document.getElementById('stk-menu-buttons').classList.add('hidden');
-		}
+			document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0;
-		if (result === 'back') {
-			if (stkMenuStack.length > 0) {
-				const prev = stkMenuStack.pop();
-				const content = document.getElementById('stk-menu-panel-content');
-				content.innerHTML = '';
-				let html = '<div class="space-y-1">';
-				prev.forEach(item => {
-					html += '<div class="flex items-center gap-2 px-2 py-1.5 rounded hover:bg-gray-100 dark:hover:bg-slate-700 cursor-pointer" onclick="stkSubItemClick(' + item.id + ')"><span class="w-5 text-xs font-bold text-gray-400 text-right">' + item.id + '</span><span class="text-sm">' + esc(item.text) + '</span></div>';
-				});
-				html += '</div>';
-				content.innerHTML = html;
-				document.getElementById('stk-back-btn').disabled = stkMenuStack.length === 0;
-			}
 			return;
 		}
 		stkMenuHandleResponse(data);

style.css

@@ -554,6 +554,10 @@ video {
   display: none;
 }
 
+.fixed {
+  position: fixed;
+}
+
 .absolute {
   position: absolute;
 }
@@ -562,6 +566,10 @@ video {
   position: relative;
 }
 
+.inset-0 {
+  inset: 0px;
+}
+
 .bottom-full {
   bottom: 100%;
 }
@@ -578,6 +586,10 @@ video {
   z-index: 10;
 }
 
+.z-50 {
+  z-index: 50;
+}
+
 .mx-auto {
   margin-left: auto;
   margin-right: auto;
@@ -639,6 +651,10 @@ video {
   margin-top: 0.5rem;
 }
 
+.mt-3 {
+  margin-top: 0.75rem;
+}
+
 .block {
   display: block;
 }
@@ -663,6 +679,10 @@ video {
   max-height: 8rem;
 }
 
+.max-h-\[80vh\] {
+  max-height: 80vh;
+}
+
 .min-h-20 {
   min-height: 5rem;
 }
@@ -699,6 +719,10 @@ video {
   width: 12rem;
 }
 
+.w-5 {
+  width: 1.25rem;
+}
+
 .w-6 {
   width: 1.5rem;
 }
@@ -749,6 +773,10 @@ video {
   grid-template-columns: repeat(2, minmax(0, 1fr));
 }
 
+.flex-col {
+  flex-direction: column;
+}
+
 .flex-wrap {
   flex-wrap: wrap;
 }
@@ -761,6 +789,10 @@ video {
   align-items: center;
 }
 
+.justify-center {
+  justify-content: center;
+}
+
 .justify-between {
   justify-content: space-between;
 }
@@ -799,12 +831,22 @@ video {
   row-gap: 0.5rem;
 }
 
+.space-y-1 > :not([hidden]) ~ :not([hidden]) {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.25rem * var(--tw-space-y-reverse));
+}
+
 .space-y-2 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }
 
+.overflow-auto {
+  overflow: auto;
+}
+
 .overflow-y-auto {
   overflow-y: auto;
 }
@@ -825,6 +867,10 @@ video {
   border-radius: 9999px;
 }
 
+.rounded-lg {
+  border-radius: 0.5rem;
+}
+
 .rounded-t {
   border-top-left-radius: 0.25rem;
   border-top-right-radius: 0.25rem;
@@ -856,6 +902,15 @@ video {
   border-color: rgb(209 213 219 / var(--tw-border-opacity, 1));
 }
 
+.bg-amber-50 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 251 235 / var(--tw-bg-opacity, 1));
+}
+
+.bg-black\/50 {
+  background-color: rgb(0 0 0 / 0.5);
+}
+
 .bg-blue-600 {
   --tw-bg-opacity: 1;
   background-color: rgb(37 99 235 / var(--tw-bg-opacity, 1));
@@ -891,6 +946,16 @@ video {
   background-color: rgb(250 250 250 / var(--tw-bg-opacity, 1));
 }
 
+.bg-red-100 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1));
+}
+
+.bg-slate-600 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));
+}
+
 .bg-transparent {
   background-color: transparent;
 }
@@ -908,6 +973,10 @@ video {
   padding: 0.75rem;
 }
 
+.p-4 {
+  padding: 1rem;
+}
+
 .px-1 {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
@@ -981,10 +1050,18 @@ video {
   padding-top: 0.5rem;
 }
 
+.pt-3 {
+  padding-top: 0.75rem;
+}
+
 .text-center {
   text-align: center;
 }
 
+.text-right {
+  text-align: right;
+}
+
 .font-mono {
   font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
 }
@@ -1024,6 +1101,11 @@ video {
   line-height: 1.625;
 }
 
+.text-amber-600 {
+  --tw-text-opacity: 1;
+  color: rgb(217 119 6 / var(--tw-text-opacity, 1));
+}
+
 .text-blue-600 {
   --tw-text-opacity: 1;
   color: rgb(37 99 235 / var(--tw-text-opacity, 1));
@@ -1079,6 +1161,16 @@ video {
   color: rgb(239 68 68 / var(--tw-text-opacity, 1));
 }
 
+.text-red-600 {
+  --tw-text-opacity: 1;
+  color: rgb(220 38 38 / var(--tw-text-opacity, 1));
+}
+
+.text-red-700 {
+  --tw-text-opacity: 1;
+  color: rgb(185 28 28 / var(--tw-text-opacity, 1));
+}
+
 .text-white {
   --tw-text-opacity: 1;
   color: rgb(255 255 255 / var(--tw-text-opacity, 1));
@@ -1098,6 +1190,10 @@ video {
   text-decoration-line: underline;
 }
 
+.opacity-50 {
+  opacity: 0.5;
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -1142,6 +1238,16 @@ video {
   background-color: rgb(55 65 81 / var(--tw-bg-opacity, 1));
 }
 
+.hover\:bg-red-200:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1));
+}
+
+.hover\:bg-slate-700:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
+}
+
 .hover\:text-gray-600:hover {
   --tw-text-opacity: 1;
   color: rgb(75 85 99 / var(--tw-text-opacity, 1));
@@ -1183,11 +1289,19 @@ video {
   border-color: rgb(51 65 85 / var(--tw-border-opacity, 1));
 }
 
+.dark\:bg-amber-900\/30:is(.dark *) {
+  background-color: rgb(120 53 15 / 0.3);
+}
+
 .dark\:bg-blue-500:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(59 130 246 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:bg-red-900\/30:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.3);
+}
+
 .dark\:bg-slate-700:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1));
@@ -1203,6 +1317,11 @@ video {
   background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1));
 }
 
+.dark\:text-amber-400:is(.dark *) {
+  --tw-text-opacity: 1;
+  color: rgb(251 191 36 / var(--tw-text-opacity, 1));
+}
+
 .dark\:text-blue-400:is(.dark *) {
   --tw-text-opacity: 1;
   color: rgb(96 165 250 / var(--tw-text-opacity, 1));
@@ -1258,6 +1377,10 @@ video {
   filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
+.dark\:hover\:bg-red-900\/50:hover:is(.dark *) {
+  background-color: rgb(127 29 29 / 0.5);
+}
+
 .dark\:hover\:bg-slate-600:hover:is(.dark *) {
   --tw-bg-opacity: 1;
   background-color: rgb(71 85 105 / var(--tw-bg-opacity, 1));