Adding Feature/search engine selection

[princevora]

• Added DropDown Support With all the supported search engine In the materialYouNewTab.
• The DropDown Supports all the colors which are currently active as it has used the pre written css classes and styles.
• The Feature has short code and i have focused on clean and readable code
• The Dropdown stores the selected search engine in the local storage same as the radio button does.
• It will automatically detect and select the appropriate search engine from local storage when ever the new tab is been created.

I have Shared A few Screen Shots Of my work below.

Dark theme

Light Theme & Brave New Tab interface

Option For Enabling Or Disabling the shortcut search

[princevora]

This Fork Has all the recent code and added a feature to enable or disable the shortcut search.

[itz-rj-here]

if you don't have any problem can you place the type here... Text little bit of right side please...

[prem-k-r]

Option For Enabling Or Disabling the shortcut search

Great. Please rearrange it before search suggestions toggle.. proxy and search suggestions are related.. so adding in between is not good

[XengShi]

Your code works well overall, but I noticed a couple of minor issues that could be improved:

Screencast.From.2024-12-02.13-16-05.mp4

Upon reloading the page, the radio button momentarily appears for a fraction of a second before disappearing.

Screencast.From.2024-12-02.13-17-37.mp4

On the first load of the extension, both options—'Search with' and 'Dropdown selection'—are enabled simultaneously, whereas initially, only the 'Search with' option should be active.

[itz-rj-here]

Your code works well overall, but I noticed a couple of minor issues that could be improved:

Screencast.From.2024-12-02.13-16-05.mp4
Upon reloading the page, the radio button momentarily appears for a fraction of a second before disappearing.

Screencast.From.2024-12-02.13-17-37.mp4
On the first load of the extension, both options—'Search with' and 'Dropdown selection'—are enabled simultaneously, whereas initially, only the 'Search with' option should be active.

i can feel that the position of the icon's doesn't looks good.
Need more perfection :)

[prem-k-r]

I recently learned that we can use the element. It allows us to reference an SVG symbol, avoiding the need to write the same SVG code repeatedly and making our code cleaner.

example:

<!-- Define the SVG symbol in the <defs> block -->
<svg style="display: none;">
  <symbol id="custom-icon" viewBox="0 0 28 28">
    <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
    <path class="darkIconForDarkTheme"
          d="M22.9991 13.1645C22.9954 13.0734 22.9651 12.9855 22.9119 12.9118C22.8588 12.8382 22.7853 12.7822 22.7007 12.751L13.8694 9.98251C13.7046 9.93107 13.6294 10.0197 13.7018 10.1788L15.3442 13.8304C15.4167 13.9904 15.604 14.18 15.7602 14.2524L18.0135 15.2966C18.1697 15.369 18.1735 15.4957 18.021 15.5776L8.40754 20.7525C8.25601 20.8345 8.23624 20.8059 8.36425 20.6887L12.0575 17.3219C12.197 17.1796 12.28 16.9905 12.291 16.7904L12.2947 6.58526C12.291 6.49394 12.2606 6.40578 12.2073 6.33199C12.154 6.25821 12.0803 6.20212 11.9954 6.17084L8.2993 5.01334C8.13459 4.9619 8 5.06383 8 5.24008V20.7211C8 20.8974 8.11483 21.1241 8.25601 21.2251L12.0114 23.9183C12.1526 24.0193 12.3879 24.0279 12.5357 23.9373L22.7308 17.723C22.8093 17.6688 22.8744 17.597 22.921 17.5133C22.9677 17.4295 22.9947 17.336 23 17.24V13.1645H22.9991Z"
          fill="white" />
  </symbol>
</svg>

<!-- Reuse the SVG with <use> -->
<svg class="icon" width="28" height="28">
  <use href="#custom-icon"></use>
</svg>

<svg class="icon-large" width="56" height="56">
  <use href="#custom-icon"></use>
</svg>

I'm not sure if we can do the same here, but you can check if it's possible.

[princevora]

Your code works well overall, but I noticed a couple of minor issues that could be improved:

Screencast.From.2024-12-02.13-16-05.mp4
Upon reloading the page, the radio button momentarily appears for a fraction of a second before disappearing.

Screencast.From.2024-12-02.13-17-37.mp4
On the first load of the extension, both options—'Search with' and 'Dropdown selection'—are enabled simultaneously, whereas initially, only the 'Search with' option should be active.

i updated it, it should be good now.

[princevora]

Option For Enabling Or Disabling the shortcut search

Great. Please rearrange it before search suggestions toggle.. proxy and search suggestions are related.. so adding in between is not good

i also pushed that

[prem-k-r]

1. Please remove semi-colon

2. On first launch it is like this.. it will be better if it start with toggle off
   

3. svg placement is bit off... we can fix this later

[prem-k-r]

Also I suggest if toggle is on then shift rightdiv a little down

[princevora]

Is it giving error lol

its all good from my side bro

Your page doesnt have the container "Search With"

[princevora]

I have updated your suggestions you told me

[prem-k-r]

Is it giving error lol

its all good from my side bro

Your page doesnt have the container "Search With"

that was coz of semi color, it's resolved

[princevora]

Is it giving error lol

its all good from my side bro ![image](https://private-user-images.githubusercontent.com/122656064/391571007-3c046aa8-
that was coz of semi color, it's resolved

Ohh i see

[princevora]

I have added the default as search with option

[prem-k-r]

just change back padding to what it was

Rest seems all good..

(svg one.. i"ll check it)

[princevora]

just change back padding to what it was Rest seems all good..

(svg one.. i"ll check it)

you mean the "typ here" , its done 👍?

[princevora]

i hope its all good now

[prem-k-r]

ah sorry,
toggle on -> after reloading page, toggle got off
state not saving

[princevora]

ah sorry, toggle on -> after reloading page, toggle got off state not saving

It was calling the function before initializing the html values, its fixed now

[prem-k-r]

great

[prem-k-r]

I just realised a case.. search engine dropdown menu should hide automatically when resultBox from search suggestions pops up

[princevora]

I just realised a case.. search engine dropdown menu should hide automatically when resultBox from search suggestions pops up

done