Search mode categorization #474

ashesbloom · 2025-01-13T19:29:00Z

📝 Description

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
Fixed 'Search With' typo
added Gitignore

⚠️ Important Note ⚠️

Improvements Needed:

Selection Issue
- When the Search mode changes, the selection should return to default.
Animation Enhancement
- Animations must be added and polished to improve the overall user experience.

📸 Screenshots / 📹 Videos

Preview.359.mp4

🔗 Related Issues

✅ 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.

…bloom/materialYouNewTab into Search-Mode-Categorization

added search mode categorization

Thunder-Blaze · 2025-01-14T05:57:23Z

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

Thunder-Blaze · 2025-01-14T06:03:27Z

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 · 2025-01-16T18:11:41Z

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

added default search mode selection

…bloom/materialYouNewTab into Search-Mode-Categorization

ashesbloom · 2025-01-16T18:20:15Z

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

…bloom/materialYouNewTab into Search-Mode-Categorization

ashesbloom · 2025-01-16T18:33:00Z

@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 · 2025-01-16T18:34:43Z

@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

optimized default selection by utilizing the local storage method!

ashesbloom · 2025-01-16T18:47:28Z

@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 · 2025-01-16T18:54:18Z

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 · 2025-01-16T19:10:22Z

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 · 2025-01-17T04:39:27Z

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 · 2025-01-17T04:59:31Z

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

ok 👍🏻

Thunder-Blaze · 2025-01-17T05:28:20Z

@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

Ripple Effect and Translations

itz-rj-here · 2025-01-18T12:23:05Z

Need to add a delay to the Search With button. cause it is continuously clickable if someone wants too.

ashesbloom · 2025-01-19T07:32:14Z

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

@prem-k-r @itz-rj-here Okay so I will make it optional for the users, and all animation actions triggered
However, as the search modes increase like search on: LinkedIn, Instagram, etc, making it optional will defeat the purpose of categorization but I do agree that in the current patch, most of the users won't even notice that the 'search with' is clickable
need your opinion on this maybe some hover or something could help!

prem-k-r · 2025-01-19T07:40:19Z

most of the users won't even notice that the 'search with' is clickable

Maybe we can add it in the menu without toggle, just text: title and info.. like in chrome v2.5 branch bookmark hint.
3d0cc65

ashesbloom · 2025-01-19T09:35:37Z

And toggled between Search On and With, maybe change the animation starting direction to show search engines to right side instead from left side . We have Vertical divider on right side, so I think it will be better

@prem-k-r I was also going for that only, but the animation is overlapping with other elements, tried fixing that and even took some drastic measures but didn't work, I think that whole structure has to be tweaked, will see what I can do.

ps: One patch I ready I'll commit in a second

fixed ripple effect leaking out of the button fixed bugs

ashesbloom · 2025-01-19T09:46:12Z

@prem-k-r

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

#❇️Fixes

Fixed animations on search engines and search with button when the page is loaded or reloaded.
Added performance buff
Fixed ripple effect leak
Fixed small bugs here and there

#📸Preview

Preview.474.mp4

ps:
I found many bugs that need to be addressed, will list them later today.

ashesbloom · 2025-01-19T09:54:07Z

In my opinion when we open a new tab, we should see no animation on search engines, just plain like now without YouTube. And suppose we switch to Search On, then if we open new tab it still shows Search On.. Search On YouTube.. they are not search engines so I don't think it would be good, so Stay on Search With, so don't save toggle state of On and With.. Later after this PR merges, I can add Google Images and Wikipedia in Search On.

Yeah! it would be nice I idea to add Google images and Wikipedia to that, one thing we can do is we can tag the thing we want to search in eg: @youtube followed by the query

most of the users won't even notice that the 'search with' is clickable

Maybe we can add it in the menu without toggle, just text: title and info.. like in chrome v2.5 branch bookmark hint. 3d0cc65

need more elaboration on this!

prem-k-r · 2025-01-19T10:19:03Z

most of the users won't even notice that the 'search with' is clickable

