From eadd74b04c1357718748f3c5c33a04bf81ba212d Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Mon, 13 Jan 2025 09:46:21 +0530
Subject: [PATCH 01/20] added a basic search mode categorization

---
 index.html |  2 +-
 script.js  | 11 +++++++++++
 style.css  |  5 +++++
 3 files changed, 17 insertions(+), 1 deletion(-)

diff --git a/index.html b/index.html
index 6b36c2fb..5cc563d7 100644
--- a/index.html
+++ b/index.html
@@ -722,7 +722,7 @@ <h3 id="bookmarkViewAs">View as</h3>
             <!-- ----------search with------------------- -->
             <div class="searchWithCont" style="visibility: hidden;" id="search-with-container">
 
-                <div class="hint bgLightTint" id="searchWithHint">Search With</div>
+                <div class="hint bgLightTint" id="searchWithHint"></div>
 
                 <div class="searchEnginesContainer">
                     <div class="search-engine bgLightTint">
diff --git a/script.js b/script.js
index 5cab8cf2..eef51cb9 100644
--- a/script.js
+++ b/script.js
@@ -1119,6 +1119,17 @@ document.addEventListener('click', function (event) {
     }
 });
 
+//Search mode function
+const searchWith = document.getElementById('searchWithHint');
+searchWith.addEventListener('click', function () {
+    if (searchWith.innerText === 'Search With') {
+        searchWith.innerText = 'Search On';
+        
+    } else {
+        searchWith.innerText = 'Search With';
+    }
+});
+
 // Search function
 document.addEventListener("DOMContentLoaded", () => {
     const dropdown = document.querySelector('.dropdown-content');
diff --git a/style.css b/style.css
index 0be2dce4..0f1ea2f2 100644
--- a/style.css
+++ b/style.css
@@ -1586,6 +1586,11 @@ body {
 	right: -20px;
 }
 
+.searchWithCont .hint:hover{
+	background-color: var(--darkColor-blue);
+	color: #fff;
+}
+
 .searchEnginesContainer {
 	display: flex;
 	flex-wrap: wrap;

From 56e1529d156cd8fa0ceafc592c8c1096ef111b6c Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Mon, 13 Jan 2025 10:26:50 +0530
Subject: [PATCH 02/20] added basic search mode categorization 2

---
 .vscode/settings.json | 3 +++
 script.js             | 2 +-
 2 files changed, 4 insertions(+), 1 deletion(-)
 create mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
new file mode 100644
index 00000000..6f3a2913
--- /dev/null
+++ b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
\ No newline at end of file
diff --git a/script.js b/script.js
index eef51cb9..25c73933 100644
--- a/script.js
+++ b/script.js
@@ -1119,7 +1119,7 @@ document.addEventListener('click', function (event) {
     }
 });
 
-//Search mode function
+// Search mode function
 const searchWith = document.getElementById('searchWithHint');
 searchWith.addEventListener('click', function () {
     if (searchWith.innerText === 'Search With') {

From 0526ff579af33bee7277484220ec6a6eadfcaf5c Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Tue, 14 Jan 2025 00:29:57 +0530
Subject: [PATCH 03/20] added gitignore added search mode categorization

---
 .gitignore        |  1 +
 index.html        | 17 +++++++++--------
 scripts/script.js | 19 ++++++++++++++++++-
 3 files changed, 28 insertions(+), 9 deletions(-)
 create mode 100644 .gitignore

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 00000000..dbe9c82b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+.vscode/
\ No newline at end of file
diff --git a/index.html b/index.html
index d0535b3a..786fa7a4 100644
--- a/index.html
+++ b/index.html
@@ -758,7 +758,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                 <div class="hint bgLightTint" id="searchWithHint"></div>
 
                 <div class="searchEnginesContainer">
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/google.svg" alt="G" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -770,7 +770,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input checked class="radio-button" name="search-engine" type="radio" value="engine1">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/duck.svg" alt="D" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF00ff" height="28" rx="14" width="28" />
@@ -782,7 +782,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input class="radio-button" name="search-engine" type="radio" value="engine2">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/bing.svg" alt="B" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -790,11 +790,11 @@ <h3 id="bookmarkViewAs">View as</h3>
                                 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" />
                         </svg>
-                        <label class="engine-name" id="bingEngine">Bing</label>
+                        <label class="engine-name" id="bingEngine" data-category="search-with">Bing</label>
                         <input class="radio-button" name="search-engine" type="radio" value="engine3">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-with">
                         <!-- <img src="./svgs/brave.svg" alt="B" class="logo"> -->
                         <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 -0.5 24 24">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -806,7 +806,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <input class="radio-button" name="search-engine" type="radio" value="engine4">
                     </div>
 
-                    <div class="search-engine bgLightTint">
+                    <div class="search-engine bgLightTint" data-category="search-on">
                         <!-- <img src="./svgs/youtube.svg" alt="Y" class="logo"> -->
                         <svg fill="none" height="28" viewBox="0 0 28 28" width="28" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="28" rx="14" width="28" />
@@ -1036,7 +1036,8 @@ <h1>Material You NewTab</h1>
                         <div class="ttcont" id="adaptiveIconField">
                             <div class="texts">
                                 <div class="bigText" id="adaptiveIconText">Adaptive Icons</div>
-                                <div class="infoText" id="adaptiveIconInfoText">Shortcut icons will match the theme color and appear smaller
+                                <div class="infoText" id="adaptiveIconInfoText">Shortcut icons will match the theme
+                                    color and appear smaller
                                 </div>
                             </div>
                             <label class="switch">
@@ -1432,4 +1433,4 @@ <h1>Material You NewTab</h1>
 
 </body>
 
-</html>
+</html>
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
index 5b6f2419..78ee3ddb 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1209,15 +1209,32 @@ document.addEventListener("click", function (event) {
 
 // Search mode function
 const searchWith = document.getElementById('searchWithHint');
+const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
+
 searchWith.addEventListener('click', function () {
+    console.log('clicked');
     if (searchWith.innerText === 'Search With') {
         searchWith.innerText = 'Search On';
-        
+        toggleSearchEngines('search-on');
     } else {
         searchWith.innerText = 'Search With';
+        toggleSearchEngines('search-with');
     }
 });
 
+function toggleSearchEngines(category) {
+    searchEngines.forEach(engine => {
+        if (engine.getAttribute('data-category') === category) {
+            engine.style.display = 'flex';
+        } else {
+            engine.style.display = 'none';
+        }
+    });
+}
+
+// Initialize with "Search With" category visible
+toggleSearchEngines('search-with');
+
 // Search function
 document.addEventListener("DOMContentLoaded", () => {
     const dropdown = document.querySelector(".dropdown-content");

From 2d15a2c4e0016289a8da3088ffdd7bf705211488 Mon Sep 17 00:00:00 2001
From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com>
Date: Tue, 14 Jan 2025 01:50:03 +0530
Subject: [PATCH 04/20] Update .gitignore

---
 .gitignore | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/.gitignore b/.gitignore
index dbe9c82b..966e7a60 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1 +1,5 @@
-.vscode/
\ No newline at end of file
+# Ignore macOS system files
+.DS_Store
+
+# Ignore VSCode workspace settings
+.vscode/

From 7317f6a4bd178a3ddf92e398c54e406e895c961c Mon Sep 17 00:00:00 2001
From: ThunderBlaze <darkthunderstormshiva@gmail.com>
Date: Thu, 16 Jan 2025 23:26:39 +0530
Subject: [PATCH 05/20] Added Toggling

---
 scripts/script.js | 39 +++++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 12 deletions(-)

diff --git a/scripts/script.js b/scripts/script.js
index 78ee3ddb..bfd659bf 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1211,30 +1211,31 @@ document.addEventListener("click", function (event) {
 const searchWith = document.getElementById('searchWithHint');
 const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
 
+let activeSearchMode = localStorage.getItem("activeSearchMode")
+
 searchWith.addEventListener('click', function () {
-    console.log('clicked');
-    if (searchWith.innerText === 'Search With') {
-        searchWith.innerText = 'Search On';
+    if (activeSearchMode === 'search-with') {
+        activeSearchMode = 'search-on';
         toggleSearchEngines('search-on');
     } else {
-        searchWith.innerText = 'Search With';
+        activeSearchMode = 'search-with'
         toggleSearchEngines('search-with');
     }
 });
 
 function toggleSearchEngines(category) {
+    const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`);
+    document.getElementById('searchWithHint').innerText = category.split("-").map((elem)=>{return elem[0].toUpperCase()+elem.substring(1)}).join(" ")
     searchEngines.forEach(engine => {
         if (engine.getAttribute('data-category') === category) {
             engine.style.display = 'flex';
         } else {
             engine.style.display = 'none';
         }
+        if (engine.lastElementChild.value === checkeditem){ engine.lastElementChild.click() }
     });
 }
 
-// Initialize with "Search With" category visible
-toggleSearchEngines('search-with');
-
 // Search function
 document.addEventListener("DOMContentLoaded", () => {
     const dropdown = document.querySelector(".dropdown-content");
@@ -1294,7 +1295,8 @@ document.addEventListener("DOMContentLoaded", () => {
             swapDropdown(selector);
             sortDropdown()
 
-            localStorage.setItem("selectedSearchEngine", radioButton.value);
+            localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+            localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
         });
     });
 
@@ -1313,7 +1315,8 @@ document.addEventListener("DOMContentLoaded", () => {
             swapDropdown(selector);
             sortDropdown()
 
-            localStorage.setItem("selectedSearchEngine", radioButton.value);
+            localStorage.setItem(`selectedSearchEngine-${radioButton.parentElement.dataset.category}`, radioButton.value);
+            localStorage.setItem(`activeSearchMode`, radioButton.parentElement.dataset.category);
         });
     });
 
@@ -1365,7 +1368,18 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     // Set selected search engine from local storage
-    const storedSearchEngine = localStorage.getItem("selectedSearchEngine");
+    let activeSearchMode = localStorage.getItem("activeSearchMode")
+    const storedSearchEngine = localStorage.getItem(`selectedSearchEngine-${activeSearchMode}`);
+
+    if (activeSearchMode) {
+        if (activeSearchMode !== 'search-with') {
+            searchWith.innerText = 'Search On';
+            toggleSearchEngines('search-on');
+        } else {
+            searchWith.innerText = 'Search With';
+            toggleSearchEngines('search-with');
+        }
+    }
 
     if (storedSearchEngine) {
         // Find Serial Number - SN with the help of charAt.
@@ -1440,8 +1454,9 @@ document.addEventListener("DOMContentLoaded", () => {
     // Event listener for search engine radio buttons
     searchEngineRadio.forEach((radio) => {
         radio.addEventListener("change", () => {
-            const selectedOption = document.querySelector('input[name="search-engine"]:checked').value;
-            localStorage.setItem("selectedSearchEngine", selectedOption);
+            const selectedOption = document.querySelector('input[name="search-engine"]:checked');
+            localStorage.setItem(`selectedSearchEngine-${selectedOption.parentElement.dataset.category}`, selectedOption.value);
+            localStorage.setItem(`activeSearchMode`, selectedOption.parentElement.dataset.category);
         });
     });
     // -----Theme stay changed even if user reload the page---

From 784f78aec513b003f7e054f7bdb2dcd3f391aae9 Mon Sep 17 00:00:00 2001
From: ThunderBlaze <darkthunderstormshiva@gmail.com>
Date: Thu, 16 Jan 2025 23:38:55 +0530
Subject: [PATCH 06/20] Added Fixes

---
 scripts/script.js | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/scripts/script.js b/scripts/script.js
index bfd659bf..37920536 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1211,7 +1211,7 @@ document.addEventListener("click", function (event) {
 const searchWith = document.getElementById('searchWithHint');
 const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
 
-let activeSearchMode = localStorage.getItem("activeSearchMode")
+let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
 
 searchWith.addEventListener('click', function () {
     if (activeSearchMode === 'search-with') {
@@ -1224,7 +1224,11 @@ searchWith.addEventListener('click', function () {
 });
 
 function toggleSearchEngines(category) {
-    const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`);
+    const defaultItems = {
+        'search-with' : "engine1",
+        'search-on' : "engine5",
+    }
+    const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
     document.getElementById('searchWithHint').innerText = category.split("-").map((elem)=>{return elem[0].toUpperCase()+elem.substring(1)}).join(" ")
     searchEngines.forEach(engine => {
         if (engine.getAttribute('data-category') === category) {
@@ -1368,7 +1372,7 @@ document.addEventListener("DOMContentLoaded", () => {
     });
 
     // Set selected search engine from local storage
-    let activeSearchMode = localStorage.getItem("activeSearchMode")
+    let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
     const storedSearchEngine = localStorage.getItem(`selectedSearchEngine-${activeSearchMode}`);
 
     if (activeSearchMode) {

From 741d0b69e480eb439e4e0a50c75f2578de63e9d7 Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Thu, 16 Jan 2025 23:43:22 +0530
Subject: [PATCH 07/20] fixed search mode bugs and animations added default
 search mode selection

---
 .vscode/settings.json |  3 --
 scripts/script.js     | 34 +++++++++++-----
 style.css             | 92 ++++++++++++++++++++++++++-----------------
 3 files changed, 80 insertions(+), 49 deletions(-)
 delete mode 100644 .vscode/settings.json

diff --git a/.vscode/settings.json b/.vscode/settings.json
deleted file mode 100644
index 6f3a2913..00000000
--- a/.vscode/settings.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-    "liveServer.settings.port": 5501
-}
\ No newline at end of file
diff --git a/scripts/script.js b/scripts/script.js
index 78ee3ddb..1366416a 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1210,9 +1210,9 @@ document.addEventListener("click", function (event) {
 // Search mode function
 const searchWith = document.getElementById('searchWithHint');
 const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
+const searchEnginesdiv = document.getElementsByClassName('.searchEnginesContainer');
 
 searchWith.addEventListener('click', function () {
-    console.log('clicked');
     if (searchWith.innerText === 'Search With') {
         searchWith.innerText = 'Search On';
         toggleSearchEngines('search-on');
@@ -1223,18 +1223,34 @@ searchWith.addEventListener('click', function () {
 });
 
 function toggleSearchEngines(category) {
-    searchEngines.forEach(engine => {
-        if (engine.getAttribute('data-category') === category) {
-            engine.style.display = 'flex';
-        } else {
-            engine.style.display = 'none';
-        }
-    });
+    const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
+    searchEnginesContainer.classList.remove('show'); // Hide container for animation and transition
+    
+    setTimeout(() => {
+        let firstEngineSet = false;
+
+        searchEngines.forEach(engine => {
+            if (engine.getAttribute('data-category') === category) {
+                engine.style.display = 'flex';
+
+                // Reset to the first engine(default) for the selected category
+                if (!firstEngineSet) {
+                    engine.querySelector('.radio-button').checked = true;
+                    firstEngineSet = true;
+                }
+            } else {
+                engine.style.display = 'none';
+            }
+        });
+
+        searchEnginesContainer.classList.add('show'); // Show the updated container
+    }, 400); // Matches the CSS transition duration
 }
 
-// Initialize with "Search With" category visible
+// Initialize the search engine selection when page loads can further be optimized by using the local storage
 toggleSearchEngines('search-with');
 
+
 // Search function
 document.addEventListener("DOMContentLoaded", () => {
     const dropdown = document.querySelector(".dropdown-content");
diff --git a/style.css b/style.css
index 71c68203..055be18a 100644
--- a/style.css
+++ b/style.css
@@ -1584,59 +1584,77 @@ body #bookmarkButton.bookmark-button.rotate {
 /* ________________End of Searchbar______________________ */
 
 .searchWithCont {
-	margin-top: var(--gap);
-	border-radius: var(--round);
-	position: relative;
-	display: flex;
-	font-size: 1rem;
+    margin-top: var(--gap);
+    border-radius: var(--round);
+    position: relative;
+    display: flex;
+    font-size: 1rem;
+    z-index: 2; /* Ensures it's above the engines container */
+    overflow: hidden; /* Prevents child elements from overflowing outside */
+	max-width: 100%;
 }
 
 .searchWithCont .hint {
-	/* background-color: var(--accentLightTint-blue); */
-	width: 200px;
-	height: 100px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	padding: 10px;
-	position: relative;
-	margin-right: 16px;
-	border-radius: var(--round);
+    flex: 0 0 auto; /* Prevents it from growing */
+    width: 150px; /* Fixed width */
+    height: 100px;
+    white-space: nowrap; /* Prevents text from wrapping when search modes are changed*/
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+    position: relative;
+    margin-right: 16px;
+    border-radius: var(--round);
 }
 
+
 .searchWithCont .hint::after {
-	content: "";
-	position: absolute;
-	width: 6px;
-	height: 100%;
-	background-color: var(--accentLightTint-blue);
-	border-radius: 3px;
-	right: -20px;
+    content: "";
+    position: absolute;
+    width: 6px;
+    height: 100%;
+    background-color: var(--accentLightTint-blue);
+    border-radius: 3px;
+    right: -20px;
 }
 
-.searchWithCont .hint:hover{
-	background-color: var(--darkColor-blue);
-	color: #fff;
+.searchWithCont .hint:hover {
+    background-color: var(--darkColor-blue);
+    color: #fff;
 }
 
 .searchEnginesContainer {
-	display: flex;
-	flex-wrap: wrap;
-	gap: 20px;
-	padding-left: 20px;
+    position: relative; 
+    z-index: 1; 
+    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
+    display: flex;
+    flex-wrap: wrap;
+    gap: 20px;
+    padding-left: 20px;
+    transform: translateX(100%);
+    opacity: 0.2; 
+}
+
+.searchEnginesContainer.show {
+    transform: translateX(0); /* Brings it into view */
+    opacity: 1; 
 }
 
+
 .searchEnginesContainer .search-engine {
-	/* background-color: var(--accentLightTint-blue); */
-	border-radius: 20px;
-	height: 40px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-	cursor: pointer;
+    border-radius: 20px;
+    height: 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    cursor: pointer;
+    opacity: 1;
+    transition: opacity 0.3s ease-in-out;
 }
 
+
 .searchEnginesContainer .search-engine svg{
 	width: 30px;
 	height: 30px;

From ffadf1b2ea5766bad3419a76ad570bd353a571d0 Mon Sep 17 00:00:00 2001
From: ThunderBlaze <darkthunderstormshiva@gmail.com>
Date: Fri, 17 Jan 2025 10:54:33 +0530
Subject: [PATCH 08/20] Ripple Effect and Translations

---
 locales/en.js     |  1 +
 scripts/script.js |  7 ++++---
 style.css         | 46 +++++++++++++++++++++++++++++++++++++++-------
 3 files changed, 44 insertions(+), 10 deletions(-)

diff --git a/locales/en.js b/locales/en.js
index add0782d..99ae1416 100644
--- a/locales/en.js
+++ b/locales/en.js
@@ -92,6 +92,7 @@ const en = {
     "searchPlaceholder": "Type here...",
     "listenPlaceholder": "Listening...",
     "searchWithHint": "Search With",
+    "searchOnHint": "Search On",
     "userText": "Click here to edit",
 
     // Greeting
diff --git a/scripts/script.js b/scripts/script.js
index f8749875..dda93057 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1234,7 +1234,8 @@ function toggleSearchEngines(category) {
             'search-on' : "engine5",
         }
         const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
-        document.getElementById('searchWithHint').innerText = category.split("-").map((elem)=>{return elem[0].toUpperCase()+elem.substring(1)}).join(" ")
+        const namee = category.split("-").map((elem,index)=>{return ((index==0) ? elem[0] : elem[0].toUpperCase())+elem.substring(1)}).join("")+"Hint";
+        document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
 
         searchEngines.forEach(engine => {
             if (engine.getAttribute('data-category') === category) {
@@ -1386,10 +1387,10 @@ document.addEventListener("DOMContentLoaded", () => {
 
     if (activeSearchMode) {
         if (activeSearchMode !== 'search-with') {
-            searchWith.innerText = 'Search On';
+            searchWith.innerText = translations[currentLanguage].searchOnHint || translations['en'].searchOnHint;
             toggleSearchEngines('search-on');
         } else {
-            searchWith.innerText = 'Search With';
+            searchWith.innerText = translations[currentLanguage].searchWithHint || translations['en'].searchWithHint;
             toggleSearchEngines('search-with');
         }
     }
diff --git a/style.css b/style.css
index 055be18a..1ebd9ff2 100644
--- a/style.css
+++ b/style.css
@@ -1605,18 +1605,50 @@ body #bookmarkButton.bookmark-button.rotate {
     padding: 10px;
     position: relative;
     margin-right: 16px;
+	transition: all 0.3s ease;
     border-radius: var(--round);
 }
 
 
 .searchWithCont .hint::after {
-    content: "";
-    position: absolute;
-    width: 6px;
-    height: 100%;
-    background-color: var(--accentLightTint-blue);
-    border-radius: 3px;
-    right: -20px;
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 100%;
+	background-color: var(--accentLightTint-blue);
+	border-radius: 3px;
+	right: -20px;
+}
+
+.searchWithCont .hint::before {
+	content: "";
+	position: absolute;
+	height: auto;
+	width: 100%;
+	aspect-ratio: 1;
+	background-color: var(--accentLightTint-blue);
+	border-radius: 300px;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+	transform-origin: top left;
+	opacity: 0;
+}
+
+.searchWithCont .hint:active:before {
+	animation: ripple_effect 0.3s ease 1 forwards;
+	-webkit-animation: ripple_effect 0.3s ease 1 forwards;
+}
+
+@keyframes ripple_effect {
+	0% {
+		scale: 0;
+		opacity: 1;
+	} 100% {
+		scale: 1;
+		opacity: 0;
+	}
 }
 
 .searchWithCont .hint:hover {

From dbe60ff4acab62f24eb98c762540622ec5793430 Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Fri, 17 Jan 2025 16:44:29 +0530
Subject: [PATCH 09/20] fixed ripple effect on search button

---
 style.css | 53 +++++++++++++++++++++++++++++------------------------
 1 file changed, 29 insertions(+), 24 deletions(-)

diff --git a/style.css b/style.css
index 1ebd9ff2..fe459917 100644
--- a/style.css
+++ b/style.css
@@ -1605,7 +1605,7 @@ body #bookmarkButton.bookmark-button.rotate {
     padding: 10px;
     position: relative;
     margin-right: 16px;
-	transition: all 0.3s ease;
+	transition: all 0.4s ease;
     border-radius: var(--round);
 }
 
@@ -1621,34 +1621,39 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchWithCont .hint::before {
-	content: "";
-	position: absolute;
-	height: auto;
-	width: 100%;
-	aspect-ratio: 1;
-	background-color: var(--accentLightTint-blue);
-	border-radius: 300px;
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-	transform-origin: top left;
-	opacity: 0;
+    content: "";
+    position: absolute;
+    height: auto;
+    width: 100%;
+    aspect-ratio: 1;
+    background-color: var(--accentLightTint-blue);
+    border-radius: 50%;  /* Changed from 300px to 50% for perfect circle */
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 1;
+    transform-origin: center;  /* Changed to center for better scaling */
+    opacity: 0;
+    pointer-events: none;  /* Ensures the ripple doesn't interfere with clicks */
 }
 
-.searchWithCont .hint:active:before {
-	animation: ripple_effect 0.3s ease 1 forwards;
-	-webkit-animation: ripple_effect 0.3s ease 1 forwards;
+.searchWithCont .hint:active::before {
+    animation: ripple_effect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+    /* Using cubic-bezier for smoother easing */
 }
 
 @keyframes ripple_effect {
-	0% {
-		scale: 0;
-		opacity: 1;
-	} 100% {
-		scale: 1;
-		opacity: 0;
-	}
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0.40;  /* Reduced initial opacity */
+    }
+    50% {
+        opacity: 0.20;  /* Mid-point opacity for smoother fade */
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(2);  /* Increased scale for bigger effect */
+        opacity: 0;
+    }
 }
 
 .searchWithCont .hint:hover {

From 970f55eb94f66ec6cc067afd627e3c9f99003fad Mon Sep 17 00:00:00 2001
From: ashesbloom <mayank.pandey232@lpu.in>
Date: Sun, 19 Jan 2025 15:08:16 +0530
Subject: [PATCH 10/20] fixd loading animation trigger fixed ripple effect
 leaking out of the button fixed bugs

---
 scripts/script.js | 45 +++++++++++++--------------
 style.css         | 78 +++++++++++++++++++++++++----------------------
 2 files changed, 63 insertions(+), 60 deletions(-)

diff --git a/scripts/script.js b/scripts/script.js
index dda93057..e1761de9 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -1210,44 +1210,41 @@ document.addEventListener("click", function (event) {
 // Search mode function
 const searchWith = document.getElementById('searchWithHint');
 const searchEngines = document.querySelectorAll('.searchEnginesContainer .search-engine');
-
+const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
 let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
-const searchEnginesdiv = document.getElementsByClassName('.searchEnginesContainer');
 
 searchWith.addEventListener('click', function () {
     if (activeSearchMode === 'search-with') {
         activeSearchMode = 'search-on';
+        searchEnginesContainer.classList.toggle('show');
         toggleSearchEngines('search-on');
     } else {
         activeSearchMode = 'search-with'
+        searchEnginesContainer.classList.toggle('show');
         toggleSearchEngines('search-with');
     }
+    setTimeout(() => {
+        searchEnginesContainer.classList.remove('show');
+    }, 300);
 });
 
 function toggleSearchEngines(category) {
-    const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
-    searchEnginesContainer.classList.remove('show'); // Hide container for animation and transition
-    
-    setTimeout(() => {
-        const defaultItems = {
-            'search-with' : "engine1",
-            'search-on' : "engine5",
-        }
-        const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
-        const namee = category.split("-").map((elem,index)=>{return ((index==0) ? elem[0] : elem[0].toUpperCase())+elem.substring(1)}).join("")+"Hint";
-        document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
-
-        searchEngines.forEach(engine => {
-            if (engine.getAttribute('data-category') === category) {
-                engine.style.display = 'flex';
-            } else {
-                engine.style.display = 'none';
-            }
-            if (engine.lastElementChild.value === checkeditem){ engine.lastElementChild.click() }
-        });
+    const defaultItems = {
+        'search-with' : "engine1",
+        'search-on' : "engine5",
+    }
+    const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
+    const namee = category.split("-").map((elem,index)=>{return ((index==0) ? elem[0] : elem[0].toUpperCase())+elem.substring(1)}).join("")+"Hint";
+    document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
 
-        searchEnginesContainer.classList.add('show'); // Show the updated container
-    }, 400); // Matches the CSS transition duration
+    searchEngines.forEach(engine => {
+        if (engine.getAttribute('data-category') === category) {
+            engine.style.display = 'flex';
+        } else {
+            engine.style.display = 'none';
+        }
+        if (engine.lastElementChild.value === checkeditem){ engine.lastElementChild.click() }
+    });
 }
 
 // Search function
diff --git a/style.css b/style.css
index fe459917..c3da8ed9 100644
--- a/style.css
+++ b/style.css
@@ -1595,21 +1595,20 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchWithCont .hint {
-    flex: 0 0 auto; /* Prevents it from growing */
-    width: 150px; /* Fixed width */
-    height: 100px;
-    white-space: nowrap; /* Prevents text from wrapping when search modes are changed*/
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 10px;
-    position: relative;
-    margin-right: 16px;
-	transition: all 0.4s ease;
-    border-radius: var(--round);
+	flex: 0 0 auto; /* Prevents it from growing */
+	width: 150px; /* Fixed width */
+	height: 100px;
+	white-space: nowrap; /* Prevents text from wrapping when search modes are changed*/
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: 10px;
+	position: relative;
+	margin-right: 16px;
+	border-radius: var(--round);
+	transition: transform 0.4s ease;
 }
 
-
 .searchWithCont .hint::after {
 	content: "";
 	position: absolute;
@@ -1621,25 +1620,25 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchWithCont .hint::before {
-    content: "";
-    position: absolute;
-    height: auto;
-    width: 100%;
-    aspect-ratio: 1;
-    background-color: var(--accentLightTint-blue);
-    border-radius: 50%;  /* Changed from 300px to 50% for perfect circle */
-    left: 50%;
-    top: 50%;
-    transform: translate(-50%, -50%);
-    z-index: 1;
-    transform-origin: center;  /* Changed to center for better scaling */
-    opacity: 0;
-    pointer-events: none;  /* Ensures the ripple doesn't interfere with clicks */
+	content: "";
+	position: absolute;
+	height: auto;
+	width: 100%;
+	aspect-ratio: 1;
+	background-color: var(--accentLightTint-blue);
+	border-radius: 50%;  /* Changed from 300px to 50% for perfect circle */
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	z-index: 1;
+	transform-origin: center;  /* Changed to center for better scaling */
+	opacity: 0;
+	pointer-events: none;  /* Ensures the ripple doesn't interfere with clicks */
 }
 
 .searchWithCont .hint:active::before {
-    animation: ripple_effect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-    /* Using cubic-bezier for smoother easing */
+	animation: ripple_effect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
+	/* Using cubic-bezier for smoother easing */
 }
 
 @keyframes ripple_effect {
@@ -1664,20 +1663,27 @@ body #bookmarkButton.bookmark-button.rotate {
 .searchEnginesContainer {
     position: relative; 
     z-index: 1; 
-    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
     display: flex;
     flex-wrap: wrap;
     gap: 20px;
     padding-left: 20px;
-    transform: translateX(100%);
-    opacity: 0.2; 
-}
-
-.searchEnginesContainer.show {
-    transform: translateX(0); /* Brings it into view */
     opacity: 1; 
+	transform: translateX(0);
+}
+.searchEnginesContainer.show{
+	animation: slideIn 0.3s ease-in-out forwards;
 }
 
+@keyframes slideIn {
+	from {
+		transform: translateX(100%);
+		opacity: 0.2;
+	}
+	to {
+		transform: translateX(0);
+		opacity: 1;
+	}
+}
 
 .searchEnginesContainer .search-engine {
     border-radius: 20px;

From 51e5a0de0f8c849533c0e459bfeba8fe06fad185 Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Sat, 22 Feb 2025 12:47:20 +0530
Subject: [PATCH 11/20] indentation and click effect

---
 index.html |  2 +-
 style.css  | 90 +++++++++++++++++++-----------------------------------
 2 files changed, 32 insertions(+), 60 deletions(-)

diff --git a/index.html b/index.html
index f52562f0..7874a22f 100644
--- a/index.html
+++ b/index.html
@@ -764,7 +764,7 @@ <h3 id="bookmarkViewAs">View as</h3>
             <!-- ----------search with------------------- -->
             <div class="searchWithCont" style="visibility: hidden;" id="search-with-container">
 
-                <div class="hint bgLightTint" id="searchWithHint"></div>
+                <div class="hint bgLightTint" id="searchWithHint">Search With</div>
 
                 <div class="searchEnginesContainer">
                     <div class="search-engine bgLightTint" data-category="search-with">
diff --git a/style.css b/style.css
index 5f306fa9..35e6e65a 100644
--- a/style.css
+++ b/style.css
@@ -1630,13 +1630,13 @@ body #bookmarkButton.bookmark-button.rotate {
 /* ________________End of Searchbar______________________ */
 
 .searchWithCont {
-    margin-top: var(--gap);
-    border-radius: var(--round);
-    position: relative;
-    display: flex;
-    font-size: 1rem;
-    z-index: 2; /* Ensures it's above the engines container */
-    overflow: hidden; /* Prevents child elements from overflowing outside */
+	margin-top: var(--gap);
+	border-radius: 20px;
+	position: relative;
+	display: flex;
+	font-size: 1rem;
+	z-index: 2; /* Ensures it's above the engines container */
+	overflow: hidden; /* Prevents child elements from overflowing outside */
 	max-width: 100%;
 }
 
@@ -1665,58 +1665,30 @@ body #bookmarkButton.bookmark-button.rotate {
 	right: -20px;
 }
 
-.searchWithCont .hint::before {
-	content: "";
-	position: absolute;
-	height: auto;
-	width: 100%;
-	aspect-ratio: 1;
-	background-color: var(--accentLightTint-blue);
-	border-radius: 50%;  /* Changed from 300px to 50% for perfect circle */
-	left: 50%;
-	top: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-	transform-origin: center;  /* Changed to center for better scaling */
-	opacity: 0;
-	pointer-events: none;  /* Ensures the ripple doesn't interfere with clicks */
-}
-
-.searchWithCont .hint:active::before {
-	animation: ripple_effect 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
-	/* Using cubic-bezier for smoother easing */
+.searchWithCont .hint:hover {
+	background-color: var(--darkColor-blue);
+	color: #fff;
 }
 
-@keyframes ripple_effect {
-    0% {
-        transform: translate(-50%, -50%) scale(0);
-        opacity: 0.40;  /* Reduced initial opacity */
-    }
-    50% {
-        opacity: 0.20;  /* Mid-point opacity for smoother fade */
-    }
-    100% {
-        transform: translate(-50%, -50%) scale(2);  /* Increased scale for bigger effect */
-        opacity: 0;
-    }
+.searchWithCont .hint:active {
+	scale: 0.98;
 }
 
-.searchWithCont .hint:hover {
-    background-color: var(--darkColor-blue);
-    color: #fff;
+.searchWithCont .hint:active::after {
+	transform: none;
 }
 
 .searchEnginesContainer {
-    position: relative; 
-    z-index: 1; 
-    display: flex;
-    flex-wrap: wrap;
-    gap: 20px;
-    padding-left: 20px;
-    opacity: 1; 
+	position: relative;
+	z-index: 1;
+	display: flex;
+	flex-wrap: wrap;
+	gap: 20px;
+	padding-left: 20px;
+	opacity: 1;
 	transform: translateX(0);
 }
-.searchEnginesContainer.show{
+.searchEnginesContainer.show {
 	animation: slideIn 0.3s ease-in-out forwards;
 }
 
@@ -1732,15 +1704,15 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchEnginesContainer .search-engine {
-    border-radius: 20px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    position: relative;
-    cursor: pointer;
-    opacity: 1;
-    transition: opacity 0.3s ease-in-out;
+	border-radius: 20px;
+	height: 40px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+	cursor: pointer;
+	opacity: 1;
+	transition: opacity 0.3s ease-in-out;
 }
 
 .searchEnginesContainer .search-engine svg {

From 43aaf55f61affffa9fe5133d9ad1507e2c14a660 Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Sat, 22 Feb 2025 14:32:36 +0530
Subject: [PATCH 12/20] Added Google Images and Wikipedia

---
 index.html                    | 46 +++++++++++++++++++++++++++++++++++
 locales/en.js                 |  2 ++
 locales/hi.js                 |  2 ++
 manifest(firefox).json        |  3 ++-
 manifest.json                 |  3 ++-
 scripts/languages.js          |  4 +++
 scripts/script.js             | 13 ++++++----
 scripts/search-suggestions.js |  9 +++++--
 style.css                     |  4 +--
 9 files changed, 75 insertions(+), 11 deletions(-)

diff --git a/index.html b/index.html
index 7874a22f..1947dd48 100644
--- a/index.html
+++ b/index.html
@@ -713,6 +713,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                                     Bing
                                 </span>
                             </div>
+
                             <div data-engine="4" data-engine-name="brave" id="brave-dropdown" class="dropdown-item">
                                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                                     <rect class="accentColor" height="24" rx="12" width="24" />
@@ -725,6 +726,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                                     Brave
                                 </span>
                             </div>
+
                             <div data-engine="5" data-engine-name="youtube" id="youtube-dropdown" class="dropdown-item">
                                 <svg fill="none" height="28" viewBox="0 0 28 28" width="28"
                                     xmlns="http://www.w3.org/2000/svg">
@@ -738,6 +740,28 @@ <h3 id="bookmarkViewAs">View as</h3>
                                     YouTube
                                 </span>
                             </div>
+
+                            <div data-engine="6" data-engine-name="gImages" id="gImages-dropdown" class="dropdown-item">
+                                <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
+                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
+                                        style="transform: scale(0.8); transform-origin: center;"
+                                        d="M 24.84375 0 C 24.351563 0.078125 23.992188 0.503906 24 1 L 24 11 L 13 11 C 12.96875 11 12.9375 11 12.90625 11 C 12.65625 11.019531 12.421875 11.128906 12.25 11.3125 L 12.25 11.34375 C 12.226563 11.363281 12.207031 11.382813 12.1875 11.40625 L 0.25 24.3125 C -0.0273438 24.605469 -0.101563 25.039063 0.0625 25.40625 C 0.226563 25.777344 0.597656 26.007813 1 26 L 11 26 L 11 37 C 10.992188 37.28125 11.105469 37.554688 11.3125 37.75 L 24.3125 49.75 C 24.605469 50.027344 25.039063 50.101563 25.40625 49.9375 C 25.777344 49.773438 26.007813 49.402344 26 49 L 26 39 L 37 39 C 37.28125 39.007813 37.554688 38.894531 37.75 38.6875 L 49.75 25.6875 C 50.027344 25.394531 50.101563 24.960938 49.9375 24.59375 C 49.773438 24.222656 49.402344 23.992188 49 24 L 39 24 L 39 13 C 39.007813 12.71875 38.894531 12.445313 38.6875 12.25 L 25.6875 0.25 C 25.460938 0.0390625 25.148438 -0.0507813 24.84375 0 Z M 26 3.3125 L 36.5 13 L 27.25 22.25 C 26.480469 21.363281 26 20.210938 26 18.9375 L 26 12 C 26 11.96875 26 11.9375 26 11.90625 Z M 13 13.5 L 22.25 22.75 C 21.363281 23.519531 20.210938 24 18.9375 24 L 3.3125 24 Z M 25 22.5625 C 25.597656 23.558594 26.441406 24.402344 27.4375 25 C 26.441406 25.597656 25.597656 26.441406 25 27.4375 C 24.402344 26.441406 23.558594 25.597656 22.5625 25 C 23.558594 24.402344 24.402344 23.558594 25 22.5625 Z M 31.0625 26 L 46.6875 26 L 37 36.5 L 27.75 27.25 C 28.636719 26.480469 29.789063 26 31.0625 26 Z M 22.75 27.75 C 23.519531 28.636719 24 29.789063 24 31.0625 L 24 38 C 24 38.03125 24 38.0625 24 38.09375 L 24 46.6875 L 13.5 37 Z" />
+                                </svg>
+                                <span class="engine-name" id="gImagesEngineDD">Images</span>
+                            </div>
+
+                            <div data-engine="7" data-engine-name="wikipedia" id="wikipedia-dropdown"
+                                class="dropdown-item">
+                                <svg height="100%" width="100%" viewBox="0 -0.7 32 32"
+                                    xmlns="http://www.w3.org/2000/svg">
+                                    <rect class="accentColor" height="100%" rx="50%" width="100%" />
+                                    <path class="darkIconForDarkTheme" fill="#fffffff0"
+                                        style="transform: scale(0.85); transform-origin: center;"
+                                        d="M30 9.215a.31.31 0 0 1-.313.308h-1.68l-7.616 16.215a.31.31 0 0 1-.278.18h-.004a.31.31 0 0 1-.28-.172l-3.614-7.168l-3.902 7.18a.313.313 0 0 1-.555-.016L4.055 9.523H2.313A.31.31 0 0 1 2 9.215V8.39a.31.31 0 0 1 .313-.309h6.21a.31.31 0 0 1 .313.309v.824a.31.31 0 0 1-.313.308H7.188l5.316 12.262l2.766-5.168l-3.508-7.09h-.844a.313.313 0 0 1-.313-.312v-.82c0-.172.141-.313.313-.313h4.598a.31.31 0 0 1 .308.313v.82a.307.307 0 0 1-.308.308h-.813l2.02 4.415l2.402-4.415h-1.473a.31.31 0 0 1-.312-.308v-.82a.31.31 0 0 1 .312-.313h4.465a.31.31 0 0 1 .309.313v.82a.307.307 0 0 1-.309.308h-.98l-3.504 6.372l2.855 5.875L26 9.523h-1.746a.31.31 0 0 1-.313-.308v-.82c0-.172.141-.313.313-.313h5.433a.31.31 0 0 1 .313.313z" />
+                                </svg>
+                                <span class="engine-name" id="wikipediaEngineDD">Wikipedia</span>
+                            </div>
                         </div>
                     </div>
                 </div>
@@ -826,6 +850,28 @@ <h3 id="bookmarkViewAs">View as</h3>
                         <label class="engine-name" id="youtubeEngine">YouTube</label>
                         <input class="radio-button" name="search-engine" type="radio" value="engine5">
                     </div>
+
+                    <div class="search-engine bgLightTint" data-category="search-on">
+                        <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
+                            <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
+                            <path class="darkIconForDarkTheme" style="transform: scale(0.95); transform-origin: center;"
+                                d="M 24.84375 0 C 24.351563 0.078125 23.992188 0.503906 24 1 L 24 11 L 13 11 C 12.96875 11 12.9375 11 12.90625 11 C 12.65625 11.019531 12.421875 11.128906 12.25 11.3125 L 12.25 11.34375 C 12.226563 11.363281 12.207031 11.382813 12.1875 11.40625 L 0.25 24.3125 C -0.0273438 24.605469 -0.101563 25.039063 0.0625 25.40625 C 0.226563 25.777344 0.597656 26.007813 1 26 L 11 26 L 11 37 C 10.992188 37.28125 11.105469 37.554688 11.3125 37.75 L 24.3125 49.75 C 24.605469 50.027344 25.039063 50.101563 25.40625 49.9375 C 25.777344 49.773438 26.007813 49.402344 26 49 L 26 39 L 37 39 C 37.28125 39.007813 37.554688 38.894531 37.75 38.6875 L 49.75 25.6875 C 50.027344 25.394531 50.101563 24.960938 49.9375 24.59375 C 49.773438 24.222656 49.402344 23.992188 49 24 L 39 24 L 39 13 C 39.007813 12.71875 38.894531 12.445313 38.6875 12.25 L 25.6875 0.25 C 25.460938 0.0390625 25.148438 -0.0507813 24.84375 0 Z M 26 3.3125 L 36.5 13 L 27.25 22.25 C 26.480469 21.363281 26 20.210938 26 18.9375 L 26 12 C 26 11.96875 26 11.9375 26 11.90625 Z M 13 13.5 L 22.25 22.75 C 21.363281 23.519531 20.210938 24 18.9375 24 L 3.3125 24 Z M 25 22.5625 C 25.597656 23.558594 26.441406 24.402344 27.4375 25 C 26.441406 25.597656 25.597656 26.441406 25 27.4375 C 24.402344 26.441406 23.558594 25.597656 22.5625 25 C 23.558594 24.402344 24.402344 23.558594 25 22.5625 Z M 31.0625 26 L 46.6875 26 L 37 36.5 L 27.75 27.25 C 28.636719 26.480469 29.789063 26 31.0625 26 Z M 22.75 27.75 C 23.519531 28.636719 24 29.789063 24 31.0625 L 24 38 C 24 38.03125 24 38.0625 24 38.09375 L 24 46.6875 L 13.5 37 Z"
+                                fill="white" />
+                        </svg>
+                        <label class="engine-name" id="gImagesEngine">Images</label>
+                        <input class="radio-button" name="search-engine" type="radio" value="engine6">
+                    </div>
+
+                    <div class="search-engine bgLightTint" data-category="search-on">
+                        <svg height="100%" width="100%" viewBox="0 -0.5 32 32" xmlns="http://www.w3.org/2000/svg">
+                            <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
+                            <path class="darkIconForDarkTheme"
+                                d="M30 9.215a.31.31 0 0 1-.313.308h-1.68l-7.616 16.215a.31.31 0 0 1-.278.18h-.004a.31.31 0 0 1-.28-.172l-3.614-7.168l-3.902 7.18a.313.313 0 0 1-.555-.016L4.055 9.523H2.313A.31.31 0 0 1 2 9.215V8.39a.31.31 0 0 1 .313-.309h6.21a.31.31 0 0 1 .313.309v.824a.31.31 0 0 1-.313.308H7.188l5.316 12.262l2.766-5.168l-3.508-7.09h-.844a.313.313 0 0 1-.313-.312v-.82c0-.172.141-.313.313-.313h4.598a.31.31 0 0 1 .308.313v.82a.307.307 0 0 1-.308.308h-.813l2.02 4.415l2.402-4.415h-1.473a.31.31 0 0 1-.312-.308v-.82a.31.31 0 0 1 .312-.313h4.465a.31.31 0 0 1 .309.313v.82a.307.307 0 0 1-.309.308h-.98l-3.504 6.372l2.855 5.875L26 9.523h-1.746a.31.31 0 0 1-.313-.308v-.82c0-.172.141-.313.313-.313h5.433a.31.31 0 0 1 .313.313z"
+                                fill="white" />
+                        </svg>
+                        <label class="engine-name" id="wikipediaEngine">Wikipedia</label>
+                        <input class="radio-button" name="search-engine" type="radio" value="engine7">
+                    </div>
                 </div>
             </div>
             <!-- ----------end of search with------------- -->
diff --git a/locales/en.js b/locales/en.js
index b0296152..edf8f998 100644
--- a/locales/en.js
+++ b/locales/en.js
@@ -114,6 +114,8 @@ const en = {
     "bingEngine": "Bing",
     "braveEngine": "Brave",
     "youtubeEngine": "YouTube",
+    "gImagesEngine": "Images",
+    "wikipediaEngine": "Wikipedia",
 
     // AI Tools
     "ai_tools": "AI Tools",
diff --git a/locales/hi.js b/locales/hi.js
index 2289e3ca..9fe6345f 100644
--- a/locales/hi.js
+++ b/locales/hi.js
@@ -111,6 +111,8 @@ const hi = {
     "bingEngine": "बिंग",
     "braveEngine": "ब्रेव",
     "youtubeEngine": "यूट्यूब",
+    "gImagesEngine": "इमेज़्स",
+    "wikipediaEngine": "विकिपीडिया",
 
     // AI Tools
     "ai_tools": "AI उपकरण",
diff --git a/manifest(firefox).json b/manifest(firefox).json
index ef0c2c4b..9c442a9c 100644
--- a/manifest(firefox).json
+++ b/manifest(firefox).json
@@ -7,7 +7,8 @@
 		"bookmarks",
 		"https://www.google.com/complete/search*",
 		"https://duckduckgo.com/ac/*",
-		"https://search.brave.com/api/suggest*"
+		"https://search.brave.com/api/suggest*",
+		"https://*.wikipedia.org/w/api.php?action=opensearch&search=*"
 	],
 	"background": {
 		"scripts": ["scripts/background.js"],
diff --git a/manifest.json b/manifest.json
index 844ddd16..aca2157e 100644
--- a/manifest.json
+++ b/manifest.json
@@ -7,7 +7,8 @@
 	"host_permissions": [
 		"https://www.google.com/complete/search*",
 		"https://duckduckgo.com/ac/*",
-		"https://search.brave.com/api/suggest*"
+		"https://search.brave.com/api/suggest*",
+		"https://*.wikipedia.org/w/api.php?action=opensearch&search=*"
 	],
 	"icons": {
 		"16": "favicon/icon16.png",
diff --git a/scripts/languages.js b/scripts/languages.js
index a99a585a..78db4dfb 100644
--- a/scripts/languages.js
+++ b/scripts/languages.js
@@ -145,6 +145,8 @@ function applyLanguage(lang) {
         'bingEngine',
         'braveEngine',
         'youtubeEngine',
+        'gImagesEngine',
+        'wikipediaEngine',
         'chatGPT',
         'gemini',
         'copilot',
@@ -186,6 +188,8 @@ function applyLanguage(lang) {
         { id: 'bingEngineDD', key: 'bingEngine' },
         { id: 'braveEngineDD', key: 'braveEngine' },
         { id: 'youtubeEngineDD', key: 'youtubeEngine' },
+        { id: 'gImagesEngineDD', key: 'gImagesEngine' },
+        { id: 'wikipediaEngineDD', key: 'wikipediaEngine' },
         { id: 'bookmarksHover', key: 'bookmarksHeading' },
     ];
 
diff --git a/scripts/script.js b/scripts/script.js
index 4880984f..d1726d3b 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -53,11 +53,11 @@ searchWith.addEventListener('click', function () {
 
 function toggleSearchEngines(category) {
     const defaultItems = {
-        'search-with' : "engine1",
-        'search-on' : "engine5",
+        'search-with': "engine1",
+        'search-on': "engine5",
     }
     const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
-    const namee = category.split("-").map((elem,index)=>{return ((index==0) ? elem[0] : elem[0].toUpperCase())+elem.substring(1)}).join("")+"Hint";
+    const namee = category.split("-").map((elem, index) => { return ((index == 0) ? elem[0] : elem[0].toUpperCase()) + elem.substring(1) }).join("") + "Hint";
     document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
 
     searchEngines.forEach(engine => {
@@ -66,7 +66,7 @@ function toggleSearchEngines(category) {
         } else {
             engine.style.display = 'none';
         }
-        if (engine.lastElementChild.value === checkeditem){ engine.lastElementChild.click() }
+        if (engine.lastElementChild.value === checkeditem) { engine.lastElementChild.click() }
     });
 }
 
@@ -194,12 +194,15 @@ document.addEventListener("DOMContentLoaded", () => {
     function performSearch() {
         var selectedOption = document.querySelector('input[name="search-engine"]:checked').value;
         var searchTerm = searchInput.value;
+        const languageCode = (localStorage.getItem("selectedLanguage") || "en").slice(0, 2);
         var searchEngines = {
             engine1: "https://www.google.com/search?q=",
             engine2: "https://duckduckgo.com/?q=",
             engine3: "https://bing.com/?q=",
             engine4: "https://search.brave.com/search?q=",
-            engine5: "https://www.youtube.com/results?search_query="
+            engine5: "https://www.youtube.com/results?search_query=",
+            engine6: "https://www.google.com/search?tbm=isch&q=",
+            engine7: `https://${languageCode}.wikipedia.org/wiki/Special:Search?search=`
         };
 
         if (searchTerm !== "") {
diff --git a/scripts/search-suggestions.js b/scripts/search-suggestions.js
index 91dbfffd..a3f19d67 100644
--- a/scripts/search-suggestions.js
+++ b/scripts/search-suggestions.js
@@ -65,6 +65,7 @@ function hideResultBox() {
 showResultBox();
 hideResultBox();
 
+const languageCode = (localStorage.getItem("selectedLanguage") || "en").slice(0, 2);
 document.getElementById("searchQ").addEventListener("input", async function () {
     const searchsuggestionscheckbox = document.getElementById("searchsuggestionscheckbox");
     if (searchsuggestionscheckbox.checked) {
@@ -74,7 +75,9 @@ document.getElementById("searchQ").addEventListener("input", async function () {
             engine2: "https://duckduckgo.com/?q=",
             engine3: "https://bing.com/?q=",
             engine4: "https://search.brave.com/search?q=",
-            engine5: "https://www.youtube.com/results?search_query="
+            engine5: "https://www.youtube.com/results?search_query=",
+            engine6: "https://www.google.com/search?tbm=isch&q=",
+            engine7: `https://${languageCode}.wikipedia.org/wiki/Special:Search?search=`
         };
         const query = this.value;
         const resultBox = document.getElementById("resultBox");
@@ -189,7 +192,9 @@ async function getAutocompleteSuggestions(query) {
         engine2: `https://duckduckgo.com/ac/?q=${encodeURIComponent(query)}&type=list`,
         engine3: `https://www.google.com/complete/search?client=${clientParam}&q=${encodeURIComponent(query)}`,
         engine4: `https://search.brave.com/api/suggest?q=${encodeURIComponent(query)}&rich=true&source=web`,
-        engine5: `https://www.google.com/complete/search?client=${clientParam}&ds=yt&q=${encodeURIComponent(query)}`
+        engine5: `https://www.google.com/complete/search?client=${clientParam}&ds=yt&q=${encodeURIComponent(query)}`,
+        engine6: `https://www.google.com/complete/search?client=${clientParam}&q=${encodeURIComponent(query)}`,
+        engine7: `https://${languageCode}.wikipedia.org/w/api.php?action=opensearch&search=${encodeURIComponent(query)}&format=json`
     };
     const useproxyCheckbox = document.getElementById("useproxyCheckbox");
     let apiUrl = searchEnginesapi[selectedOption];
diff --git a/style.css b/style.css
index 35e6e65a..15b7edaa 100644
--- a/style.css
+++ b/style.css
@@ -1725,7 +1725,7 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchEnginesContainer .search-engine label {
-	margin: 0 16px 0 10px;
+	margin: 0 15px 0 10px;
 	cursor: pointer;
 }
 
@@ -2954,7 +2954,7 @@ input:checked + .toggle:before {
 	z-index: 1;
 	top: 50px;
 	left: -15px;
-	overflow: hidden;
+	overflow-y: auto;
 	max-height: 192px;
 }
 

From 32dfbf7b5992016af68f469dfaa959e11b497fdb Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Sat, 22 Feb 2025 16:35:00 +0530
Subject: [PATCH 13/20] fix search with/on display issue

and add helper text
---
 index.html           | 14 +++++++++++---
 locales/en.js        |  2 ++
 scripts/languages.js |  3 ++-
 3 files changed, 15 insertions(+), 4 deletions(-)

diff --git a/index.html b/index.html
index 1947dd48..8023d58d 100644
--- a/index.html
+++ b/index.html
@@ -788,7 +788,7 @@ <h3 id="bookmarkViewAs">View as</h3>
             <!-- ----------search with------------------- -->
             <div class="searchWithCont" style="visibility: hidden;" id="search-with-container">
 
-                <div class="hint bgLightTint" id="searchWithHint">Search With</div>
+                <div class="hint bgLightTint" id="searchWithHint"></div>
 
                 <div class="searchEnginesContainer">
                     <div class="search-engine bgLightTint" data-category="search-with">
@@ -854,7 +854,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                     <div class="search-engine bgLightTint" data-category="search-on">
                         <svg height="100%" width="100%" viewBox="0 0 50 50" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
-                            <path class="darkIconForDarkTheme" style="transform: scale(0.95); transform-origin: center;"
+                            <path class="darkIconForDarkTheme" style="transform: scale(0.92); transform-origin: center;"
                                 d="M 24.84375 0 C 24.351563 0.078125 23.992188 0.503906 24 1 L 24 11 L 13 11 C 12.96875 11 12.9375 11 12.90625 11 C 12.65625 11.019531 12.421875 11.128906 12.25 11.3125 L 12.25 11.34375 C 12.226563 11.363281 12.207031 11.382813 12.1875 11.40625 L 0.25 24.3125 C -0.0273438 24.605469 -0.101563 25.039063 0.0625 25.40625 C 0.226563 25.777344 0.597656 26.007813 1 26 L 11 26 L 11 37 C 10.992188 37.28125 11.105469 37.554688 11.3125 37.75 L 24.3125 49.75 C 24.605469 50.027344 25.039063 50.101563 25.40625 49.9375 C 25.777344 49.773438 26.007813 49.402344 26 49 L 26 39 L 37 39 C 37.28125 39.007813 37.554688 38.894531 37.75 38.6875 L 49.75 25.6875 C 50.027344 25.394531 50.101563 24.960938 49.9375 24.59375 C 49.773438 24.222656 49.402344 23.992188 49 24 L 39 24 L 39 13 C 39.007813 12.71875 38.894531 12.445313 38.6875 12.25 L 25.6875 0.25 C 25.460938 0.0390625 25.148438 -0.0507813 24.84375 0 Z M 26 3.3125 L 36.5 13 L 27.25 22.25 C 26.480469 21.363281 26 20.210938 26 18.9375 L 26 12 C 26 11.96875 26 11.9375 26 11.90625 Z M 13 13.5 L 22.25 22.75 C 21.363281 23.519531 20.210938 24 18.9375 24 L 3.3125 24 Z M 25 22.5625 C 25.597656 23.558594 26.441406 24.402344 27.4375 25 C 26.441406 25.597656 25.597656 26.441406 25 27.4375 C 24.402344 26.441406 23.558594 25.597656 22.5625 25 C 23.558594 24.402344 24.402344 23.558594 25 22.5625 Z M 31.0625 26 L 46.6875 26 L 37 36.5 L 27.75 27.25 C 28.636719 26.480469 29.789063 26 31.0625 26 Z M 22.75 27.75 C 23.519531 28.636719 24 29.789063 24 31.0625 L 24 38 C 24 38.03125 24 38.0625 24 38.09375 L 24 46.6875 L 13.5 37 Z"
                                 fill="white" />
                         </svg>
@@ -865,7 +865,7 @@ <h3 id="bookmarkViewAs">View as</h3>
                     <div class="search-engine bgLightTint" data-category="search-on">
                         <svg height="100%" width="100%" viewBox="0 -0.5 32 32" xmlns="http://www.w3.org/2000/svg">
                             <rect class="accentColor" fill="#FF000F" height="100%" rx="50%" width="100%" />
-                            <path class="darkIconForDarkTheme"
+                            <path class="darkIconForDarkTheme" style="transform: scale(0.95); transform-origin: center;"
                                 d="M30 9.215a.31.31 0 0 1-.313.308h-1.68l-7.616 16.215a.31.31 0 0 1-.278.18h-.004a.31.31 0 0 1-.28-.172l-3.614-7.168l-3.902 7.18a.313.313 0 0 1-.555-.016L4.055 9.523H2.313A.31.31 0 0 1 2 9.215V8.39a.31.31 0 0 1 .313-.309h6.21a.31.31 0 0 1 .313.309v.824a.31.31 0 0 1-.313.308H7.188l5.316 12.262l2.766-5.168l-3.508-7.09h-.844a.313.313 0 0 1-.313-.312v-.82c0-.172.141-.313.313-.313h4.598a.31.31 0 0 1 .308.313v.82a.307.307 0 0 1-.308.308h-.813l2.02 4.415l2.402-4.415h-1.473a.31.31 0 0 1-.312-.308v-.82a.31.31 0 0 1 .312-.313h4.465a.31.31 0 0 1 .309.313v.82a.307.307 0 0 1-.309.308h-.98l-3.504 6.372l2.855 5.875L26 9.523h-1.746a.31.31 0 0 1-.313-.308v-.82c0-.172.141-.313.313-.313h5.433a.31.31 0 0 1 .313.313z"
                                 fill="white" />
                         </svg>
@@ -1238,6 +1238,14 @@ <h1>Material You NewTab</h1>
                             </label>
                         </div>
 
+                        <div class="ttcont">
+                            <div class="texts">
+                                <div class="bigText" id="switchSearchModes">Switch Search Modes</div>
+                                <div class="infoText" id="switchSearchModesInfo">Click on ‘Search With’ to change the
+                                    mode</div>
+                            </div>
+                        </div>
+
                         <div class="ttcont">
                             <div class="texts">
                                 <div class="bigText" id="hideSearchWith">Hide Search Engines</div>
diff --git a/locales/en.js b/locales/en.js
index edf8f998..539a742e 100644
--- a/locales/en.js
+++ b/locales/en.js
@@ -50,6 +50,8 @@ const en = {
     // Search
     "micIconTitle": "Hide Microphone Icon",
     "micIconInfo": "If voice typing is not working",
+    "switchSearchModes": "Switch Search Modes",
+    "switchSearchModesInfo": "Click on ‘Search With’ to change the mode",
     "hideSearchWith": "Hide Search Engines",
     "hideSearchWithInfo": "Switch between search engines by clicking its icon",
     "search_suggestions_button": "Search Suggestions",
diff --git a/scripts/languages.js b/scripts/languages.js
index 78db4dfb..c3ee8c47 100644
--- a/scripts/languages.js
+++ b/scripts/languages.js
@@ -107,6 +107,8 @@ function applyLanguage(lang) {
         'hideWeatherBoxInfo',
         'micIconTitle',
         'micIconInfo',
+        'switchSearchModes',
+        'switchSearchModesInfo',
         'hideSearchWith',
         'hideSearchWithInfo',
         'search_suggestions_button',
@@ -135,7 +137,6 @@ function applyLanguage(lang) {
         'saveAPI',
         'conditionText',
         'enterBtn',
-        'searchWithHint',
         'ai_tools',
         'humidityLevel',
         'feelsLike',

From 79a31afc0fbaf84cd65b7b64d72e196920d4502c Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Sat, 22 Feb 2025 17:34:45 +0530
Subject: [PATCH 14/20] some fix and refactor

---
 scripts/script.js | 30 +++++++++++-------------------
 style.css         |  3 +--
 2 files changed, 12 insertions(+), 21 deletions(-)

diff --git a/scripts/script.js b/scripts/script.js
index d1726d3b..ef747cae 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -36,16 +36,14 @@ const searchEngines = document.querySelectorAll('.searchEnginesContainer .search
 const searchEnginesContainer = document.querySelector('.searchEnginesContainer');
 let activeSearchMode = localStorage.getItem("activeSearchMode") || "search-with";
 
-searchWith.addEventListener('click', function () {
-    if (activeSearchMode === 'search-with') {
-        activeSearchMode = 'search-on';
-        searchEnginesContainer.classList.toggle('show');
-        toggleSearchEngines('search-on');
-    } else {
-        activeSearchMode = 'search-with'
-        searchEnginesContainer.classList.toggle('show');
-        toggleSearchEngines('search-with');
-    }
+searchWith.addEventListener('click', function (event) {
+    activeSearchMode = (activeSearchMode === 'search-with') ? 'search-on' : 'search-with';
+    searchEnginesContainer.classList.toggle('show');
+    toggleSearchEngines(activeSearchMode);
+
+    event.stopPropagation();
+    searchBar.classList.add("active");
+
     setTimeout(() => {
         searchEnginesContainer.classList.remove('show');
     }, 300);
@@ -57,8 +55,8 @@ function toggleSearchEngines(category) {
         'search-on': "engine5",
     }
     const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
-    const namee = category.split("-").map((elem, index) => { return ((index == 0) ? elem[0] : elem[0].toUpperCase()) + elem.substring(1) }).join("") + "Hint";
-    document.getElementById('searchWithHint').innerText = translations[currentLanguage][namee] || translations["en"][namee]
+    const searchModeName = category === "search-with" ? "searchWithHint" : "searchOnHint";
+    searchWith.innerText = translations[currentLanguage][searchModeName] || translations["en"][searchModeName]
 
     searchEngines.forEach(engine => {
         if (engine.getAttribute('data-category') === category) {
@@ -225,13 +223,7 @@ document.addEventListener("DOMContentLoaded", () => {
     const storedSearchEngine = localStorage.getItem(`selectedSearchEngine-${activeSearchMode}`);
 
     if (activeSearchMode) {
-        if (activeSearchMode !== 'search-with') {
-            searchWith.innerText = translations[currentLanguage].searchOnHint || translations['en'].searchOnHint;
-            toggleSearchEngines('search-on');
-        } else {
-            searchWith.innerText = translations[currentLanguage].searchWithHint || translations['en'].searchWithHint;
-            toggleSearchEngines('search-with');
-        }
+        toggleSearchEngines(activeSearchMode);
     }
 
     if (storedSearchEngine) {
diff --git a/style.css b/style.css
index 15b7edaa..040fc3ba 100644
--- a/style.css
+++ b/style.css
@@ -1642,9 +1642,8 @@ body #bookmarkButton.bookmark-button.rotate {
 
 .searchWithCont .hint {
 	flex: 0 0 auto; /* Prevents it from growing */
-	width: 150px; /* Fixed width */
+	width: 140px; /* Fixed width */
 	height: 100px;
-	white-space: nowrap; /* Prevents text from wrapping when search modes are changed*/
 	display: flex;
 	align-items: center;
 	justify-content: center;

From 9d6328db55a4b5fc506679a5dc103e128ee169b2 Mon Sep 17 00:00:00 2001
From: Prem Kumar <60751338+prem-k-r@users.noreply.github.com>
Date: Tue, 4 Mar 2025 17:29:55 +0530
Subject: [PATCH 15/20] Update script.js

---
 scripts/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/script.js b/scripts/script.js
index 19c1a4bb..d061efb0 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -52,7 +52,7 @@ searchWith.addEventListener('click', function (event) {
 
 function toggleSearchEngines(category) {
     const defaultItems = {
-        'search-with': "engine1",
+        'search-with': "engine0",
         'search-on': "engine5",
     }
     const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];

From ffdfdf45a9601b90cce0739d7c4d591d4a4f9c1d Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Tue, 4 Mar 2025 21:52:59 +0530
Subject: [PATCH 16/20] Update script.js

---
 scripts/script.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/scripts/script.js b/scripts/script.js
index d061efb0..44399874 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -43,7 +43,7 @@ searchWith.addEventListener('click', function (event) {
     toggleSearchEngines(activeSearchMode);
 
     event.stopPropagation();
-    searchBar.classList.add("active");
+    searchbar.classList.add("active");
 
     setTimeout(() => {
         searchEnginesContainer.classList.remove('show');

From 063fed98ff4c1327072552fb683f6163ec17e721 Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Tue, 4 Mar 2025 22:02:58 +0530
Subject: [PATCH 17/20] Update style.css

---
 style.css | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/style.css b/style.css
index 963946dc..b5fdebea 100644
--- a/style.css
+++ b/style.css
@@ -1748,13 +1748,13 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchWithCont .hint {
-	flex: 0 0 auto; /* Prevents it from growing */
-	width: 140px; /* Fixed width */
+	min-width: 128px;
+	max-width: 156px;
 	height: 100px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: 10px;
+	padding: 14px;
 	position: relative;
 	margin-right: 16px;
 	border-radius: var(--round);
@@ -1780,10 +1780,6 @@ body #bookmarkButton.bookmark-button.rotate {
 	scale: 0.98;
 }
 
-.searchWithCont .hint:active::after {
-	transform: none;
-}
-
 .searchEnginesContainer {
 	position: relative;
 	z-index: 1;

From 686bc4cbb23bdbbce3f3b9c904bc81df7690402e Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Wed, 5 Mar 2025 23:16:43 +0530
Subject: [PATCH 18/20] fix focus issue

---
 locales/hi.js     | 1 +
 scripts/script.js | 9 ++++++++-
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/locales/hi.js b/locales/hi.js
index 09e9f97f..d3e8da2e 100644
--- a/locales/hi.js
+++ b/locales/hi.js
@@ -99,6 +99,7 @@ const hi = {
     "searchPlaceholder": "यहाँ लिखें...",
     "listenPlaceholder": "सुन रहे हैं...",
     "searchWithHint": "खोज माध्यम",
+    "searchOnHint": "खोज स्रोत",
     "userText": "यहाँ अपना टेक्स्ट लिखें",
 
     // Greeting
diff --git a/scripts/script.js b/scripts/script.js
index 44399874..92725e06 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -43,6 +43,7 @@ searchWith.addEventListener('click', function (event) {
     toggleSearchEngines(activeSearchMode);
 
     event.stopPropagation();
+    searchInput.focus();
     searchbar.classList.add("active");
 
     setTimeout(() => {
@@ -65,7 +66,13 @@ function toggleSearchEngines(category) {
         } else {
             engine.style.display = 'none';
         }
-        if (engine.lastElementChild.value === checkeditem) { engine.lastElementChild.click() }
+        if (engine.lastElementChild.value === checkeditem && !engine.lastElementChild.checked) {
+            engine.lastElementChild.click(); // Click only if it's not already selected
+
+            if (document.activeElement === searchInput) {
+                searchInput.blur();
+            }
+        }
     });
 }
 

From 113494ca33378d897b68cfc6709e980295f8d14c Mon Sep 17 00:00:00 2001
From: itz-rj-here <faiadmahmudadil@gmail.com>
Date: Sat, 8 Mar 2025 13:51:58 +0600
Subject: [PATCH 19/20] Mirror changes

---
 scripts/script.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/scripts/script.js b/scripts/script.js
index 92725e06..f552c174 100644
--- a/scripts/script.js
+++ b/scripts/script.js
@@ -55,10 +55,10 @@ function toggleSearchEngines(category) {
     const defaultItems = {
         'search-with': "engine0",
         'search-on': "engine5",
-    }
+    };
     const checkeditem = localStorage.getItem(`selectedSearchEngine-${category}`) || defaultItems[category];
     const searchModeName = category === "search-with" ? "searchWithHint" : "searchOnHint";
-    searchWith.innerText = translations[currentLanguage][searchModeName] || translations["en"][searchModeName]
+    searchWith.innerText = translations[currentLanguage][searchModeName] || translations["en"][searchModeName];
 
     searchEngines.forEach(engine => {
         if (engine.getAttribute('data-category') === category) {

From 03665bfea6a478674fe92a0dac3e2f08d55c02aa Mon Sep 17 00:00:00 2001
From: Prem Kumar <prem12321kumar@gmail.com>
Date: Sat, 8 Mar 2025 14:40:34 +0530
Subject: [PATCH 20/20] Removed vertical line

---
 style.css | 27 ++++++++++++++-------------
 1 file changed, 14 insertions(+), 13 deletions(-)

diff --git a/style.css b/style.css
index b5fdebea..d2a6a877 100644
--- a/style.css
+++ b/style.css
@@ -1748,29 +1748,20 @@ body #bookmarkButton.bookmark-button.rotate {
 }
 
 .searchWithCont .hint {
-	min-width: 128px;
+	min-width: 124px;
 	max-width: 156px;
 	height: 100px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	padding: 14px;
+	padding: 13px;
 	position: relative;
-	margin-right: 16px;
+	margin-right: 5px; /* 16px */
 	border-radius: var(--round);
+	cursor: pointer;
 	transition: transform 0.4s ease;
 }
 
-.searchWithCont .hint::after {
-	content: "";
-	position: absolute;
-	width: 6px;
-	height: 100%;
-	background-color: var(--accentLightTint-blue);
-	border-radius: 3px;
-	right: -20px;
-}
-
 .searchWithCont .hint:hover {
 	background-color: var(--darkColor-blue);
 	color: #fff;
@@ -1780,6 +1771,16 @@ body #bookmarkButton.bookmark-button.rotate {
 	scale: 0.98;
 }
 
+/* .searchWithCont .hint::after {
+	content: "";
+	position: absolute;
+	width: 6px;
+	height: 100%;
+	background-color: var(--accentLightTint-blue);
+	border-radius: 3px;
+	right: -20px;
+} */
+
 .searchEnginesContainer {
 	position: relative;
 	z-index: 1;