Feat: hide search

CHANGELOG.md

@@ -21,6 +21,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
   - Japanese ([@kons10](https://github.com/kons10))
   - Arabic ([@heshamoomar](https://github.com/heshamoomar))
 
+### Added
+
+- New setting to hide the search section, allowing you to completely hide the search bar and search engines section.
+
 ## [v3.3](https://github.com/prem-k-r/MaterialYouNewTab/compare/v3.2...v3.3) - Nov 23, 2025
 
 ### Added

index.html

@@ -1559,6 +1559,19 @@ <h1>Material You New Tab</h1>
                                 <button class="savebtn" id="saveAPI">Save</button>
                             </div>
                         </div>
+
+                        <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="hideSearch">Hide Search</div>
+                                <div class="infoText" id="hideSearchInfo">
+                                    Hide the search bar and search engine sections entirely
+                                </div>
+                            </div>
+                            <label class="switch">
+                                <input id="hideSearchCheckbox" type="checkbox">
+                                <span class="toggle"></span>
+                            </label>
+                        </div>
                     </div>
                     <div class="divider" id="divider2"></div>
 

locales/en.js

@@ -60,6 +60,8 @@ const en = {
     "motivationalQuotesInfo": "Show quotes below the searchbar",
     "search_suggestions_button": "Search Suggestions",
     "search_suggestions_text": "Enable search suggestions",
+    "hideSearch": "Hide Search",
+    "hideSearchInfo": "Hide the search bar and search engine sections entirely",
 
     // Proxy
     "useproxytitletext": "Proxy Bypass",

scripts/quotes.js

@@ -285,6 +285,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const motivationalQuotesCont = document.getElementById("motivationalQuotesCont");
     const motivationalQuotesCheckbox = document.getElementById("motivationalQuotesCheckbox");
     const searchWithContainer = document.getElementById("search-with-container");
+    const hideSearchCheckbox = document.getElementById("hideSearchCheckbox")
 
     // Load states from localStorage
     hideSearchWith.checked = localStorage.getItem("showShortcutSwitch") === "true";
@@ -297,12 +298,13 @@ document.addEventListener("DOMContentLoaded", () => {
     const updateMotivationalQuotesState = () => {
         const isHideSearchWithEnabled = hideSearchWith.checked;
         const isMotivationalQuotesEnabled = motivationalQuotesCheckbox.checked;
+        const isHideSearchChecked = hideSearchCheckbox.checked;
 
         // Save state to localStorage
         localStorage.setItem("motivationalQuotesVisible", isMotivationalQuotesEnabled);
 
         // Handle visibility based on settings
-        if (!isHideSearchWithEnabled) {
+        if (!isHideSearchWithEnabled && !isHideSearchChecked) {
             quotesToggle.classList.add("inactive");
             motivationalQuotesCont.style.display = "none";
             clearQuotesStorage();
@@ -311,7 +313,7 @@ document.addEventListener("DOMContentLoaded", () => {
 
         // Update UI visibility
         quotesToggle.classList.remove("inactive");
-        searchWithContainer.style.display = isMotivationalQuotesEnabled ? "none" : "flex";
+        searchWithContainer.style.display = (isMotivationalQuotesEnabled || isHideSearchChecked) ? "none" : "flex";
         motivationalQuotesCont.style.display = isMotivationalQuotesEnabled ? "flex" : "none";
 
         // Load quotes if motivational quotes are enabled
@@ -331,5 +333,9 @@ document.addEventListener("DOMContentLoaded", () => {
         updateMotivationalQuotesState();
     });
 
+    hideSearchCheckbox.addEventListener("change", () => {
+        updateMotivationalQuotesState();
+    });
+
     motivationalQuotesCheckbox.addEventListener("change", updateMotivationalQuotesState);
 });

scripts/search.js

@@ -381,6 +381,41 @@ hideSearchWith.addEventListener("change", (e) => {
     sortDropdown();
 });
 
+// Hiding search bar and search engine container based on saved preference
+function handleSearchVisibility(isChecked) {
+    const searchBar = document.getElementById("searchbar");
+    const searchWithContainer = document.getElementById("search-with-container"); 
+
+    // show/hide search bar
+    searchBar.style.display = isChecked ? "none" : "block";
+
+    // also take "showShortcutSwitch" into account while showing/hiding search with container
+    const isShortCutSwitchEnabled = localStorage.getItem("showShortcutSwitch")?.toString() === "true";
+    searchWithContainer.style.display = (isChecked || isShortCutSwitchEnabled) ? "none" : "flex"
+
+    // disable the shortcut switch if search is hidden
+    const shortcutSwitchParent = document.getElementById("hideSearchWith")?.parentElement?.parentElement
+    if(isChecked) shortcutSwitchParent.classList.add("inactive");
+    else shortcutSwitchParent.classList.remove("inactive");
+}
+
+const hideSearchCheckbox = document.getElementById("hideSearchCheckbox")
+hideSearchCheckbox.addEventListener("change", (e) => {
+    const isChecked = e.target.checked;
+
+    handleSearchVisibility(isChecked);
+
+    // update localStorage
+    localStorage.setItem("hideSearch", isChecked);
+})
+
+// Initialize search visibility based on saved preference
+if (localStorage.getItem("hideSearch")) {
+    const isSearchHidden = localStorage.getItem("hideSearch").toString() === "true";
+    hideSearchCheckbox.checked = isSearchHidden;
+    handleSearchVisibility(isSearchHidden);
+}
+
 // Intialize shortcut switch
 if (localStorage.getItem("showShortcutSwitch")) {
     const isShortCutSwitchEnabled = localStorage.getItem("showShortcutSwitch").toString() === "true";