LibrePortal/containers/libreportal/frontend/js/utils/lp-ui.js

// window.LpUi — global UI-mode flags shared across the WebUI.
//
// Two orthogonal axes:
//   advanced  — show extra-technical detail (mounts, limits, internals,
//               raw IDs, advanced config fields). Off by default
//               ("Beginner"); user can flip on from any surface that
//               exposes the Advanced toggle.
//   dev       — show developer-only fields and surfaces (the **DEV**
//               config fields, Installation Mode picker, etc.). Locked
//               behind the 10-tap unlock easter egg (LibrePortal logo
//               OR the Advanced toggle). Auto-enables when on a git/
//               local install (the existing topbar autodetect path).
//
// Linking rule: dev IMPLIES advanced.
//   - Enabling dev auto-enables advanced (you can't see dev fields if
//     the advanced layer is hidden).
//   - Disabling advanced auto-disables dev (dev-without-advanced is
//     an incoherent state — clean it up).
//
// Wire shape:
//   localStorage keys  lp.ui.advanced ('0' | '1')
//                      lp.ui.dev      ('0' | '1')  — UI-side mirror of CFG_DEV_MODE
//   body classes       lp-ui--advanced
//                      lp-ui--dev
//   events             window 'lp-ui-advanced-changed' { advanced }
//                      window 'lp-ui-dev-changed'      { dev }
//
// Loaded eagerly (NOT lazy) via a <script> tag in index.html so the body
// class is applied before any page renders — no flash of unhidden content
// on a fresh load. Components that want to react to the flag should
// listen for the change events rather than poll.

(function setupLpUi() {
    if (window.LpUi && window.LpUi.advanced && window.LpUi.dev) return;

    const ADV_KEY = 'lp.ui.advanced';
    const DEV_KEY = 'lp.ui.dev';
    const SEED_KEY = 'lp.ui.seeded';   // marks that we've consulted CFG_INSTALL_LEVEL once

    function safeGet(k) {
        try { return localStorage.getItem(k); } catch { return null; }
    }
    function safeSet(k, v) {
        try { localStorage.setItem(k, v); } catch { /* private mode */ }
    }

    function applyBodyClasses() {
        if (!document.body) return;
        document.body.classList.toggle('lp-ui--advanced', advanced.get());
        document.body.classList.toggle('lp-ui--dev',      dev.get());
    }

    const advanced = {
        get() { return safeGet(ADV_KEY) === '1'; },
        set(on) {
            const v = !!on;
            const before = this.get();
            if (v === before) return;
            safeSet(ADV_KEY, v ? '1' : '0');
            document.body && document.body.classList.toggle('lp-ui--advanced', v);
            // Dev implies advanced — turning advanced off also clears dev.
            if (!v && dev.get()) dev.set(false);
            window.dispatchEvent(new CustomEvent('lp-ui-advanced-changed', { detail: { advanced: v } }));
        },
        apply() { document.body && document.body.classList.toggle('lp-ui--advanced', this.get()); },
    };

    const dev = {
        get() { return safeGet(DEV_KEY) === '1'; },
        set(on) {
            const v = !!on;
            const before = this.get();
            if (v === before) return;
            safeSet(DEV_KEY, v ? '1' : '0');
            document.body && document.body.classList.toggle('lp-ui--dev', v);
            // Dev implies advanced — turning dev on lifts advanced too.
            if (v && !advanced.get()) advanced.set(true);
            window.dispatchEvent(new CustomEvent('lp-ui-dev-changed', { detail: { dev: v } }));
        },
        apply() { document.body && document.body.classList.toggle('lp-ui--dev', this.get()); },
    };

    // Seed lp.ui.advanced from CFG_INSTALL_LEVEL the first time we run.
    // After that, the local flip is authoritative — we don't want the
    // user's choice in the WebUI overridden every reload by the install-
    // time default.
    async function seedFromConfigIfNeeded() {
        if (safeGet(SEED_KEY) === '1') return;
        try {
            const r = await fetch(`/data/config/generated/configs.json?t=${Date.now()}`);
            if (!r.ok) { safeSet(SEED_KEY, '1'); return; }
            const data = await r.json();
            const level = (data?.config?.CFG_INSTALL_LEVEL?.value || 'beginner').toLowerCase();
            const wantAdvanced = (level === 'advanced');
            // Only seed if the user hasn't already set a value.
            if (safeGet(ADV_KEY) === null) {
                safeSet(ADV_KEY, wantAdvanced ? '1' : '0');
            }
            // Mirror CFG_DEV_MODE into the body class on first load so dev
            // gating works before the topbar autodetect runs. The topbar
            // still owns toggling CFG_DEV_MODE itself; we just read it.
            const devOn = (data?.config?.CFG_DEV_MODE?.value === 'true' || data?.config?.CFG_DEV_MODE?.value === true);
            safeSet(DEV_KEY, devOn ? '1' : '0');
            safeSet(SEED_KEY, '1');
            applyBodyClasses();
        } catch {
            safeSet(SEED_KEY, '1');
        }
    }

    window.LpUi = { advanced, dev };

    // Apply ASAP — once body exists drop the classes in. If the script
    // loads before body, defer; otherwise do it immediately.
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', () => {
            applyBodyClasses();
            seedFromConfigIfNeeded();
        }, { once: true });
    } else {
        applyBodyClasses();
        seedFromConfigIfNeeded();
    }
})();