From 0afdf60d38d34c12f429f7cc514db09f62803446 Mon Sep 17 00:00:00 2001
From: dadaloop82 <evershelfproject@gmail.com>
Date: Sat, 16 May 2026 12:58:10 +0000
Subject: [PATCH] fix(kiosk): settings gear lost when Kotlin pre-injects
 #_kiosk_overlay before JS runs

---
 assets/js/app.js | 21 ++++++++++++++++++---
 1 file changed, 18 insertions(+), 3 deletions(-)

diff --git a/assets/js/app.js b/assets/js/app.js
index 0f4f7ce..0edbd08 100644
--- a/assets/js/app.js
+++ b/assets/js/app.js
@@ -2466,7 +2466,24 @@ function _injectKioskOverlay() {
     const appHeader = document.querySelector('.app-header');
     if (appHeader) appHeader.classList.add('kiosk-mode');
 
-    if (document.getElementById('_kiosk_overlay')) return;
+    const btnStyle = 'background:rgba(255,255,255,0.2);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;';
+
+    // If the Kotlin onPageFinished already injected #_kiosk_overlay (with only ✕ and ↻),
+    // just append the missing ⚙️ settings button to it and hide the native Android gear.
+    const existing = document.getElementById('_kiosk_overlay');
+    if (existing) {
+        if (!document.getElementById('_kiosk_settings_btn')) {
+            const settBtn = document.createElement('button');
+            settBtn.id = '_kiosk_settings_btn';
+            settBtn.textContent = '\u2699\uFE0F';
+            settBtn.title = t('settings.title') || 'Settings';
+            settBtn.style.cssText = btnStyle.replace('font-size:15px', 'font-size:16px');
+            settBtn.addEventListener('click', (e) => { e.stopPropagation(); showPage('settings'); });
+            existing.appendChild(settBtn);
+        }
+        try { _kioskBridge.setNativeSettingsVisible(false); } catch(_) {}
+        return;
+    }
 
     const headerLeft = document.getElementById('header-left');
     if (!headerLeft) return;
@@ -2475,8 +2492,6 @@ function _injectKioskOverlay() {
     wrap.id = '_kiosk_overlay';
     wrap.style.cssText = 'display:flex;gap:6px;align-items:center;';
 
-    const btnStyle = 'background:rgba(255,255,255,0.2);border:none;color:#fff;width:34px;height:34px;border-radius:50%;font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;touch-action:manipulation;';
-
     // Exit button
     const exitBtn = document.createElement('button');
     exitBtn.id = '_kiosk_exit_btn';