Search mode categorization

[ashesbloom]

📝 Description

1. Created a basic search mode categorization
   • added data-category to all the children of search-with-container (index.html)
   • added toggleSearchEngines function in script.js which hides the search options based on search mode
2. Fixed 'Search With' typo
3. added Gitignore

---

⚠️ Important Note ⚠️

Improvements Needed:

1. Selection Issue

   • When the Search mode changes, the selection should return to default.

2. Animation Enhancement

   • Animations must be added and polished to improve the overall user experience.

---

📸 Screenshots / 📹 Videos

Preview.359.mp4

🔗 Related Issues

• Closes Bug: Typo error and UI Enhancement for Search Bar Dropdowns #359
• Related to Bug: Typo error and UI Enhancement for Search Bar Dropdowns #359

✅ Checklist

• I have read and followed the Contributing Guidelines.
• I have tested my changes by installing them as an extension (not just running via localhost) to ensure it builds, installs, and works as expected.
• I have tested these changes in at least Chrome and Firefox (other browsers if applicable).
• Attached visual evidence of changes (screenshots or videos) if applicable.

[Thunder-Blaze]

I can add the animations, can you explain the 1st one in a bit more detail

[prem-k-r]

I think something like:
Suppose you selected YouTube from Search on, when you switch back to Search with, notice that none is selected now (sill YT), Google (default) (or last selected one) should be selected.

[Thunder-Blaze]

Oh then I'll be able to add this too 👍🏻
But I'll need a day, since I'm traveling today back to college 🥲

[Thunder-Blaze]

I worked on the 1st problem
umm its working just fine I think
but translations are overwritting again 😢 when I set "search on" as default

any suggestions how to fix ?
current progress -> https://github.com/Thunder-Blaze/MaterialYou-NewTab/tree/Search-Mode-Categorization
once complete @ashesbloom I'll make a PR in your repo

[ashesbloom]

I worked on the 1st problem umm its working just fine I think but translations are overwritting again 😢 when I set "search on" as default

any suggestions how to fix ? current progress -> https://github.com/Thunder-Blaze/MaterialYou-NewTab/tree/Search-Mode-Categorization once complete @ashesbloom I'll make a PR in your repo

@Thunder-Blaze I Just finished the patch a few seconds ago and then read your comment, I was also facing the same issue and I don't think it can be fixed unless the whole structure is tweaked, because z-index, overflow nothing seems to be working so I intertwined the animation

[ashesbloom]

@prem-k-r ready to be pushed! 🎉

• Closes Search mode categorization #474
• Related to Bug: Typo error and UI Enhancement for Search Bar Dropdowns #359

#❇️Fixes

• When the Search mode changes, the selection returns to the previously selected option.
  (if left unselected default engines are 1 on search with and 5 on search on)
• Transitions and animations were added for search options.
• Fixed width issue when the mode is changed (bug).

#📸Preview

Preview.474.mp4

[Thunder-Blaze]

@prem-k-r ready to be pushed! 🎉

• Closes Search mode categorization #474
• Related to Bug: Typo error and UI Enhancement for Search Bar Dropdowns #359

#❇️Fixes

• When the Search mode changes, the selection returns to default i.e. first selection.
• Transitions and animations were added for search options.
• Fixed width issue when the mode is changed (bug).

#📸Preview

Preview.474.mp4

I made a PR, check it
The selection will return to last used one in it

[ashesbloom]

@prem-k-r ready to be pushed! 🎉

• Closes Search mode categorization #474
• Related to Bug: Typo error and UI Enhancement for Search Bar Dropdowns #359

#❇️Fixes

• When the Search mode changes, the selection returns to default i.e. first selection.
• Transitions and animations were added for search options.
• Fixed width issue when the mode is changed (bug).

#📸Preview
Preview.474.mp4

I made a PR, check it The selection will return to last used one in it

I just finished testing works perfectly well done!
merged!

[prem-k-r]

Great work guys!
can you please make Search With and Search On translatable

umm, also maybe we can add ripple effect on button click

[Thunder-Blaze]

Great work guys! can you please make Search With and Search On translatable

umm, also can we add ripple effect on button click

@ashesbloom are you working on it or should I finish it ?

[ashesbloom]

Great work guys! can you please make Search With and Search On translatable
umm, also can we add ripple effect on button click

@ashesbloom are you working on it or should I finish it

@Thunder-Blaze sure go ahead I am switching to a new issue, will come back time to time though!

[Thunder-Blaze]

@Thunder-Blaze sure go ahead I am switching to a new issue, will come back time to time though!

ok 👍🏻

[Thunder-Blaze]

@ashesbloom Done, you can check the PR

@prem-k-r I went with simple CSS riple effect otherwise there would've been lots of useless JS added just for one ripple animation

[prem-k-r]

It's working fine overall.
I'm a bit iffy about some animations, let's wait for Xengshi.

And I think the toggle between "Search with" and "Search on" should be temporary, with "Search with" as the default. Need more opinions on this.

[ashesbloom]

@ashesbloom Done, you can check the PR

@prem-k-r I went with simple CSS riple effect otherwise there would've been lots of useless JS added just for one ripple animation

@Thunder-Blaze @prem-k-r though I think it can be more fluid, I'll create a better patch later today.

[prem-k-r]

It's working fine overall. I'm a bit iffy about some animations, let's wait for Xengshi.

And I think the toggle between "Search with" and "Search on" should be temporary, with "Search with" as the default. Need more opinions on this.

If we make it temp maybe we can also avoid animation when page reloaded/NewTab opened