Update Mercado Libre URL and add test query functionality with UI enhancements

src/custom-bang.ts

@@ -22,6 +22,6 @@ export const bangs: Bang[] = [
 		s: "Mercado Libre",
 		sc: "Search",
 		t: "ml",
-		u: "https://www.mercadolibre.com.ar/search?q={{{s}}}",
+		u: "https://listado.mercadolibre.com.ar/{{{s}}}",
 	},
 ];

src/global.css

@@ -129,6 +129,36 @@ textarea {
   background: #28a745;
 }
 
+/* Test query styles */
+.test-query-container {
+  margin-top: 24px;
+  padding-top: 10px;
+  border-top: 1px solid #eee;
+  width: 100%;
+}
+
+.test-button {
+  padding: 8px 16px;
+  background-color: #4285f4;
+  color: white;
+  border-radius: 4px;
+  transition: all 0.2s;
+}
+
+.test-button:hover {
+  background-color: #3367d6;
+}
+
+.test-button:active {
+  background-color: #2a56c6;
+}
+
+.query-hint {
+  color: #666;
+  font-size: 14px;
+  margin-top: 8px;
+}
+
 /* Add footer styles */
 .footer {
   position: fixed;

src/main.ts

@@ -4,6 +4,11 @@ import { bangs as customBangs } from "./custom-bang";
 import "./global.css";
 import fuzzysort from "fuzzysort";
 
+const bangs = [
+	...defaultBangs.filter((bang) => !customBangs.some((c) => c.t === bang.t)),
+	...customBangs,
+];
+
 function noSearchDefaultPageRender() {
 	const app = document.querySelector<HTMLDivElement>("#app")!;
 	app.innerHTML = `
@@ -22,6 +27,19 @@ function noSearchDefaultPageRender() {
           <button class="copy-button">
             <img src="/clipboard.svg" alt="Copy" />
           </button>
+        </div>
+        <div class="test-query-container">
+          <div class="url-container">
+            <input
+              id="test-query-input"
+              type="text"
+              class="url-input"
+              placeholder="Enter a query with bang (e.g. !g cats)"
+            />
+            <button id="test-query-button" class="test-button">
+              Test
+            </button>
+          </div>
         </div>
 				<div>
 					<input
@@ -51,6 +69,29 @@ function noSearchDefaultPageRender() {
 	const bangInput = app.querySelector<HTMLInputElement>("#bang-search")!;
 	const bangList = app.querySelector<HTMLDivElement>(".bang-list")!;
 
+	// Test query functionality
+	const testQueryInput =
+		app.querySelector<HTMLInputElement>("#test-query-input")!;
+	const testQueryButton =
+		app.querySelector<HTMLButtonElement>("#test-query-button")!;
+
+	testQueryButton.addEventListener("click", () => {
+		const query = testQueryInput.value.trim();
+		if (query) {
+			// Redirect to the current site with the query parameter
+			window.location.href = `${window.location.origin}/?q=${encodeURIComponent(
+				query
+			)}`;
+		}
+	});
+
+	// Allow pressing Enter to submit
+	testQueryInput.addEventListener("keydown", (e) => {
+		if (e.key === "Enter") {
+			testQueryButton.click();
+		}
+	});
+
 	copyButton.addEventListener("click", async () => {
 		await navigator.clipboard.writeText(urlInput.value);
 		copyIcon.src = "/clipboard-check.svg";
@@ -91,11 +132,6 @@ function noSearchDefaultPageRender() {
 	});
 }
 
-const bangs = [
-	...defaultBangs.filter((bang) => !customBangs.some((c) => c.t === bang.t)),
-	...customBangs,
-];
-
 const LS_DEFAULT_BANG = localStorage.getItem("default-bang") ?? "g";
 const defaultBang = bangs.find((b) => b.t === LS_DEFAULT_BANG);