big restructure

web/js/components/app-contrast-toggle.js

@@ -0,0 +1,41 @@
+import { requireEl } from '../core/app-dom.js';
+
+const STORAGE_KEY = 'app-contrast';
+
+const setContrast = (contrast) => {
+  const root = document.documentElement;
+  root.dataset.contrast = contrast === 'high' ? 'high' : 'normal';
+};
+
+const setIcon = (button, contrast) => {
+  const icon = button.querySelector('i');
+  if (!icon) return;
+  icon.classList.remove('bi-circle-half', 'bi-highlights');
+  icon.classList.add(contrast === 'high' ? 'bi-highlights' : 'bi-circle-half');
+};
+
+const initContrastToggle = () => {
+  const button = requireEl('[data-contrast-toggle]', { module: 'contrast-toggle' });
+  if (!button) return;
+  const root = document.documentElement;
+  const getCurrent = () => (root.dataset.contrast === 'high' ? 'high' : 'normal');
+  setIcon(button, getCurrent());
+
+  button.addEventListener('click', () => {
+    const current = getCurrent();
+    const next = current === 'high' ? 'normal' : 'high';
+    setContrast(next);
+    setIcon(button, next);
+    try {
+      window.localStorage.setItem(STORAGE_KEY, next);
+    } catch (e) {
+      // ignore storage errors
+    }
+  });
+};
+
+if (document.readyState === 'loading') {
+  document.addEventListener('DOMContentLoaded', initContrastToggle);
+} else {
+  initContrastToggle();
+}