Merge pull request #91 from Sameem-baba/feat/custom-search-engine

feat(settings): add custom search engine support with validation (clean)

Author: akhileshthite

src/main.js

@@ -9,6 +9,7 @@ import { createMenuTemplate } from "./actions.js";
 import WindowManager, { createIsolatedWindow } from "./window-manager.js";
 import settingsManager from "./settings-manager.js";
 import { attachContextMenus, setWindowManager } from "./context-menu.js";
+import { isBuiltInSearchEngine } from "./search-engine.js";
 // import { setupAutoUpdater } from "./auto-updater.js";
 
 const P2P_PROTOCOL = {
@@ -205,4 +206,14 @@ ipcMain.on('update-group-properties', (event, groupId, properties) => {
     }
   });
 });
+
+ipcMain.handle('check-built-in-engine', (event, template) => {
+  try {
+    return isBuiltInSearchEngine(template);
+  } catch (error) {
+    console.error('Error in check-built-in-engine:', error);
+    return false; // fallback if anything goes wrong
+  }
+});
+
 export { windowManager };

src/pages/nav-box.js

@@ -8,9 +8,15 @@ class NavBox extends HTMLElement {
     this._resizeListener = null;
     this.buildNavBox();
     this.attachEvents();
+    this.updateSearchPlaceholder();
     this.attachThemeListener();
   }
 
