From cb40e28e42195855ad1e5c4577ca0f91fdb5c92a Mon Sep 17 00:00:00 2001
From: pfaj <pfaj2004@gmail.com>
Date: Mon, 3 Mar 2025 18:02:16 -0500
Subject: [PATCH] src/main: added an engine selector on the page so users can
 set a default

---
 src/global.css | 60 ++++++++++++++++++++++++++++++++++++++++++
 src/main.ts    | 71 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 131 insertions(+)

diff --git a/src/global.css b/src/global.css
index 746822504..52f01256d 100644
--- a/src/global.css
+++ b/src/global.css
@@ -128,6 +128,66 @@ textarea {
   background: #28a745;
 }
 
+/* Add Engine Selector Styles */
+.dropdown-container {
+  display: flex;
+  flex-direction: row;
+  gap: 10px;
+  margin-bottom: 10px;
+}
+
+.engine-text{
+  align-content: center;
+}
+
+.engine-selector {
+  padding: 8px 12px;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  background: #f5f5f5;
+  font-size: 16px;
+  min-width: 250px;
+}
+
+.submit-button {
+  padding: 8px 16px;
+  color: black;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 16px;
+}
+
+.submit-button:hover {
+  background-color: #f0f0f0;
+}
+
+.saved-message {
+  margin-top: 40px;
+  padding: 8px 8px;
+  background-color: #d4edda;
+  color: #28a745;
+  border-radius: 4px;
+  position: absolute;
+  top: 50%; 
+  left: 50%;
+  transform: translate(-50%, -50%);
+  animation: fadeOut 2s forwards;
+  animation-delay: 1s;
+}
+
+@keyframes fadeOut {
+  from { opacity: 1; }
+  to { opacity: 0; }
+}
+
+/* Top-right positioning for the engine selector */
+.top-right-container {
+  position: absolute;
+  top: 10px;
+  right: 10px;
+}
+
 /* Add footer styles */
 .footer {
   position: fixed;
diff --git a/src/main.ts b/src/main.ts
index 13ebe4820..822213c41 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,6 +3,9 @@ import "./global.css";
 
 function noSearchDefaultPageRender() {
   const app = document.querySelector<HTMLDivElement>("#app")!;
+
+  const currentDefault = localStorage.getItem("default-bang") ?? "g";
+
   app.innerHTML = `
     <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh;">
       <div class="content-container">
@@ -19,6 +22,21 @@ function noSearchDefaultPageRender() {
             <img src="/clipboard.svg" alt="Copy" />
           </button>
         </div>
+        <div class="top-right-container">
+          <div class="engine-container">
+            <div class="dropdown-container">
+              <div class="engine-text">
+                Default Engine:
+              </div>
+              <select class="engine-selector" class="engine-selector">
+                <!-- Options will be populated by JavaScript -->
+              </select>
+              <button class="submit-button">
+                Save
+              </button>
+            </div>
+          </div>
+        </div>
       </div>
       <footer class="footer">
         <a href="https://t3.chat" target="_blank">t3.chat</a>
@@ -42,6 +60,59 @@ function noSearchDefaultPageRender() {
       copyIcon.src = "/clipboard.svg";
     }, 2000);
   });
+
+  // Deafault Engine Selector
+  const engineSelector = app.querySelector<HTMLSelectElement>(".engine-selector")!;
+  populateEngineDropdown(engineSelector, currentDefault);
+
+  const submitButton = app.querySelector<HTMLButtonElement>(".submit-button")!;
+  submitButton.addEventListener("click", () => {
+    const selectedEngine = engineSelector.value;
+    localStorage.setItem("default-bang", selectedEngine);
+    showSavedMessage();
+  });
+
+
+  function showSavedMessage() {
+    const existingMessage = app.querySelector(".saved-message");
+    if (existingMessage) existingMessage.remove();
+    
+    const message = document.createElement("div");
+    message.className = "saved-message";
+    message.textContent = "Default engine saved!";
+    app.querySelector(".engine-container")!.appendChild(message);
+    
+    setTimeout(() => message.remove(), 2000);
+  }
+}
+
+function populateEngineDropdown(selectElement: HTMLSelectElement, currentDefault: string) {
+  const commonEngines = [
+    { t: "g", d: "Google"},
+    { t: "ddg", d: "DuckDuckGo"},
+    { t: "b", d: "Bing"},
+    { t: "brave", d: "Brave"},
+    { t: "y", d: "Yahoo"},
+    { t: "yt", d: "YouTube"},
+    { t: "w", d: "Wikipedia"},
+    { t: "gh", d: "GitHub"},
+    { t: "spen", d: "StartPage (English)"},
+    { t: "a", d: "Amazon"},
+    { t: "r", d: "Reddit"}
+  ];
+
+  const commonGroup = document.createElement("optgroup");
+  commonGroup.label = "Engines";
+  
+  commonEngines.forEach(engine => {
+    const option = document.createElement("option");
+    option.value = engine.t;
+    option.textContent = `${engine.d} (!${engine.t})`;
+    option.selected = engine.t === currentDefault;
+    commonGroup.appendChild(option);
+  });
+  
+  selectElement.appendChild(commonGroup);
 }
 
 const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "g";