Maybe we can add it in the menu without toggle, just text: title and info.. like in chrome v2.5 branch bookmark hint. 3d0cc65

need more elaboration on this!

<div class="ttcont">
                            <div class="texts">
                                <div class="bigText">Switch between Search Modes</div>
                                <div class="infoText">Click on 'Search With' card to toggle the mode</div>
                            </div>
                        </div>

prem-k-r · 2025-01-19T10:23:09Z

one thing we can do is we can tag the thing we want to search in eg: @youtube followed by the query

maybe we can.. after this #474 and #479 merges

ashesbloom · 2025-01-19T10:41:38Z

Only text is changing after reload, not search engines

yeah, I have been aware of this bug, It occurs when local storage functionality was added (710cd01), I was planning to fix all bugs in one commit after this.

I will provide a new patch later today.

prem-k-r · 2025-01-19T10:43:02Z

ok, thanks :)

XengShi · 2025-01-19T14:22:17Z

Currently, it includes only YouTube, which limits its usefulness; it would be great to include additional platforms such as Stack Overflow, Quora, ChatGPT (if possible), Amazon, Instagram, X (formerly Twitter), and GitHub.

prem-k-r · 2025-01-28T14:17:43Z

let's fix the issues :)

ashesbloom · 2025-01-28T14:21:15Z

let's fix the issues :)

I will provide a patch on the weekend, as I am quite busy with exams right now

prem-k-r · 2025-01-28T14:24:42Z

ok, take your time...
I am also trying.. all the css.. cant get desired outcome

and add helper text

prem-k-r · 2025-02-22T12:23:56Z

Added Google Images and Wikipedia, and did some fixes..
still there are some minor bugs

ashesbloom added 4 commits January 13, 2025 09:46

added a basic search mode categorization

eadd74b

added basic search mode categorization 2

56e1529

Merge branch 'Search-Mode-Categorization' of https://github.com/ashes…

dbdfca4

…bloom/materialYouNewTab into Search-Mode-Categorization

added gitignore

0526ff5

added search mode categorization

prem-k-r added enhancement New feature or request work in progress The issue is on progress to fix labels Jan 13, 2025

Update .gitignore

2d15a2c

This comment was marked as outdated.

Sign in to view

Thunder-Blaze added 2 commits January 16, 2025 23:26

Added Toggling

7317f6a

Added Fixes

784f78a

ashesbloom added 2 commits January 16, 2025 23:43

fixed search mode bugs and animations

741d0b6

added default search mode selection

Merge branch 'Search-Mode-Categorization' of https://github.com/ashes…

303ab7b

…bloom/materialYouNewTab into Search-Mode-Categorization

Merge branch 'Search-Mode-Categorization' of https://github.com/ashes…

979db7d

…bloom/materialYouNewTab into Search-Mode-Categorization

Merge pull request #1 from Thunder-Blaze/Search-Mode-Categorization

710cd01

optimized default selection by utilizing the local storage method!

prem-k-r mentioned this pull request Jan 16, 2025

Added Browser's default search engine #479

Open

4 tasks

Ripple Effect and Translations

ffadf1b

Merge pull request #2 from Thunder-Blaze/Search-Mode-Categorization

48f7924

Ripple Effect and Translations

prem-k-r removed the work in progress The issue is on progress to fix label Jan 17, 2025

This comment was marked as outdated.

Sign in to view

fixd loading animation trigger

970f55e

fixed ripple effect leaking out of the button fixed bugs

This comment was marked as resolved.

Sign in to view

prem-k-r added the work in progress The issue is on progress to fix label Jan 19, 2025

This comment was marked as outdated.

Sign in to view

prem-k-r added 2 commits January 20, 2025 00:44

Merge branch 'main' into Search-Mode-Categorization

577e787

Merge branch 'main' into Search-Mode-Categorization

0c4ade6

prem-k-r added 5 commits February 22, 2025 12:09

Merge remote-tracking branch 'upstream/main' into pr/474

b277848

indentation and click effect

51e5a0d

