gott/wwwroot/js/pages/settings-page.js

// ── Settings Page ──

const SETTINGS_KEY = 'settings';

const SETTINGS_DEFAULTS = {
  pageWidth: 900
};

function loadSettings() {
  try {
    const raw = localStorage.getItem(SETTINGS_KEY);
    if (raw) return Object.assign({}, SETTINGS_DEFAULTS, JSON.parse(raw));
  } catch (_) {}
  return Object.assign({}, SETTINGS_DEFAULTS);
}

function saveSettings(settings) {
  localStorage.setItem(SETTINGS_KEY, JSON.stringify(settings));
}

function resetSettings() {
  localStorage.removeItem(SETTINGS_KEY);
}

function applySettings() {
  const s = loadSettings();
  document.documentElement.style.setProperty('--page-width', s.pageWidth + 'px');
}

// Apply on load
applySettings();

registerPage('settings', {
  init() {
    const slider = document.getElementById('settingPageWidth');
    const display = document.getElementById('settingPageWidthValue');
    const resetBtn = document.getElementById('settingsResetBtn');

    const s = loadSettings();
    slider.value = s.pageWidth;
    display.textContent = s.pageWidth + 'px';

    slider.addEventListener('input', () => {
      display.textContent = slider.value + 'px';
    });

    slider.addEventListener('change', () => {
      const s = loadSettings();
      s.pageWidth = parseInt(slider.value, 10);
      saveSettings(s);
      applySettings();
    });

    resetBtn.addEventListener('click', () => {
      if (!confirm('Alle Einstellungen auf Standard zurücksetzen?')) return;
      resetSettings();
      applySettings();
      // Update UI
      slider.value = SETTINGS_DEFAULTS.pageWidth;
      display.textContent = SETTINGS_DEFAULTS.pageWidth + 'px';
    });
  },
  destroy() {}
});