From 9267172e28eaa647b3a70212ee2d854447972d03 Mon Sep 17 00:00:00 2001
From: Timothy Flynn <trflynn89@pm.me>
Date: Sun, 11 May 2025 08:32:04 -0400
Subject: [PATCH] Base: Simplify enabling search and autocomplete

Currently, enabling search is a bit hokey. You have to click a checkbox
to get the search engines to show up, then you have to click a drop down
to select an engine. Let's go with a simpler approach; now you only have
to interact with the drop down.
---
 Base/res/ladybird/about-pages/settings.html   | 28 ++++------
 .../ladybird/about-pages/settings/search.js   | 53 +++++--------------
 2 files changed, 24 insertions(+), 57 deletions(-)

diff --git a/Base/res/ladybird/about-pages/settings.html b/Base/res/ladybird/about-pages/settings.html
index 08a7b880e74..6a03f771c0d 100644
--- a/Base/res/ladybird/about-pages/settings.html
+++ b/Base/res/ladybird/about-pages/settings.html
@@ -329,31 +329,25 @@
         <div class="card">
             <div class="card-header">Search</div>
             <div class="card-body">
-                <div class="card-group inline-container">
-                    <label for="search-toggle">Enable Search</label>
-                    <input id="search-toggle" type="checkbox" switch />
-                </div>
-                <div class="card-group hidden">
-                    <label for="search-engine">Default Search Engine</label>
+                <div class="card-group">
                     <div class="inline-container">
-                        <select id="search-engine">
-                            <option value="">Please select a search engine</option>
-                            <hr />
-                        </select>
+                        <label for="search-engine">Default Search Engine</label>
                         <button id="search-settings" class="secondary-button">Settings...</button>
                     </div>
+                    <p class="description">Select the search engine to use in the address bar.</p>
+                    <select id="search-engine">
+                        <option value="">Disable search</option>
+                        <hr />
+                    </select>
                 </div>
 
                 <hr />
 
-                <div class="card-group inline-container">
-                    <label for="autocomplete-toggle">Enable Autocomplete</label>
-                    <input id="autocomplete-toggle" type="checkbox" switch />
-                </div>
-                <div class="card-group hidden">
-                    <label for="autocomplete-engine">Default Autocomplete Engine</label>
+                <div class="card-group">
+                    <label for="autocomplete-engine">Search Suggestions</label>
+                    <p class="description">Select the engine that will provide search suggestions.</p>
                     <select id="autocomplete-engine">
-                        <option value="">Please select an autocomplete engine</option>
+                        <option value="">Disable search suggestions</option>
                         <hr />
                     </select>
                 </div>
diff --git a/Base/res/ladybird/about-pages/settings/search.js b/Base/res/ladybird/about-pages/settings/search.js
index ca01814b78d..b342f8c11e5 100644
--- a/Base/res/ladybird/about-pages/settings/search.js
+++ b/Base/res/ladybird/about-pages/settings/search.js
@@ -6,10 +6,8 @@ const searchDialog = document.querySelector("#search-dialog");
 const searchEngine = document.querySelector("#search-engine");
 const searchList = document.querySelector("#search-list");
 const searchSettings = document.querySelector("#search-settings");
-const searchToggle = document.querySelector("#search-toggle");
 
 const autocompleteEngine = document.querySelector("#autocomplete-engine");
-const autocompleteToggle = document.querySelector("#autocomplete-toggle");
 
 let SEARCH_ENGINE = {};
 let AUTOCOMPLETE_ENGINE = {};
@@ -25,22 +23,9 @@ function loadEngineSettings(settings) {
     SEARCH_ENGINE = settings.searchEngine || {};
     AUTOCOMPLETE_ENGINE = settings.autocompleteEngine || {};
 
-    const renderEngineSettings = (type, setting) => {
-        const [name, toggle, engine] = engineForType(type);
-
-        if (setting.name) {
-            toggle.checked = true;
-            engine.value = setting.name;
-        } else {
-            toggle.checked = false;
-        }
-
-        renderEngine(type);
-    };
-
     loadCustomSearchEngines();
-    renderEngineSettings(Engine.search, SEARCH_ENGINE);
-    renderEngineSettings(Engine.autocomplete, AUTOCOMPLETE_ENGINE);
+    renderEngine(Engine.search, SEARCH_ENGINE);
+    renderEngine(Engine.autocomplete, AUTOCOMPLETE_ENGINE);
 
     if (searchDialog.open) {
         showSearchEngineSettings();
@@ -49,16 +34,16 @@ function loadEngineSettings(settings) {
 
 function engineForType(engine) {
     if (engine === Engine.search) {
-        return ["Search", searchToggle, searchEngine];
+        return ["Search", searchEngine];
     }
     if (engine === Engine.autocomplete) {
-        return ["Autocomplete", autocompleteToggle, autocompleteEngine];
+        return ["Autocomplete", autocompleteEngine];
     }
     throw Error(`Unrecognized engine type ${engine}`);
 }
 
 function loadEngines(type, engines) {
-    const [name, toggle, engine] = engineForType(type);
+    const [name, engine] = engineForType(type);
 
     for (const engineName of engines) {
         const option = document.createElement("option");
@@ -74,41 +59,29 @@ function loadEngines(type, engines) {
     }
 }
 
-function renderEngine(type) {
-    const [name, toggle, engine] = engineForType(type);
+function renderEngine(type, setting) {
+    const [name, engine] = engineForType(type);
 
-    if (toggle.checked) {
-        engine.closest(".card-group").classList.remove("hidden");
+    if (setting.name) {
+        engine.value = setting.name;
     } else {
-        engine.closest(".card-group").classList.add("hidden");
-    }
-
-    if (toggle.checked && engine.selectedIndex !== 0) {
-        engine.item(0).disabled = true;
-    } else if (!toggle.checked) {
-        engine.item(0).disabled = false;
         engine.selectedIndex = 0;
     }
 }
 
 function saveEngine(type) {
-    const [name, toggle, engine] = engineForType(type);
+    const [name, engine] = engineForType(type);
 
-    if (toggle.checked && engine.selectedIndex !== 0) {
+    if (engine.selectedIndex !== 0) {
         ladybird.sendMessage(`set${name}Engine`, engine.value);
-    } else if (!toggle.checked) {
+    } else {
         ladybird.sendMessage(`set${name}Engine`, null);
     }
-
-    renderEngine(type);
 }
 
 function setSaveEngineListeners(type) {
-    const [name, toggle, engine] = engineForType(type);
+    const [name, engine] = engineForType(type);
 
-    toggle.addEventListener("change", () => {
-        saveEngine(type);
-    });
     engine.addEventListener("change", () => {
         saveEngine(type);
     });