+  connectedCallback() {
+    // Ensure placeholder updates when element is attached to DOM
+    this.updateSearchPlaceholder();
+  }
+
   setStyledUrl(url) {
     const urlInput = this.querySelector("#url");
     if (!urlInput) return;
@@ -50,7 +56,7 @@ class NavBox extends HTMLElement {
     const urlInput = document.createElement("input");
     urlInput.type = "text";
     urlInput.id = "url";
-    urlInput.placeholder = "Search with DuckDuckGo or type a P2P URL";
+    this.updateSearchPlaceholder();
 
     const qrButton = this.createButton(
       "qr-code",
@@ -260,6 +266,54 @@ class NavBox extends HTMLElement {
     }
   }
 
+  _titleCase(key) {
+    if (!key) return 'Search';
+    return key.replace(/(^|[\s-])(\w)/g, (_, p1, p2) => p1 + p2.toUpperCase());
+  }
+
+  _safeParseUrl(s) {
+    try { return new URL(s); } catch {}
+    try { return new URL('https://' + s); } catch {}
+    return null;
+  }
+
+  async updateSearchPlaceholder() {
+    const input = this.querySelector('#url');
+    if (!input) return;
+
+    try {
+      const { ipcRenderer } = require("electron");
+      const engineKey = await ipcRenderer.invoke('settings-get', 'searchEngine');
+
+      let name;
+      if (engineKey === 'custom') {
+        const tpl = await ipcRenderer.invoke('settings-get', 'customSearchTemplate');
+        const u = this._safeParseUrl(tpl);
+
+        if (u?.hostname) {
+          // remove 'www.' and the top-level domain (.com, .org, .net, etc.)
+          const cleanHost = u.hostname
+            .replace(/^www\./i, '') // remove www.
+            .replace(/\.[^.]+$/, ''); // remove last dot + tld
+
+          // capitalize first letter
+          name = this._titleCase(cleanHost);
+        } else {
+          name = 'Custom';
+        }
+      } else if (engineKey) {
+        name = this._titleCase(engineKey);
+      } else {
+        name = 'DuckDuckGo'
+      }
+
+      input.placeholder = `Search with ${name} or type a P2P URL`;
+    } catch (err) {
+      console.warn('updateSearchPlaceholder failed:', err);
+      input.placeholder = 'Search or type a P2P URL';
+    }
+  }
+
   attachEvents() {
     this.addEventListener("click", (event) => {
       const button = event.target.closest("button");

src/pages/settings.html

@@ -124,11 +124,32 @@ <h1 class="section-title">Search Engine</h1>
                   <div class="select-option" data-value="ecosia">Ecosia</div>
                   <div class="select-option" data-value="kagi">Kagi</div>
                   <div class="select-option" data-value="startpage">Startpage</div>
+                  <div class="select-option" data-value="custom">Custom</div>
                 </div>
               </div>
               <input type="hidden" id="search-engine" value="duckduckgo">
             </div>
           </div>
+
+          <div
+            class="setting-row tall-row"
+            id="custom-search-row"
+            style="display: none"
+          >
+            <div class="setting-label">Custom search URL</div>
+            <div class="setting-control">
+              <input
+                type="text"
+                id="custom-search-template"
+                class="text-input input-fill"
+                placeholder="https://example.com/search?q=%s"
+                autocomplete="off"
+              />
+              <div id="custom-search-message" class="help-or-error">
+                Use <code>%s</code> where the query should go.
+              </div>
+            </div>
+          </div>
 
           <div class="setting-row">
             <div class="setting-label">Clear cache</div>

src/pages/static/js/settings.js

@@ -8,6 +8,57 @@
 let settingsAPI;
 let eventCleanupFunctions = [];
 
+function validateSearchTemplate(tpl) {
+  if (typeof tpl !== "string")
+    return { valid: false, reason: "Template must be a string." };
+
+  const s = tpl.trim();
+  if (!s) return { valid: false, reason: "Template cannot be empty." };
+
+  try {
+    new URL(s); // just test if it's a valid URL structure
+    return { valid: true };
+  } catch {
+    return { valid: false, reason: "Template must be a valid URL." };
+  }
+}
+
+function setTemplateFieldState(inputEl, messageEl, state) {
+  inputEl.classList.remove("invalid", "valid");
+  messageEl.classList.remove("error", "success");
+
+  if (state.valid) {
+    inputEl.classList.add("valid");
+    messageEl.classList.add("success");
+    messageEl.innerHTML =
+      "✅ Press <b>Enter</b> to set this custom search engine.";
+  } else {
+    inputEl.classList.add("invalid");
+    messageEl.classList.add("error");
+    messageEl.textContent = state.reason || "Invalid template.";
+  }
+}
+
+/**
+ * Checks if the provided search template matches any built-in search engine.
+ * @param {string} tpl - The custom search template URL.
+ * @returns {boolean} - True if it's a built-in search engine, otherwise false.
+ */
+async function isBuiltInSearchEngine(tpl) {
+  try {
+    if (!window.electronAPI?.onCheckBuiltInEngine) {
+      console.warn("onCheckBuiltInEngine API not available in this context");
+      return false;
+    }
+
+    const result = await window.electronAPI.onCheckBuiltInEngine(tpl);
+    return result;
+  } catch (err) {
+    console.error('IPC check failed:', err);
+    return false;
+  }
+}
+
 // Initialize API access with fallback handling
 function initializeAPI() {
   console.log('Settings: Attempting to initialize API...');
@@ -115,6 +166,12 @@ document.addEventListener('DOMContentLoaded', async () => {
           searchEngine.value = newEngine;
           updateCustomDropdownDisplays();
         }
+
+        // Toggle the Custom URL row live when engine changes
+        const row = document.getElementById("custom-search-row");
+        if (row) {
+          row.style.display = newEngine === "custom" ? "" : "none";
+        }
       });
       eventCleanupFunctions.push(cleanup2);
     }
@@ -161,6 +218,12 @@ document.addEventListener('DOMContentLoaded', async () => {
 
   // Get form elements
   const searchEngine = document.getElementById('search-engine');
+  const customSearchRow = document.getElementById("custom-search-row");
+  const customSearchTemplate = document.getElementById(
+    "custom-search-template"
+  );
+  const customSearchMessage = document.getElementById("custom-search-message");
+
   const themeToggle = document.getElementById('theme-toggle');
   const showClock = document.getElementById('show-clock');
   const verticalTabs = document.getElementById('vertical-tabs');
@@ -273,9 +336,81 @@ document.addEventListener('DOMContentLoaded', async () => {
   });
 
   // Add change listeners for form elements
-  searchEngine?.addEventListener('change', async (e) => {
-    console.log('Search engine changed:', e.target.value);
-    await saveSettingToBackend('searchEngine', e.target.value);
+   searchEngine?.addEventListener("change", async (e) => {
+    const value = e.target.value;
+    console.log("Search engine changed (UI):", value);
+
+    if (value === "custom") {
+      // Show inline input/modal, but do NOT save the engine yet
+      if (customSearchRow) customSearchRow.style.display = "";
+      // optional UX: prefill from existing template and focus
+      customSearchTemplate?.focus();
+      customSearchTemplate?.select?.();
+      return; // do NOT call settings.set('searchEngine', 'custom') yet
+    }
+
+    // For all non-custom engines, persist immediately and hide the row
+    await saveSettingToBackend("searchEngine", value);
+    if (customSearchRow) customSearchRow.style.display = "none";
+  });
+
+  customSearchTemplate?.addEventListener("input", async () => {
+      const tpl = customSearchTemplate.value.trim();
+      const state = validateSearchTemplate(tpl);
+
+       const isBuiltIn = await isBuiltInSearchEngine(tpl);
+
+
+      if (isBuiltIn) {
+        state.valid = false;
+        state.reason = "This search engine already exists in the browser.";
+      }
+
+      setTemplateFieldState(customSearchTemplate, customSearchMessage, state);
+  });
+
+  // Save custom search template on Enter
+  customSearchTemplate?.addEventListener("keydown", async (e) => {
+    if (e.key !== "Enter") return;
+    const tpl = customSearchTemplate.value.trim();
+    const state = validateSearchTemplate(tpl);
+
+    const isBuiltIn = await isBuiltInSearchEngine(tpl);
+
+    if (isBuiltIn) {
+      state.valid = false;
+      state.reason = "This search engine already exists in the browser.";
+    }
+    setTemplateFieldState(customSearchTemplate, customSearchMessage, state);
+    if (!state.valid) return;
+
+
+  // 🚫 Check for built-in search engines
+  if (isBuiltIn) {
+    customSearchMessage.style.display = "block";
+    customSearchMessage.textContent = "This search engine already exists in the browser.";
+    return;
+  }
+
+    try {
+      // Save template first
+      await saveSettingToBackend("customSearchTemplate", tpl);
+      // Then set engine to custom (only now)
+      if (searchEngine && searchEngine.value !== "custom") {
+        searchEngine.value = "custom";
+      }
+      await saveSettingToBackend("searchEngine", "custom");
+
+      // ✅ Hide the helper message once successfully set
+      customSearchMessage.textContent = "";
+      customSearchMessage.style.display = "none";
+
+      if (customSearchRow) customSearchRow.style.display = "";
+      showSettingsSavedMessage("Custom search template saved", "success");
+    } catch (err) {
+      console.error(err);
+      showSettingsSavedMessage("Failed to save custom template", "error");
+    }
   });
 
   themeToggle?.addEventListener('change', async (e) => {
@@ -356,7 +491,14 @@ async function loadSettingsFromBackend() {
 
 // Populate form fields with settings data
 function populateFormFields(settings) {
-  const searchEngine = document.getElementById('search-engine');
+  const searchEngine = document.getElementById("search-engine");
+  const customSearchRow = document.getElementById("custom-search-row"); 
+  const customSearchTemplate = document.getElementById(
+    "custom-search-template"
+  );
+  const customSearchMessage = document.getElementById("custom-search-message");
+
+
   const themeToggle = document.getElementById('theme-toggle');
   const showClock = document.getElementById('show-clock');
   const verticalTabs = document.getElementById('vertical-tabs');
@@ -366,6 +508,39 @@ function populateFormFields(settings) {
   if (searchEngine && settings.searchEngine) {
     searchEngine.value = settings.searchEngine;
   }
+
+  // Show/hide the custom row based on saved engine
+  if (customSearchRow) {
+    customSearchRow.style.display =
+      settings.searchEngine === "custom" ? "" : "none";
+  }
+
+  // Prefill template input
+  if (customSearchTemplate) {
+    const tpl = settings.customSearchTemplate || "https://duckduckgo.com/?q=%s";
+    customSearchTemplate.value = tpl;
+
+    const state = validateSearchTemplate(tpl);
+
+    // Apply only visual input state (valid/invalid)…
+    customSearchTemplate.classList.remove("invalid", "valid");
+    if (state.valid) customSearchTemplate.classList.add("valid");
+    else customSearchTemplate.classList.add("invalid");
+
+    // …and control the message based on whether the engine is already set
+    // If engine is already 'custom' and template is valid, HIDE the message.
+    if (settings.searchEngine === "custom" && state.valid) {
+      customSearchMessage.textContent = "";
+      customSearchMessage.classList.remove("error", "success");
+      customSearchMessage.style.display = "none";
+    } else {
+      // Otherwise show the neutral hint (not the success text)
+      customSearchMessage.style.display = "";
+      customSearchMessage.classList.remove("error", "success");
+      customSearchMessage.innerHTML = 'Please include a placeholder for the search term. If none, the browser will automatically add a search query parameter <code>?q=</code>.';
+    }
+  }
+
   if (themeToggle && settings.theme) {
     themeToggle.value = settings.theme;
 
@@ -417,6 +592,7 @@ async function saveSettingToBackend(key, value) {
     // Create user-friendly success messages
     const successMessages = {
       'searchEngine': 'Search engine updated successfully!',
+      'customSearchTemplate': "Custom template updated successfully!",
       'theme': 'Theme updated successfully!',
       'showClock': 'Clock setting updated successfully!',
       'wallpaper': 'Wallpaper updated successfully!',
@@ -432,6 +608,7 @@ async function saveSettingToBackend(key, value) {
     // Create user-friendly error messages
     const errorMessages = {
       'searchEngine': 'Failed to save search engine setting',
+      'customSearchTemplate': "Failed to save custom template",
       'theme': 'Failed to save theme setting',
       'showClock': 'Failed to save clock setting',
       'wallpaper': 'Failed to save wallpaper setting',