From 6d7e68ada17a655ef417097c71c32baec08b095a Mon Sep 17 00:00:00 2001
From: ashisgreat22 <dev@ashisgreat.xyz>
Date: Sun, 22 Mar 2026 14:00:53 +0100
Subject: [PATCH] feat(frontend): reduce popover to theme+engines, add
 preferences page JS

---
 internal/views/static/js/settings.js | 104 ++++++++++++++++-----------
 1 file changed, 64 insertions(+), 40 deletions(-)

diff --git a/internal/views/static/js/settings.js b/internal/views/static/js/settings.js
index 762fbcb..9682e6a 100644
--- a/internal/views/static/js/settings.js
+++ b/internal/views/static/js/settings.js
@@ -103,28 +103,7 @@ function renderPanel(prefs) {
     engineToggles += '<label class="engine-toggle"><input type="checkbox" value="' + escapeHtml(name) + '"' + checked + '><span>' + escapeHtml(name) + '</span></label>';
   });
 
-  var ssOptions = [
-    { val: 'moderate', label: 'Moderate' },
-    { val: 'strict',   label: 'Strict' },
-    { val: 'off',      label: 'Off' }
-  ];
-  var fmtOptions = [
-    { val: 'html', label: 'HTML' },
-    { val: 'json', label: 'JSON' },
-    { val: 'csv',  label: 'CSV' },
-    { val: 'rss',  label: 'RSS' }
-  ];
-  var ssOptionsHtml = '';
-  var fmtOptionsHtml = '';
-  ssOptions.forEach(function(o) {
-    var sel = prefs.safeSearch === o.val ? ' selected' : '';
-    ssOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
-  });
-  fmtOptions.forEach(function(o) {
-    var sel = prefs.format === o.val ? ' selected' : '';
-    fmtOptionsHtml += '<option value="' + o.val + '"' + sel + '>' + o.label + '</option>';
-  });
-
+  
   body.innerHTML =
     '<div class="settings-section">' +
       '<div class="settings-section-title">Appearance</div>' +
@@ -175,24 +154,6 @@ function renderPanel(prefs) {
     })(checkboxes[j]));
   }
 
-  // Safe search
-  var ssEl = panel.querySelector('#pref-safesearch');
-  if (ssEl) {
-    ssEl.addEventListener('change', function() {
-      prefs.safeSearch = ssEl.value;
-      savePrefs(prefs);
-    });
-  }
-
-  // Format
-  var fmtEl = panel.querySelector('#pref-format');
-  if (fmtEl) {
-    fmtEl.addEventListener('change', function() {
-      prefs.format = fmtEl.value;
-      savePrefs(prefs);
-    });
-  }
-
   // Close button
   var closeBtn = panel.querySelector('.settings-popover-close');
   if (closeBtn) closeBtn.addEventListener('click', closePanel);
@@ -269,3 +230,66 @@ if (document.readyState === 'loading') {
 } else {
   initSettings();
 }
+
+// Preferences page navigation
+function initPreferences() {
+  var nav = document.getElementById('preferences-nav');
+  if (!nav) return;
+
+  var sections = document.querySelectorAll('.pref-section');
+  var navItems = nav.querySelectorAll('.preferences-nav-item');
+
+  function showSection(id) {
+    sections.forEach(function(sec) {
+      sec.style.display = sec.id === 'section-' + id ? 'block' : 'none';
+    });
+    navItems.forEach(function(item) {
+      item.classList.toggle('active', item.getAttribute('data-section') === id);
+    });
+  }
+
+  navItems.forEach(function(item) {
+    item.addEventListener('click', function() {
+      showSection(item.getAttribute('data-section'));
+    });
+  });
+
+  // Load saved preferences
+  var prefs = loadPrefs();
+
+  // Theme
+  var themeEl = document.getElementById('pref-theme');
+  if (themeEl) {
+    themeEl.value = prefs.theme || 'system';
+    themeEl.addEventListener('change', function() {
+      prefs.theme = themeEl.value;
+      savePrefs(prefs);
+      applyTheme(prefs.theme);
+    });
+  }
+
+  // Safe search
+  var ssEl = document.getElementById('pref-safesearch');
+  if (ssEl) {
+    ssEl.value = prefs.safeSearch || 'moderate';
+    ssEl.addEventListener('change', function() {
+      prefs.safeSearch = ssEl.value;
+      savePrefs(prefs);
+    });
+  }
+
+  // Format (if exists on page)
+  var fmtEl = document.getElementById('pref-format');
+  if (fmtEl) {
+    fmtEl.value = prefs.format || 'html';
+    fmtEl.addEventListener('change', function() {
+      prefs.format = fmtEl.value;
+      savePrefs(prefs);
+    });
+  }
+
+  // Show first section by default
+  showSection('search');
+}
+
+document.addEventListener('DOMContentLoaded', initPreferences);