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

// ── Settings Page ──

const SETTINGS_KEY = 'settings';

const SETTINGS_DEFAULTS = {
  pageWidth: 900,
  toolCallDisplay: 'modifications', // 'all' | 'modifications' | 'hidden'
  chainMetaDisplay: 'sometimes'     // 'always' | 'sometimes' | 'never'
};

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 toolCallSelect = document.getElementById('settingToolCallDisplay');
    const chainMetaSelect = document.getElementById('settingChainMetaDisplay');
    const resetBtn = document.getElementById('settingsResetBtn');

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

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

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

    toolCallSelect.addEventListener('change', () => {
      const s = loadSettings();
      s.toolCallDisplay = toolCallSelect.value;
      saveSettings(s);
    });

    chainMetaSelect.addEventListener('change', () => {
      const s = loadSettings();
      s.chainMetaDisplay = chainMetaSelect.value;
      saveSettings(s);
    });

    const backupBtn = document.getElementById('settingsBackupBtn');
    if (backupBtn) backupBtn.addEventListener('click', async () => {
      backupBtn.disabled = true;
      backupBtn.textContent = 'Wird erstellt...';
      try {
        await apiBackupDb();
      } catch (e) {
        console.error('Backup fehlgeschlagen:', e);
      } finally {
        backupBtn.textContent = 'Jetzt sichern';
        backupBtn.disabled = false;
      }
    });

    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';
      toolCallSelect.value = SETTINGS_DEFAULTS.toolCallDisplay;
      chainMetaSelect.value = SETTINGS_DEFAULTS.chainMetaDisplay;
    });
  },
  destroy() {}
});