[frontend] add results from google autocomplete api

Author: velzie

frontend/src/Omnibox.tsx

@@ -10,6 +10,7 @@ import iconShield from "@ktibow/iconset-material-symbols/shield";
 import iconStar from "@ktibow/iconset-material-symbols/star";
 import iconSearch from "@ktibow/iconset-material-symbols/search";
 import { createMenu } from "./Menu";
+import { client } from "./main";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;
@@ -23,13 +24,41 @@ Spacer.css = `
 export const UrlInput: Component<
 	{},
 	{
+		value: string;
 		active: boolean;
 		input: HTMLInputElement;
 
 		overflowItems: string[];
 	}
 > = function (cx) {
+	this.value = "";
 	this.overflowItems = ["test", "test2", "test3", "test4", "test5"];
+	const fetchSuggestions = async () => {
+		console.log("fetched");
+		let resp = await client.fetch(
+			`http://suggestqueries.google.com/complete/search?client=firefox&q=${encodeURIComponent(this.input.value)}`
+		);
+		let json = await resp.json();
+		console.log(json);
+		this.overflowItems = json[1].slice(0, 5);
+	};
+	let currentTimeout: number | null = null;
+	let ratelimiting = false;
+	let interval = 100;
+	use(this.value).listen(() => {
+		if (ratelimiting) {
+			if (currentTimeout) return;
+			// TODO: why is it using the node types here
+			currentTimeout = setTimeout(() => {
+				ratelimiting = false;
+				fetchSuggestions();
+				currentTimeout = null;
+			}, interval);
+		} else {
+			ratelimiting = true;
+			fetchSuggestions();
+		}
+	});
 	return (
 		<div
 			on:click={(e: MouseEvent) => {
@@ -61,7 +90,13 @@ export const UrlInput: Component<
 			</div>
 			<div class="realbar">
 				<IconButton icon={iconShield}></IconButton>
-				<input this={use(this.input).bind()}></input>
+				<input
+					this={use(this.input).bind()}
+					value={use(this.value).bind()}
+					on:input={(e: InputEvent) => {
+						this.value = (e.target as HTMLInputElement).value;
+					}}
+				></input>
 
 				<IconButton icon={iconStar}></IconButton>
 			</div>

frontend/src/main.tsx

@@ -3,6 +3,12 @@ import "./style.css";
 import { createBrowser } from "./browser";
 import { createMenu } from "./Menu";
 let app = document.getElementById("app")!;
+import { BareMuxConnection, BareClient } from "@mercuryworkshop/bare-mux";
+
+let connection = new BareMuxConnection("/baremux/worker.js");
+connection.setTransport("/epoxy/index.mjs", [{ wisp: "wss://anura.pro" }]);
+export let client = new BareClient();
+console.log(client);
 
 let browser = createBrowser();
 (self as any).browser = browser;

frontend/vite.config.ts

@@ -1,20 +1,22 @@
 import { defineConfig } from "vite";
+import { epoxyPath } from "@mercuryworkshop/epoxy-transport";
+import { baremuxPath } from "@mercuryworkshop/bare-mux/node";
+console.log(epoxyPath, baremuxPath);
 
 export default defineConfig({
-	// plugins: [
-	// 	{
-	// 		name: "dreamland",
-	// 		handleHotUpdate(ctx) {
-	// 			console.log(ctx.modules);
-	// 			ctx.server.ws.send({
-	// 				type: "custom",
-	// 				event: "special-update",
-	// 				data: {
-	// 					file: ctx.file,
-	// 				},
-	// 			});
-	// 			return [];
-	// 		},
-	// 	},
-	// ],
+	plugins: [
+		{
+			name: "static-files",
+			configureServer(server) {
+				server.middlewares.use((req, res, next) => {
+					if (req.url.startsWith("/epoxy/")) {
+						req.url = req.url.replace("/epoxy/", epoxyPath + "/");
+					} else if (req.url.startsWith("/baremux/")) {
+						req.url = req.url.replace("/baremux/", baremuxPath + "/");
+					}
+					next();
+				});
+			},
+		},
+	],
 });