Add fuzzysort dependency and implement bang search functionality

package.json

@@ -13,6 +13,7 @@
     "vite": "^6.1.0"
   },
   "dependencies": {
+    "fuzzysort": "^3.1.0",
     "vite-plugin-pwa": "^0.21.1"
   }
 }

pnpm-lock.yaml

@@ -8,6 +8,9 @@ importers:
 
   .:
     dependencies:
+      fuzzysort:
+        specifier: ^3.1.0
+        version: 3.1.0
       vite-plugin-pwa:
         specifier: ^0.21.1
         version: 0.21.1(vite@6.1.0(terser@5.39.0))(workbox-build@7.3.0)(workbox-window@7.3.0)
@@ -1093,6 +1096,9 @@ packages:
   functions-have-names@1.2.3:
     resolution: {integrity: sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==}
 
+  fuzzysort@3.1.0:
+    resolution: {integrity: sha512-sR9BNCjBg6LNgwvxlBd0sBABvQitkLzoVY9MYYROQVX/FvfJ4Mai9LsGhDgd8qYdds0bY77VzYd5iuB+v5rwQQ==}
+
   gensync@1.0.0-beta.2:
     resolution: {integrity: sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==}
     engines: {node: '>=6.9.0'}
@@ -2976,6 +2982,8 @@ snapshots:
 
   functions-have-names@1.2.3: {}
 
+  fuzzysort@3.1.0: {}
+
   gensync@1.0.0-beta.2: {}
 
   get-intrinsic@1.2.7:

src/global.css

@@ -83,6 +83,7 @@ textarea {
   align-items: center;
   gap: 8px;
   margin-top: 16px;
+  margin-bottom: 16px;
 }
 
 /* Add this new style */
@@ -148,3 +149,8 @@ textarea {
 .footer a:hover {
   color: #333;
 }
+
+.bang-list {
+  height: 30vh;
+  overflow: auto;
+}

src/main.ts

@@ -1,6 +1,8 @@
+import { Bang } from "./bang.d";
 import { bangs as defaultBangs } from "./bang";
 import { bangs as customBangs } from "./custom-bang";
 import "./global.css";
+import fuzzysort from "fuzzysort";
 
 function noSearchDefaultPageRender() {
 	const app = document.querySelector<HTMLDivElement>("#app")!;
@@ -10,7 +12,8 @@ function noSearchDefaultPageRender() {
         <h1>Und*ck</h1>
         <p>DuckDuckGo's bang redirects are too slow. Add the following URL as a custom search engine to your browser. Enables <a href="https://duckduckgo.com/bang.html" target="_blank">all of DuckDuckGo's bangs.</a></p>
         <div class="url-container"> 
-          <input 
+          <input
+						id="url-input"
             type="text" 
             class="url-input"
             value="${`${window.location.origin}/?q=%s`}"
@@ -20,6 +23,16 @@ function noSearchDefaultPageRender() {
             <img src="/clipboard.svg" alt="Copy" />
           </button>
         </div>
+				<div>
+					<input
+						id="bang-search"
+						type="text"
+						placeholder="Search for a bang"
+						class="url-input"
+					/>
+					<div class="bang-list">
+					</div>
+				</div>
       </div>
       <footer class="footer">
         <a href="https://t3.chat" target="_blank">t3.chat</a>
@@ -33,7 +46,10 @@ function noSearchDefaultPageRender() {
 
 	const copyButton = app.querySelector<HTMLButtonElement>(".copy-button")!;
 	const copyIcon = copyButton.querySelector("img")!;
-	const urlInput = app.querySelector<HTMLInputElement>(".url-input")!;
+	const urlInput = app.querySelector<HTMLInputElement>("#url-input")!;
+
+	const bangInput = app.querySelector<HTMLInputElement>("#bang-search")!;
+	const bangList = app.querySelector<HTMLDivElement>(".bang-list")!;
 
 	copyButton.addEventListener("click", async () => {
 		await navigator.clipboard.writeText(urlInput.value);
@@ -43,6 +59,36 @@ function noSearchDefaultPageRender() {
 			copyIcon.src = "/clipboard.svg";
 		}, 2000);
 	});
+
+	// Wait for user to stop typing for 300ms
+	let timeout: number;
+	bangInput.addEventListener("keyup", (e) => {
+		if (timeout) {
+			clearTimeout(timeout);
+		}
+		timeout = setTimeout(() => {
+			const searchTerm = (e.target as HTMLInputElement).value;
+			if (!searchTerm) {
+				bangList.innerHTML = "";
+				return;
+			}
+
+			const results = fuzzysort
+				.go(searchTerm, bangs, {
+					keys: ["d", "s"],
+				})
+				.map((result) => result.obj);
+
+			bangList.innerHTML = results
+				.map((bang: Bang) => {
+					return `<div class="bang-item">
+						<span class="bang-name">!${bang.t}</span>
+						<span class="bang-description">${bang.d}</span>
+					</div>`;
+				})
+				.join("");
+		}, 300);
+	});
 }
 
 const bangs = [