diff --git a/static/js/core/first-run-setup.js b/static/js/core/first-run-setup.js index 9f313b8..ee1b027 100644 --- a/static/js/core/first-run-setup.js +++ b/static/js/core/first-run-setup.js @@ -10,6 +10,7 @@ const FirstRunSetup = (function() { let notifyStatusEl = null; let modeStatusEl = null; let modeSelectEl = null; + let uiTierStatusEl = null; let dependencyReady = null; @@ -168,10 +169,69 @@ const FirstRunSetup = (function() { } ); + const tierStep = createStep( + 'Display Mode', + 'Choose how the interface looks. You can change this later with the toggle in the nav bar.', + (statusEl, actionsEl) => { + uiTierStatusEl = statusEl; + + const btnWrap = document.createElement('div'); + btnWrap.style.cssText = 'display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:4px;'; + + function makeTierBtn(tier, title, desc, previewFn) { + const btn = document.createElement('button'); + btn.type = 'button'; + btn.className = 'setup-btn'; + btn.style.cssText = 'display:flex;flex-direction:column;align-items:flex-start;height:auto;padding:10px;text-align:left;gap:4px;'; + + const preview = document.createElement('div'); + preview.style.cssText = 'width:100%;height:48px;border-radius:3px;margin-bottom:4px;overflow:hidden;'; + previewFn(preview); + + const titleEl = document.createElement('strong'); + titleEl.style.cssText = 'font-size:12px;'; + titleEl.textContent = title; + + const descEl = document.createElement('span'); + descEl.style.cssText = 'font-size:10px;color:var(--text-dim);white-space:normal;line-height:1.3;'; + descEl.textContent = desc; + + btn.appendChild(preview); + btn.appendChild(titleEl); + btn.appendChild(descEl); + + btn.addEventListener('click', () => { + document.documentElement.setAttribute('data-ui-tier', tier); + localStorage.setItem('intercept-ui-tier', tier); + refreshStatuses(); + if (typeof showAppToast === 'function') { + showAppToast('Display Mode Set', `Switched to ${title} mode.`, 'info'); + } + }); + return btn; + } + + const leanBtn = makeTierBtn('lean', 'Lean', 'No effects — for Raspberry Pi or older hardware.', (el) => { + el.style.cssText += 'background:#111;border:1px solid #222;display:flex;flex-direction:column;justify-content:center;padding:6px;gap:3px;'; + el.innerHTML = '