big restructure

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

@@ -1,19 +1,21 @@
+import { optionalEl, warnOnce } from '../core/app-dom.js';
+
 const setTheme = (theme) => {
-  const root = document.documentElement;
-  root.dataset.theme = theme;
+  document.documentElement.dataset.theme = theme;
 };
 
-const setIcon = (button, theme) => {
-  const icon = button.querySelector('i');
-  if (!icon) return;
-  icon.classList.remove('bi-sun-fill', 'bi-moon-stars-fill');
-  icon.classList.add(theme === 'dark' ? 'bi-moon-stars-fill' : 'bi-sun-fill');
+const isDarkTheme = (theme) => theme && theme.startsWith('dark');
+
+const setIcon = (iconEl, theme) => {
+  if (!iconEl) return;
+  iconEl.classList.remove('bi-sun-fill', 'bi-moon-stars-fill');
+  iconEl.classList.add(isDarkTheme(theme) ? 'bi-moon-stars-fill' : 'bi-sun-fill');
 };
 
-const updateTheme = async (button, theme) => {
-  const url = button.dataset.themeUrl;
-  const csrfKey = button.dataset.csrfKey;
-  const csrfToken = button.dataset.csrfToken;
+const updateTheme = async (menu, theme) => {
+  const url = menu.dataset.themeUrl;
+  const csrfKey = menu.dataset.csrfKey;
+  const csrfToken = menu.dataset.csrfToken;
   if (!url || !csrfKey || !csrfToken) {
     return true;
   }
@@ -30,28 +32,78 @@ const updateTheme = async (button, theme) => {
   return response.ok;
 };
 
+const initThemeMenu = () => {
+  const menu = optionalEl('[data-theme-menu]');
+  if (!menu) return;
+  const icon = menu.querySelector('[data-theme-icon]');
+  const options = Array.from(menu.querySelectorAll('[data-theme-option]'));
+  if (!options.length) {
+    warnOnce('UI_EL_MISSING', 'Missing theme options', { module: 'theme-toggle' });
+    return;
+  }
+
+  const getCurrent = () => document.documentElement.dataset.theme || '';
+  const setActive = (theme) => {
+    options.forEach((option) => {
+      const isActive = option.dataset.themeValue === theme;
+      option.classList.toggle('active', isActive);
+      if (isActive) {
+        option.setAttribute('aria-current', 'true');
+      } else {
+        option.removeAttribute('aria-current');
+      }
+    });
+  };
+
+  setIcon(icon, getCurrent());
+  setActive(getCurrent());
+
+  options.forEach((option) => {
+    option.addEventListener('click', async (event) => {
+      event.preventDefault();
+      const next = option.dataset.themeValue || '';
+      if (!next) return;
+      const current = getCurrent();
+      if (next === current) return;
+      setTheme(next);
+      setIcon(icon, next);
+      setActive(next);
+      const ok = await updateTheme(menu, next);
+      if (!ok) {
+        setTheme(current);
+        setIcon(icon, current);
+        setActive(current);
+      }
+    });
+  });
+};
+
 const initThemeToggle = () => {
-  const button = document.querySelector('[data-theme-toggle]');
+  const button = optionalEl('[data-theme-toggle]');
   if (!button) return;
-  const root = document.documentElement;
-  const getCurrent = () => (root.dataset.theme === 'dark' ? 'dark' : 'light');
-  setIcon(button, getCurrent());
+  const icon = button.querySelector('i');
+  const getCurrent = () => document.documentElement.dataset.theme || '';
+  setIcon(icon, getCurrent());
 
   button.addEventListener('click', async () => {
     const current = getCurrent();
-    const next = current === 'dark' ? 'light' : 'dark';
+    const next = isDarkTheme(current) ? 'light' : 'dark';
     setTheme(next);
-    setIcon(button, next);
+    setIcon(icon, next);
     const ok = await updateTheme(button, next);
     if (!ok) {
       setTheme(current);
-      setIcon(button, current);
+      setIcon(icon, current);
     }
   });
 };
 
 if (document.readyState === 'loading') {
-  document.addEventListener('DOMContentLoaded', initThemeToggle);
+  document.addEventListener('DOMContentLoaded', () => {
+    initThemeMenu();
+    initThemeToggle();
+  });
 } else {
+  initThemeMenu();
   initThemeToggle();
 }