StartPage/startpage/js/modules/SettingsManager.js

export class SettingsManager {
    constructor() {
        this.themeManager = new ThemeManager();
        this.layoutManager = new LayoutManager();
        this.fontManager = new FontManager();
        this.settingsButton = document.querySelector('.settings-button');
        this.init();
    }

    init() {
        this.attachEventListeners();
        this.loadSavedSettings();
    }

    attachEventListeners() {
        const settingsPopup = document.getElementById('settingsPopup');
        const closeSettings = document.querySelector('.close-settings');

        this.settingsButton.addEventListener('click', () => {
            settingsPopup.classList.add('show');
            this.settingsButton.classList.add('disabled');
        });

        const closeSettingsHandler = () => {
            settingsPopup.classList.remove('show');
            this.settingsButton.classList.remove('disabled');
        };

        closeSettings.addEventListener('click', closeSettingsHandler);

        settingsPopup.addEventListener('click', (e) => {
            if (e.target === settingsPopup) {
                closeSettingsHandler();
            }
        });

        // Add escape key handler
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Escape' && settingsPopup.classList.contains('show')) {
                closeSettingsHandler();
            }
        });
    }

    loadSavedSettings() {
        // Load CSS
        const customCSSEditor = document.getElementById('customCSS');
        customCSSEditor.value = localStorage.getItem('customCSS') || '';
        this.applyCustomCSS();

        // Load theme
        const savedTheme = localStorage.getItem('theme') || 'mocha';
        this.themeManager.setTheme(savedTheme);

        // Load layout
        const savedLayout = localStorage.getItem('layout') || 'grid';
        this.layoutManager.setLayout(savedLayout);

        // Load font
        const savedFont = localStorage.getItem('font');
        if (savedFont) {
            this.fontManager.setFont(savedFont);
        }
    }

    applyCustomCSS() {
        const customCSSEditor = document.getElementById('customCSS');
        let customStyle = document.getElementById('custom-css') || document.createElement('style');
        customStyle.id = 'custom-css';
        customStyle.textContent = customCSSEditor.value;
        document.head.appendChild(customStyle);
    }
}

class ThemeManager {
    constructor() {
        this.themeSelect = document.getElementById('themeSelect');
        this.init();
    }

    init() {
        this.themeSelect.addEventListener('change', (e) => {
            this.setTheme(e.target.value);
        });
    }

    setTheme(theme) {
        const root = document.documentElement;
        root.style.setProperty('--base', `var(--${theme}-base)`);
        root.style.setProperty('--base-rgb', `var(--${theme}-base-rgb)`);
        root.style.setProperty('--surface0', `var(--${theme}-surface0)`);
        root.style.setProperty('--surface1', `var(--${theme}-surface1)`);
        root.style.setProperty('--text', `var(--${theme}-text)`);
        root.style.setProperty('--blue', `var(--${theme}-blue)`);
        root.style.setProperty('--pink', `var(--${theme}-pink)`);
        localStorage.setItem('theme', theme);
        this.themeSelect.value = theme;
    }
}

class LayoutManager {
    constructor() {
        this.layoutSelect = document.getElementById('layoutSelect');
        this.init();
    }

    init() {
        this.layoutSelect.addEventListener('change', (e) => {
            this.setLayout(e.target.value);
        });
    }

    setLayout(layout) {
        document.body.setAttribute('data-layout', layout);
        localStorage.setItem('layout', layout);
        this.layoutSelect.value = layout;
    }
}

class FontManager {
    constructor() {
        this.fontSelect = document.getElementById('fontSelect');
        this.init();
    }

    init() {
        this.fontSelect.addEventListener('change', (e) => {
            this.setFont(e.target.value);
        });
    }

    setFont(font) {
        document.documentElement.style.setProperty('--font-family', font);
        if (font === 'MapleMono') {
            document.documentElement.style.setProperty('--font-mono', 'MapleMono');
        }
        localStorage.setItem('font', font);
        this.fontSelect.value = font;
    }
}