Skip to content

Added search box hide button #122

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
satyansh2004 wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Added search box hide button #122

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
02fa02a
Added Search box hide button feature
satyansh2004 Jan 14, 2026
aa77281
Update changelog for search box hide option (closes #51)
satyansh2004 Jan 14, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -107,6 +107,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Added toggle to hide or show location in the location tile ([@prem-k-r](https://github.com/prem-k-r)) ([#685](https://github.com/XengShi/materialYouNewTab/pull/685))
- Added drag and drop functionality for reordering shortcuts ([@prem-k-r](https://github.com/prem-k-r)) ([#695](https://github.com/XengShi/materialYouNewTab/pull/695))
- Added edit functionality for todo list ([@GauravKukreti](https://github.com/GauravKukreti)) ([#719](https://github.com/XengShi/materialYouNewTab/pull/719))
- Added option to hide the search box ([@satyansh2004](https://github.com/satyansh2004)) ([#51](https://github.com/prem-k-r/MaterialYouNewTab/issues/51))
Copy link

@coderabbitai coderabbitai bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟠 Major

Move this entry to [Unreleased] (it’s currently recorded under v3.2).
Right now the feature is documented as if it shipped on July 20, 2025, which is misleading for this PR.

Proposed change 
 ## [Unreleased](https://github.com/prem-k-r/MaterialYouNewTab/compare/v3.3...main)
 
+### Added
+
+- Added option to hide the search box ([`@satyansh2004`](https://github.com/satyansh2004)) ([`#51`](https://github.com/prem-k-r/MaterialYouNewTab/issues/51))
+
 ### Improved
 ...
@@
 ## [v3.2](https://github.com/XengShi/materialYouNewTab/compare/v3...v3.2) - July 20, 2025
@@
- - Added option to hide the search box ([`@satyansh2004`](https://github.com/satyansh2004)) ([`#51`](https://github.com/prem-k-r/MaterialYouNewTab/issues/51))
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
- Added option to hide the search box ([@satyansh2004](https://github.com/satyansh2004)) ([#51](https://github.com/prem-k-r/MaterialYouNewTab/issues/51))
## [Unreleased](https://github.com/prem-k-r/MaterialYouNewTab/compare/v3.3...main)
### Added
- Added option to hide the search box ([`@satyansh2004`](https://github.com/satyansh2004)) ([`#51`](https://github.com/prem-k-r/MaterialYouNewTab/issues/51))
### Improved
...
## [v3.2](https://github.com/XengShi/materialYouNewTab/compare/v3...v3.2) - July 20, 2025
🤖 Prompt for AI Agents 
In `@CHANGELOG.md` at line 110, The changelog entry "- Added option to hide the
search box ([`@satyansh2004`]) ([`#51`])" is placed under v3.2 but should be moved
to the "[Unreleased]" section; edit CHANGELOG.md to cut that specific entry and
paste it under the existing "[Unreleased]" header (preserving the exact entry
text and attribution) so the feature is not shown as shipped in v3.2.


### Changed

Expand Down
13 changes: 12 additions & 1 deletion index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -670,7 +670,7 @@ <h2 id="editBookmarkHeading">Edit Bookmark</h2>
<!-- ------end of weather stuff------------ -->

<!-- ----------searchbar-------------- -->
<div class="searchbar bgLightTint" id="searchbar">
<div class="searchbar bgLightTint" id="searchbar" style="visibility: visible;">

<div class="searchIcon">
<svg fill="none" height="100%" viewBox="0 0 45 45" width="100%" xmlns="http://www.w3.org/2000/svg">
Expand Down Expand Up @@ -1476,6 +1476,17 @@ <h1>Material You New Tab</h1>
</label>
</div>

<div class="ttcont">
<div class="texts">
<div class="bigText" id="hideSearchBox">Hide Search Box</div>
<div class="infoText" id="hideSearchBoxInfo">If you do not want search box</div>
</div>
<label class="switch">
<input id="searchBoxCheckBox" type="checkbox">
<span class="toggle"></span>
</label>
</div>
Comment on lines +1479 to +1488
Copy link

@coderabbitai coderabbitai bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

🧩 Analysis chain

🏁 Script executed:

rg -n --hidden --glob '!**/node_modules/**' -S 'hideSearchBoxInfo|hideSearchBox' .

Repository: prem-k-r/MaterialYouNewTab

Length of output: 562

🏁 Script executed:

fd -t f -e json -e js -e yml -e yaml . | grep -E '(locale|i18n|lang|translation)' | head -20

Repository: prem-k-r/MaterialYouNewTab

Length of output: 353

🏁 Script executed:

# Check the structure of a locale file
head -50 locales/en.js

Repository: prem-k-r/MaterialYouNewTab

Length of output: 1967

🏁 Script executed:

# Search for the new text strings in all locale files
rg -n 'Hide Search Box|If you do not want search box' locales/

Repository: prem-k-r/MaterialYouNewTab

Length of output: 52

🏁 Script executed:

# Count locale files
ls -1 locales/*.js | wc -l

# Show all locale files
ls -1 locales/*.js | xargs -I {} basename {}

Repository: prem-k-r/MaterialYouNewTab

Length of output: 265

🏁 Script executed:

# Check if there's a pattern for how "Hide X" settings are translated
rg -n '"hide' locales/ -i | head -20

Repository: prem-k-r/MaterialYouNewTab

Length of output: 1428

Add translations for "Hide Search Box" setting across all 31 locale files.

The IDs hideSearchBox and hideSearchBoxInfo are missing from every locale file (ar_SA, de, en, fr, ja, ko, ru, etc.). Following the established pattern for similar toggles like hideClockBox / hideClockBoxInfo, both keys need translations added to all 31 locale files.

Additionally, refine the English copy from "If you do not want search box" to "If you don't want the search box" (or similar) to match the phrasing pattern used in comparable settings.

🤖 Prompt for AI Agents 
In `@index.html` around lines 1479 - 1488, Add the new translation keys
"hideSearchBox" and "hideSearchBoxInfo" to all 31 locale files, following the
same structure and key naming used for similar toggles (e.g., "hideClockBox" /
"hideClockBoxInfo"); populate each locale with an appropriate translation for
the short label ("Hide Search Box") and the helper text (refine the English
helper to "If you don't want the search box" or equivalent in other languages).
Ensure the locale JSON/YAML includes both keys for every language and that the
UI uses these keys (IDs hideSearchBox and hideSearchBoxInfo) so the rendered
text pulls from the locale bundles.


<div class="ttcont" id="quotesToggle">
<div class="texts">
<div class="bigText" id="motivationalQuotesText">Motivational Quotes</div>
Expand Down
40 changes: 40 additions & 0 deletions scripts/search.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -414,3 +414,43 @@ document.addEventListener("keydown", function (event) {
searchbar.classList.add("active");
}
});


/* ------ Event Listeners for Searchbar ------ */
const showSearchbar = () => {
document.getElementById("searchbar").style.visibility = "visible";
}

const hideSearchbar = () => {
document.getElementById("searchbar").style.visibility = "hidden";
}

const initSearchBarswitch = (element) => {
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Function name initSearchBarswitch uses inconsistent casing. Should be initSearchBarSwitch with capital 'S' in 'Switch' to follow camelCase convention.

Copilot uses AI. Check for mistakes.
if (element.checked) {
hideSearchbar();
localStorage.setItem("showSearchBarswitch", true);
} else {
showSearchbar();
localStorage.setItem("showSearchBarswitch", false);
Comment on lines +431 to +434
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The localStorage key name showSearchBarswitch uses inconsistent casing. Consider renaming to showSearchBarSwitch with capital 'S' in 'Switch' for consistency.

Copilot uses AI. Check for mistakes.
Copy link
Author

@satyansh2004 satyansh2004 Jan 17, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@copilot open a new pull request to apply changes based on this feedback

}
}

const hideSearchBox = document.getElementById("searchBoxCheckBox");
hideSearchBox.addEventListener("change", (e) => {
initSearchBarswitch(e.target);
});

if (localStorage.getItem("showSearchBarswitch")) {
const isSearchBarswitchEnabled = localStorage.getItem("showSearchBarswitch").toString() === "true";
document.getElementById("searchBoxCheckBox").checked = isSearchBarswitchEnabled;

if (isSearchBarswitchEnabled) {
hideSearchbar();
} else if (!isShortCutSwitchEnabled) {
Copy link

Copilot AI Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Variable isShortCutSwitchEnabled is undefined. This should be isSearchBarswitchEnabled to maintain consistency with the logic for showing/hiding the search bar.

Suggested change
} else if (!isShortCutSwitchEnabled) {
} else if (!isSearchBarswitchEnabled) {

Copilot uses AI. Check for mistakes.
showSearchbar();
}
} else {
localStorage.setItem("showSearchBarswitch", false);
}

initSearchBarswitch(hideSearchBox);
Comment on lines +419 to +456
Copy link

@coderabbitai coderabbitai bot Jan 14, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

Fix ReferenceError (isShortCutSwitchEnabled) and prefer a “real hide” (hidden / display:none) over visibility.

  • Line 449: isShortCutSwitchEnabled isn’t defined in this scope; if the user has showSearchBarswitch=false, this path can crash the script.
  • UX: visibility: hidden leaves empty space and still permits focusing hidden inputs; consider searchbar.hidden = true/false (or a CSS class that sets display: none).
  • Naming: consider storing hideSearchBox=true/false to match the checkbox meaning.
Proposed fix (scoped to this block) 
 /* ------ Event Listeners for Searchbar ------ */
-const showSearchbar = () => {
-    document.getElementById("searchbar").style.visibility = "visible";
-}
-
-const hideSearchbar = () => {
-    document.getElementById("searchbar").style.visibility = "hidden";
-}
+const setSearchbarHidden = (hidden) => {
+    // "hidden" collapses layout and avoids focusing invisible controls
+    searchbar.hidden = hidden;
+}
 
 const initSearchBarswitch = (element) => {
-    if (element.checked) {
-        hideSearchbar();
-        localStorage.setItem("showSearchBarswitch", true);
-    } else {
-        showSearchbar();
-        localStorage.setItem("showSearchBarswitch", false);
-    }
+    const hidden = Boolean(element.checked); // checked == hide
+    setSearchbarHidden(hidden);
+    localStorage.setItem("hideSearchBox", String(hidden));
 }
 
 const hideSearchBox = document.getElementById("searchBoxCheckBox");
 hideSearchBox.addEventListener("change", (e) => {
     initSearchBarswitch(e.target);
 });
 
-if (localStorage.getItem("showSearchBarswitch")) {
-    const isSearchBarswitchEnabled = localStorage.getItem("showSearchBarswitch").toString() === "true";
-    document.getElementById("searchBoxCheckBox").checked = isSearchBarswitchEnabled;
-
-if (isSearchBarswitchEnabled) {
-        hideSearchbar();
-    } else if (!isShortCutSwitchEnabled) {
-        showSearchbar();
-    }
-} else {
-    localStorage.setItem("showSearchBarswitch", false);
-}
+const isSearchBoxHidden = localStorage.getItem("hideSearchBox") === "true";
+hideSearchBox.checked = isSearchBoxHidden;
+setSearchbarHidden(isSearchBoxHidden);
 
 initSearchBarswitch(hideSearchBox);