visionA/local-tool/visiona-local/frontend/settings-panel.js

// settings-panel.js — Settings modal (Auto-open browser / Language / About)
import { t, getLocale } from './i18n.js';

let ctx = null;

export function initSettingsPanel(context) {
    ctx = context;
    const backdrop = document.getElementById('settings-modal');
    const closeBtn = document.getElementById('btn-close-settings');
    closeBtn.addEventListener('click', closeSettings);
    backdrop.addEventListener('click', (e) => {
        if (e.target === backdrop) closeSettings();
    });

    // Auto-open browser toggle
    const autoOpenCb = document.getElementById('pref-auto-open');
    autoOpenCb.addEventListener('change', async () => {
        try {
            const newPrefs = {
                ...(ctx.prefs || {}),
                autoOpenBrowser: autoOpenCb.checked,
            };
            await ctx.setPreferences(newPrefs);
            ctx.prefs = newPrefs;
        } catch (e) {
            console.error('SetPreferences failed:', e);
            // revert
            autoOpenCb.checked = !autoOpenCb.checked;
        }
    });

    // Locale
    const localeSel = document.getElementById('pref-locale');
    localeSel.addEventListener('change', async () => {
        const val = localeSel.value;
        try {
            const newPrefs = {
                ...(ctx.prefs || {}),
                locale: val,
            };
            await ctx.setPreferences(newPrefs);
            ctx.prefs = newPrefs;
            if (ctx.onLocaleChange) ctx.onLocaleChange(val);
            paintAboutList();
        } catch (e) {
            console.error('SetPreferences locale failed:', e);
        }
    });

    // ESC 關
    document.addEventListener('keydown', (e) => {
        if (e.key === 'Escape' && !backdrop.hasAttribute('hidden')) {
            closeSettings();
        }
    });
}

export function openSettings() {
    if (!ctx) return;
    const backdrop = document.getElementById('settings-modal');
    const autoOpenCb = document.getElementById('pref-auto-open');
    const localeSel = document.getElementById('pref-locale');
    const hintEl = document.getElementById('auto-open-hint');

    // 同步 prefs 到 UI
    const prefs = ctx.prefs || {};
    autoOpenCb.checked = !!prefs.autoOpenBrowser;
    localeSel.value = prefs.locale || '';

    // Linux 提示
    const plat = (ctx.sysInfo && ctx.sysInfo.platform) || '';
    if (plat.startsWith('linux')) {
        hintEl.textContent = t('settings.autoOpenBrowser.hintLinux');
    } else {
        hintEl.textContent = '';
    }

    paintAboutList();

    // 標題 i18n
    document.getElementById('settings-title').textContent = t('settings.title');

    backdrop.removeAttribute('hidden');
}

function closeSettings() {
    const backdrop = document.getElementById('settings-modal');
    if (backdrop) backdrop.setAttribute('hidden', '');
}

function paintAboutList() {
    const about = document.getElementById('about-list');
    if (!about || !ctx || !ctx.sysInfo) return;
    const s = ctx.sysInfo;
    about.innerHTML = '';
    const rows = [
        [t('control.meta.version'), s.appVersion || '—'],
        ['Build', s.buildTime || '—'],
        ['Platform', s.platform || '—'],
        ['Data dir', s.dataDir || '—'],
        ['Logs dir', s.logsDir || '—'],
    ];
    for (const [k, v] of rows) {
        const dt = document.createElement('dt');
        dt.textContent = k;
        const dd = document.createElement('dd');
        dd.textContent = v;
        about.appendChild(dt);
        about.appendChild(dd);
    }
}