buggy init :3

startpage/js/modules/SettingsManager.js

@@ -0,0 +1,140 @@
+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;
+    }
+}