theme selecter moved

frontend/static/theme.js

@@ -11,18 +11,39 @@ async function loadAvailableThemes() {
     ? localStorage.getItem(themePreference)
     : themes[0]?.id;
   if (selected) document.documentElement.dataset.theme = selected;
-  const headerActions = document.querySelector('.header-actions');
-  if (!headerActions || !themes.length) return;
-  const picker = document.createElement('select');
-  picker.className = 'theme-picker';
-  picker.setAttribute('aria-label', 'Theme');
-  picker.replaceChildren(...themes.map((theme) => new Option(theme.label, theme.id)));
-  picker.value = selected || themes[0].id;
-  picker.addEventListener('change', () => {
-    localStorage.setItem(themePreference, picker.value);
-    document.documentElement.dataset.theme = picker.value;
+  
+  const submenuContainer = document.querySelector('#theme-submenu-container');
+  const themeOptions = document.querySelector('#theme-options');
+  const submenuTitle = document.querySelector('.submenu-title');
+  
+  if (!submenuContainer || !themeOptions || !themes.length) return;
+  
+  // Show the submenu container
+  submenuContainer.classList.remove('hidden');
+  
+  // Create theme buttons
+  const buttons = themes.map((theme) => {
+    const button = document.createElement('button');
+    button.type = 'button';
+    button.className = 'theme-option';
+    button.dataset.themeId = theme.id;
+    button.textContent = theme.label;
+    if (theme.id === selected) {
+      button.classList.add('active');
+    }
+    button.addEventListener('click', () => {
+      localStorage.setItem(themePreference, theme.id);
+      document.documentElement.dataset.theme = theme.id;
+      // Update active state
+      document.querySelectorAll('.theme-option').forEach((btn) => {
+        btn.classList.remove('active');
+      });
+      button.classList.add('active');
+    });
+    return button;
   });
-  headerActions.prepend(picker);
+  
+  themeOptions.replaceChildren(...buttons);
 }
 
 loadAvailableThemes();