Added Google Images and Wikipedia

43aaf55

fix search with/on display issue

32dfbf7

and add helper text

some fix and refactor

79a31af

Merge branch 'main' into Search-Mode-Categorization

3e788d3

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Search mode categorization #474

Search mode categorization #474

ashesbloom commented Jan 13, 2025 •

edited by prem-k-r

Loading

Thunder-Blaze commented Jan 14, 2025

This comment was marked as outdated.

Thunder-Blaze commented Jan 14, 2025

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 16, 2025 •

edited

Loading

ashesbloom commented Jan 16, 2025 •

edited

Loading

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 16, 2025

prem-k-r commented Jan 16, 2025 •

edited

Loading

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 17, 2025 •

edited

Loading

Thunder-Blaze commented Jan 17, 2025

Thunder-Blaze commented Jan 17, 2025

itz-rj-here commented Jan 18, 2025

ashesbloom commented Jan 19, 2025

prem-k-r commented Jan 19, 2025 •

edited

Loading

This comment was marked as outdated.

This comment was marked as outdated.

ashesbloom commented Jan 19, 2025

ashesbloom commented Jan 19, 2025

ashesbloom commented Jan 19, 2025 •

edited

Loading

prem-k-r commented Jan 19, 2025

prem-k-r commented Jan 19, 2025

This comment was marked as resolved.

This comment was marked as resolved.

ashesbloom commented Jan 19, 2025

prem-k-r commented Jan 19, 2025 •

edited

Loading

XengShi commented Jan 19, 2025

This comment was marked as outdated.

prem-k-r commented Jan 28, 2025

ashesbloom commented Jan 28, 2025

prem-k-r commented Jan 28, 2025

prem-k-r commented Feb 22, 2025

Search mode categorization #474

Are you sure you want to change the base?

Search mode categorization #474

Conversation

ashesbloom commented Jan 13, 2025 • edited by prem-k-r Loading

📝 Description

Improvements Needed:

📸 Screenshots / 📹 Videos

🔗 Related Issues

✅ Checklist

Thunder-Blaze commented Jan 14, 2025

This comment was marked as outdated.

Thunder-Blaze commented Jan 14, 2025

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 16, 2025 • edited Loading

ashesbloom commented Jan 16, 2025 • edited Loading

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 16, 2025

prem-k-r commented Jan 16, 2025 • edited Loading

Thunder-Blaze commented Jan 16, 2025

ashesbloom commented Jan 17, 2025 • edited Loading

Thunder-Blaze commented Jan 17, 2025

Thunder-Blaze commented Jan 17, 2025

itz-rj-here commented Jan 18, 2025

ashesbloom commented Jan 19, 2025

prem-k-r commented Jan 19, 2025 • edited Loading

This comment was marked as outdated.

This comment was marked as outdated.

ashesbloom commented Jan 19, 2025

ashesbloom commented Jan 19, 2025

ashesbloom commented Jan 19, 2025 • edited Loading

prem-k-r commented Jan 19, 2025

prem-k-r commented Jan 19, 2025

This comment was marked as resolved.

This comment was marked as resolved.

ashesbloom commented Jan 19, 2025

prem-k-r commented Jan 19, 2025 • edited Loading

XengShi commented Jan 19, 2025

This comment was marked as outdated.

prem-k-r commented Jan 28, 2025

ashesbloom commented Jan 28, 2025

prem-k-r commented Jan 28, 2025

prem-k-r commented Feb 22, 2025

ashesbloom commented Jan 13, 2025 •

edited by prem-k-r

Loading

ashesbloom commented Jan 16, 2025 •

edited

Loading

ashesbloom commented Jan 16, 2025 •

edited

Loading

prem-k-r commented Jan 16, 2025 •

edited

Loading

ashesbloom commented Jan 17, 2025 •

edited

Loading

prem-k-r commented Jan 19, 2025 •

edited

Loading

ashesbloom commented Jan 19, 2025 •

edited

Loading

prem-k-r commented Jan 19, 2025 •

edited

Loading