Back/forward buttons: adjustable opacity; Upgrade refreshes the Web UI copy

New historyButtonsOpacity setting (10-100 percent, default 50) in the
terminal menu (Display & Interaction) and the Web UI. Upgrade now also
copies the Web UI app to /opt/kiosk-webui and restarts it, so new Web UI
settings appear after an upgrade (it previously kept its old copy).

Co-Authored-By: Claude Sonnet 5.5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_013wi3ZQveYdjfcrEsyazq32

webui/lib/config.js

@@ -41,6 +41,7 @@ const SCALAR_DEFAULTS = {
     enableKeyboardButton: true,
     enableNavButton: true,
     enableHistoryButtons: false,
+    historyButtonsOpacity: 50,
     enablePasswordProtection: false,
     lockoutTimeout: 0,
     lockoutAtTime: '',

webui/public/app.js

@@ -174,6 +174,7 @@ displayForm.addEventListener('submit', async (e) => {
         enableKeyboardButton: fd.get('enableKeyboardButton') === 'on',
         enableNavButton: fd.get('enableNavButton') === 'on',
         enableHistoryButtons: fd.get('enableHistoryButtons') === 'on',
+        historyButtonsOpacity: parseInt(fd.get('historyButtonsOpacity'), 10),
         homeTabIndex: parseInt(fd.get('homeTabIndex'), 10),
         inactivityTimeoutMinutes: parseInt(fd.get('inactivityTimeoutMinutes'), 10),
     };
@@ -284,6 +285,7 @@ function populateAll(config) {
     displayForm.elements.enableKeyboardButton.checked = !!config.enableKeyboardButton;
     displayForm.elements.enableNavButton.checked = !!config.enableNavButton;
     displayForm.elements.enableHistoryButtons.checked = !!config.enableHistoryButtons;
+    displayForm.elements.historyButtonsOpacity.value = config.historyButtonsOpacity;
     updateHomeTabOptions(config.tabs);
     homeTabSelect.value = String(config.homeTabIndex);
     displayForm.elements.inactivityTimeoutMinutes.value = Math.round(config.inactivityTimeout / 60);

webui/public/index.html

@@ -105,6 +105,10 @@
                 <option value="-1">Disabled</option>
               </select>
             </label>
+            <label>
+              Back/forward button opacity (10 = faint, 100 = solid)
+              <input type="number" name="historyButtonsOpacity" min="10" max="100" step="5">
+            </label>
             <label>
               Inactivity timeout (minutes)
               <input type="number" name="inactivityTimeoutMinutes" min="1" max="240" step="1">

webui/server.js

@@ -71,6 +71,11 @@ app.put('/api/config', (req, res) => {
     if (body.enableKeyboardButton !== undefined) patch.enableKeyboardButton = !!body.enableKeyboardButton;
     if (body.enableNavButton !== undefined) patch.enableNavButton = !!body.enableNavButton;
     if (body.enableHistoryButtons !== undefined) patch.enableHistoryButtons = !!body.enableHistoryButtons;
+    if (body.historyButtonsOpacity !== undefined) {
+        const pct = Number(body.historyButtonsOpacity);
+        if (!Number.isInteger(pct) || pct < 10 || pct > 100) return badRequest(res, 'Button opacity must be 10-100 percent');
+        patch.historyButtonsOpacity = pct;
+    }
 
     let tabCount;
     if (body.tabs !== undefined) {

webui/test/config.test.js

@@ -81,6 +81,9 @@ check('enableHistoryButtons defaults off and round-trips', () => {
     saveConfig({ enableHistoryButtons: true });
     assert.strictEqual(JSON.parse(fs.readFileSync(process.env.CONFIG_PATH, 'utf8')).enableHistoryButtons, true);
     assert.strictEqual(loadConfig().enableHistoryButtons, true);
+    assert.strictEqual(loadConfig().historyButtonsOpacity, 50);
+    saveConfig({ historyButtonsOpacity: 80 });
+    assert.strictEqual(loadConfig().historyButtonsOpacity, 80);
 });
 
 check('saveConfig tabs: new password gets hashed, never stored/returned as plaintext', () => {