From 9f39b4c1c03473151f8755bb119bc1441c0f38bc Mon Sep 17 00:00:00 2001
From: Cameron Baker <109693600+npylef@users.noreply.github.com>
Date: Sat, 31 May 2025 16:05:27 -0700
Subject: [PATCH] Default Search Engine and Customize UI

Added - Google, DuckDuckGo, DuckDuckGo HTML, Google No AI (udm=14), Kagi, Swisscows, Startpage, Qwant, T3 Chat options as default search engine using local storage same as beyond

Added - UI with css animations for changing default search engine
---
 public/gear.svg |   1 +
 src/global.css  | 200 +++++++++++++++++++++++++++++++++++++++++++++++-
 src/main.ts     |  96 +++++++++++++++++++----
 3 files changed, 279 insertions(+), 18 deletions(-)
 create mode 100644 public/gear.svg

diff --git a/public/gear.svg b/public/gear.svg
new file mode 100644
index 000000000..10e138b58
--- /dev/null
+++ b/public/gear.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-settings"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg> 
\ No newline at end of file
diff --git a/src/global.css b/src/global.css
index bac59e4f5..9cbc5beb0 100644
--- a/src/global.css
+++ b/src/global.css
@@ -74,7 +74,8 @@ button {
 }
 
 input,
