Add search engine selector to search bar UI

Introduced a search engine selector dropdown in the search bar, allowing users to choose between Google, Bing, and DuckDuckGo. Updated the search logic to use the selected engine and added corresponding SVG icons. Adjusted CSS and HTML structure to accommodate the new selector.

renderer/home.css

@@ -59,18 +59,26 @@ body, html {
   font-weight: bold;
 }
 
+/* Search bar container */
+.search-container {
+  display: flex;
+  align-items: center;
+  margin-bottom: 2rem;
+  width: 550px; /* Increased width for the new button */
+  max-width: 95vw;
+}
+
 /* Search bar */
 .search-bar {
   display: flex;
+  flex: 1; /* Allow search bar to take remaining space */
   align-items: center;
   background: #ffffff;
-  border-radius: 70px;
+  border-radius: 0 70px 70px 0; /* Curve right side */
   box-shadow: 0 4px 20px rgba(0,0,0,0.2);
   padding: 0.25rem;
-  margin-bottom: 2rem;
-  width: 500px;
-  max-width: 90vw;
   overflow: hidden;
+  height: 54px; /* Match button height */
 }
 
 .search-bar input.search-input {
@@ -110,6 +118,64 @@ body, html {
   box-shadow: none;
 }
 
+/* Search Engine Selector */
+.search-engine-selector {
+  position: relative;
+}
+
+.search-engine-btn {
+  background: #ffffff;
+  border: none;
+  border-radius: 70px 0 0 70px; /* Curve left side */
+  padding: 0.25rem 0.5rem 0.25rem 1rem;
+  cursor: pointer;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
+}
+
+.search-engine-btn img {
+  width: 24px;
+  height: 24px;
+}
+
+.search-engine-dropdown {
+  position: absolute;
+  top: 110%;
+  left: 0;
+  background: #ffffff;
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
+  z-index: 100;
+  padding: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.search-engine-dropdown.hidden {
+  display: none;
+}
+
+.search-engine-option {
+  cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.search-engine-option:hover {
+  background-color: #f0f0f0;
+}
+
+.search-engine-option img {
+  width: 24px;
+  height: 24px;
+}
+
 /* Bookmark grid */
 .bookmarks {
   display: flex;

renderer/home.html

@@ -15,11 +15,29 @@
       <div class="logo-text">Nebula Browser</div>
     </div>
 
-    <div class="search-bar">
-      <input type="text" id="searchInput" class="search-input" placeholder="Search">
-      <button id="searchBtn" class="search-btn">
-        <span class="material-symbols-outlined">search</span>
-      </button>
+    <div class="search-container">
+      <div class="search-engine-selector">
+        <button id="searchEngineBtn" class="search-engine-btn">
+          <img id="searchEngineLogo" src="../assets/images/icons/google.svg" alt="Search Engine">
+        </button>
+        <div id="searchEngineDropdown" class="search-engine-dropdown hidden">
+          <div class="search-engine-option" data-engine="google">
+            <img src="../assets/images/icons/google.svg" alt="Google">
+          </div>
+          <div class="search-engine-option" data-engine="bing">
+            <img src="../assets/images/icons/bing.svg" alt="Bing">
+          </div>
+          <div class="search-engine-option" data-engine="duckduckgo">
+            <img src="../assets/images/icons/duckduckgo.svg" alt="DuckDuckGo">
+          </div>
+        </div>
+      </div>
+      <div class="search-bar">
+        <input type="text" id="searchInput" class="search-input" placeholder="Search">
+        <button id="searchBtn" class="search-btn">
+          <span class="material-symbols-outlined">search</span>
+        </button>
+      </div>
     </div>
 
     <div class="bookmarks" id="bookmarkList">
@@ -58,4 +76,8 @@
   <!-- make this a module so we can import icons -->
   <script type="module" src="home.js"></script>
 </body>
+</html>
+  <!-- make this a module so we can import icons -->
+  <script type="module" src="home.js"></script>
+</body>
 </html>

renderer/home.js

@@ -10,12 +10,22 @@ const cancelBtn         = document.getElementById('cancelBtn');
 const addPopup          = document.getElementById('addPopup');
 const searchBtn         = document.getElementById('searchBtn');
 const searchInput       = document.getElementById('searchInput');
+const searchEngineBtn   = document.getElementById('searchEngineBtn');
+const searchEngineDropdown = document.getElementById('searchEngineDropdown');
+const searchEngineLogo  = document.getElementById('searchEngineLogo');
 const iconFilter       = document.getElementById('iconFilter');
 const iconGrid         = document.getElementById('iconGrid');
 const selectedIconInput= document.getElementById('selectedIcon');
 let selectedIcon       = initialIcons[0];
 let availableIcons     = initialIcons;
 
+const searchEngines = {
+  google: 'https://www.google.com/search?q=',
+  bing: 'https://www.bing.com/search?q=',
+  duckduckgo: 'https://duckduckgo.com/?q='
+};
+let selectedSearchEngine = 'google';
+
 let bookmarks = JSON.parse(localStorage.getItem(BOOKMARKS_KEY)) || [];
 
 function saveBookmarks() {
@@ -130,6 +140,29 @@ cancelBtn.onclick = () => {
   addPopup.classList.add('hidden');
 };
 
+// --- Search Engine Dropdown Logic ---
+searchEngineBtn.addEventListener('click', (e) => {
+  e.stopPropagation();
+  searchEngineDropdown.classList.toggle('hidden');
+});
+
+document.addEventListener('click', () => {
+  if (!searchEngineDropdown.classList.contains('hidden')) {
+    searchEngineDropdown.classList.add('hidden');
+  }
+});
+
+searchEngineDropdown.addEventListener('click', (e) => {
+  const option = e.target.closest('.search-engine-option');
+  if (option) {
+    selectedSearchEngine = option.dataset.engine;
+    const newLogoSrc = option.querySelector('img').src;
+    searchEngineLogo.src = newLogoSrc;
+    searchEngineDropdown.classList.add('hidden');
+  }
+});
+// --- End Search Engine Dropdown Logic ---
+
 searchBtn.addEventListener('click', () => {
   const input = searchInput.value.trim();
   const hasProtocol = /^https?:\/\//i.test(input);
@@ -138,7 +171,8 @@ searchBtn.addEventListener('click', () => {
   if (looksLikeUrl) {
     target = hasProtocol ? input : `https://${input}`;
   } else {
-    target = `https://www.google.com/search?q=${encodeURIComponent(input)}`;
+    const searchEngineUrl = searchEngines[selectedSearchEngine];
+    target = `${searchEngineUrl}${encodeURIComponent(input)}`;
   }
   window.location.href = target;
 });