-textarea {
+textarea,
+select {
   font: inherit;
 }
 
@@ -129,6 +130,115 @@ textarea {
   background: #28a745;
 }
 
+/* Button container for centering */
+.button-container {
+  display: flex;
+  justify-content: center;
+  margin-top: 16px;
+}
+
+/* Customize button styles */
+.customize-button {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: #f5f5f5;
+  border: 1px solid #ddd;
+  border-radius: 6px;
+  color: #333;
+  font-size: 14px;
+  font-weight: 500;
+  transition: all 0.2s ease;
+  cursor: pointer;
+}
+
+.customize-button:hover {
+  background: #e8e8e8;
+  border-color: #bbb;
+}
+
+.customize-button.active {
+  background: #e0e0e0;
+  border-color: #999;
+}
+
+.customize-button img {
+  width: 16px;
+  height: 16px;
+  transition: transform 0.2s ease;
+  flex-shrink: 0;
+}
+
+.customize-button.active img {
+  transform: rotate(90deg);
+}
+
+/* Settings panel styles */
+.settings-panel {
+  max-height: 0;
+  overflow: hidden;
+  margin-top: 0;
+  transition: all 0.3s ease;
+  opacity: 0;
+}
+
+.settings-panel.open {
+  max-height: 500px;
+  margin-top: 16px;
+  opacity: 1;
+}
+
+.settings-content {
+  background: #f8f8f8;
+  border: 1px solid #ddd;
+  border-radius: 8px;
+  padding: 20px;
+  text-align: left;
+}
+
+.settings-content h3 {
+  color: #333;
+  margin-bottom: 16px;
+  font-size: 18px;
+  font-weight: 600;
+}
+
+.setting-group {
+  margin-bottom: 16px;
+}
+
+.setting-group label {
+  display: block;
+  color: #555;
+  font-weight: 500;
+  margin-bottom: 8px;
+  font-size: 14px;
+}
+
+.search-select {
+  width: 100%;
+  padding: 8px 12px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  background: #fff;
+  color: #333;
+  font-size: 14px;
+}
+
+.search-select:focus {
+  outline: none;
+  border-color: #007acc;
+  box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.2);
+}
+
+.setting-description {
+  margin-top: 6px;
+  font-size: 12px;
+  color: #666;
+  line-height: 1.4;
+}
+
 /* Add footer styles */
 .footer {
   position: fixed;
@@ -193,4 +303,92 @@ textarea {
   .copy-button:active {
     background: #333;
   }
+
+  /* Dark theme for customize button */
+  .customize-button {
+    background: #191919;
+    border-color: #3d3d3d;
+    color: #ddd;
+  }
+
+  .customize-button:hover {
+    background: #222;
+    border-color: #555;
+  }
+
+  .customize-button.active {
+    background: #333;
+    border-color: #666;
+  }
+
+  .customize-button img {
+    filter: invert(1);
+  }
+
+  .customize-button.active img {
+    filter: invert(1);
+  }
+
+  /* Dark theme for settings panel */
+  .settings-content {
+    background: #191919;
+    border-color: #3d3d3d;
+  }
+
+  .settings-content h3 {
+    color: #ddd;
+  }
+
+  .setting-group label {
+    color: #999;
+  }
+
+  .search-select {
+    background: #191919;
+    border-color: #3d3d3d;
+    color: #ddd;
+  }
+
+  .search-select:focus {
+    border-color: #007acc;
+    box-shadow: 0 0 0 2px rgba(0, 122, 204, 0.3);
+  }
+
+  .setting-description {
+    color: #999;
+  }
+}
+
+/* Responsive design */
+@media (max-width: 640px) {
+  .content-container {
+    max-width: 100%;
+    padding: 0 16px;
+  }
+
+  .url-container {
+    flex-direction: column;
+    gap: 12px;
+  }
+
+  .copy-button {
+    align-self: stretch;
+    justify-content: center;
+    padding: 12px;
+  }
+
+  .customize-button {
+    align-self: stretch;
+    justify-content: center;
+  }
+
+  .settings-content {
+    padding: 16px;
+  }
+
+  .footer {
+    position: relative;
+    margin-top: 32px;
+    bottom: auto;
+  }
 }
diff --git a/src/main.ts b/src/main.ts
index 4452a6f4a..db2b19f3f 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,6 +1,19 @@
 import { bangs } from "./bang";
 import "./global.css";
 
+// Default search engines for when no bang is used
+const DEFAULT_SEARCH_ENGINES = [
+  { name: "Google", value: "google", url: "https://www.google.com/search?q={{{s}}}" },
+  { name: "DuckDuckGo", value: "duckduckgo", url: "https://duckduckgo.com/?q={{{s}}}" },
+  { name: "DuckDuckGo HTML", value: "duckduckgo-html", url: "https://html.duckduckgo.com/html/?q={{{s}}}" },
+  { name: "Google No AI (udm=14)", value: "google-no-ai", url: "https://www.google.com/search?udm=14&q={{{s}}}" },
+  { name: "Kagi", value: "kagi", url: "https://kagi.com/search?q={{{s}}}" },
+  { name: "Swisscows", value: "swisscows", url: "https://swisscows.com/web?query={{{s}}}" },
+  { name: "Startpage", value: "startpage", url: "https://www.startpage.com/sp/search?query={{{s}}}" },
+  { name: "Qwant", value: "qwant", url: "https://www.qwant.com/?q={{{s}}}" },
+  { name: "T3 Chat", value: "t3chat", url: "https://www.t3.chat/new?q={{{s}}}" }
+];
+
 function noSearchDefaultPageRender() {
   const app = document.querySelector<HTMLDivElement>("#app")!;
   app.innerHTML = `
@@ -19,6 +32,27 @@ function noSearchDefaultPageRender() {
             <img src="/clipboard.svg" alt="Copy" />
           </button>
         </div>
+        <div class="button-container">
+          <button class="customize-button">
+            <img src="/gear.svg" alt="Settings" />
+            Customize
+          </button>
+        </div>
+        
+        <div class="settings-panel">
+          <div class="settings-content">
+            <h3>Search Customization</h3>
+            <div class="setting-group">
+              <label for="default-search-select">Default search engine (when no bang is used):</label>
+              <select id="default-search-select" class="search-select">
+                ${DEFAULT_SEARCH_ENGINES.map(engine => 
+                  `<option value="${engine.value}">${engine.name}</option>`
+                ).join('')}
+              </select>
+              <p class="setting-description">This search engine will be used when you search without a bang (like "!g" or "!gh")</p>
+            </div>
+          </div>
+        </div>
       </div>
       <footer class="footer">
         <a href="https://t3.chat" target="_blank">t3.chat</a>
@@ -33,6 +67,13 @@ function noSearchDefaultPageRender() {
   const copyButton = app.querySelector<HTMLButtonElement>(".copy-button")!;
   const copyIcon = copyButton.querySelector("img")!;
   const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
+  const customizeButton = app.querySelector<HTMLButtonElement>(".customize-button")!;
+  const settingsPanel = app.querySelector<HTMLDivElement>(".settings-panel")!;
+  const defaultSearchSelect = app.querySelector<HTMLSelectElement>("#default-search-select")!;
+
+  // Load saved default search engine
+  const savedDefaultSearch = localStorage.getItem("default-search-engine") || "google";
+  defaultSearchSelect.value = savedDefaultSearch;
 
   copyButton.addEventListener("click", async () => {
     await navigator.clipboard.writeText(urlInput.value);
@@ -42,6 +83,16 @@ function noSearchDefaultPageRender() {
       copyIcon.src = "/clipboard.svg";
     }, 2000);
   });
+
+  customizeButton.addEventListener("click", () => {
+    settingsPanel.classList.toggle("open");
+    customizeButton.classList.toggle("active");
+  });
+
+  defaultSearchSelect.addEventListener("change", (e) => {
+    const target = e.target as HTMLSelectElement;
+    localStorage.setItem("default-search-engine", target.value);
+  });
 }
 
 const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "g";
@@ -56,27 +107,38 @@ function getBangredirectUrl() {
   }
 
   const match = query.match(/!(\S+)/i);
-
   const bangCandidate = match?.[1]?.toLowerCase();
-  const selectedBang = bangs.find((b) => b.t === bangCandidate) ?? defaultBang;
-
-  // Remove the first bang from the query
-  const cleanQuery = query.replace(/!\S+\s*/i, "").trim();
+  
+  if (bangCandidate) {
+    // Bang detected - use existing logic
+    const selectedBang = bangs.find((b) => b.t === bangCandidate) ?? defaultBang;
+    
+    // Remove the first bang from the query
+    const cleanQuery = query.replace(/!\S+\s*/i, "").trim();
 
-  // If the query is just `!gh`, use `github.com` instead of `github.com/search?q=`
-  if (cleanQuery === "")
-    return selectedBang ? `https://${selectedBang.d}` : null;
+    // If the query is just `!gh`, use `github.com` instead of `github.com/search?q=`
+    if (cleanQuery === "")
+      return selectedBang ? `https://${selectedBang.d}` : null;
 
-  // Format of the url is:
-  // https://www.google.com/search?q={{{s}}}
-  const searchUrl = selectedBang?.u.replace(
-    "{{{s}}}",
-    // Replace %2F with / to fix formats like "!ghr+t3dotgg/unduck"
-    encodeURIComponent(cleanQuery).replace(/%2F/g, "/"),
-  );
-  if (!searchUrl) return null;
+    // Format of the url is:
+    // https://www.google.com/search?q={{{s}}}
+    const searchUrl = selectedBang?.u.replace(
+      "{{{s}}}",
+      // Replace %2F with / to fix formats like "!ghr+t3dotgg/unduck"
+      encodeURIComponent(cleanQuery).replace(/%2F/g, "/"),
+    );
+    if (!searchUrl) return null;
 
-  return searchUrl;
+    return searchUrl;
+  } else {
+    // No bang detected - use default search engine
+    const defaultSearchEngine = localStorage.getItem("default-search-engine") || "google";
+    const engine = DEFAULT_SEARCH_ENGINES.find(e => e.value === defaultSearchEngine);
+    
+    if (!engine) return null;
+    
+    return engine.url.replace("{{{s}}}", encodeURIComponent(query));
+  }
 }
 
 function doRedirect() {