[frontend] implement navigating from the omnibox

Author: velzie

frontend/src/Omnibox.tsx

@@ -24,6 +24,7 @@ Spacer.css = `
 export const UrlInput: Component<
 	{
 		value: string;
+		navigate: (url: string) => void;
 	},
 	{
 		active: boolean;
@@ -121,6 +122,14 @@ export const UrlInput: Component<
 						}
 						if (e.key === "Enter") {
 							e.preventDefault();
+							if (this.focusindex > 0) {
+								this.value = this.overflowItems[this.focusindex - 1];
+								this.navigate(this.value);
+								this.active = false;
+								this.input.blur();
+							} else {
+								this.navigate(this.value);
+							}
 						}
 					}}
 					on:input={(e: InputEvent) => {
@@ -220,14 +229,15 @@ IconButton.css = `
 
 export const Omnibox: Component<{
 	value: string;
+	navigate: (url: string) => void;
 }> = function (cx) {
 	return (
 		<div>
 			<IconButton icon={iconBack}></IconButton>
 			<IconButton icon={iconForwards}></IconButton>
 			<IconButton icon={iconRefresh}></IconButton>
 			<Spacer></Spacer>
-			<UrlInput value={use(this.value)}></UrlInput>
+			<UrlInput value={use(this.value)} navigate={this.navigate}></UrlInput>
 			<Spacer></Spacer>
 			<IconButton icon={iconExtension}></IconButton>
 			<IconButton

frontend/src/browser.tsx

@@ -109,6 +109,15 @@ export class Browser extends StatefulClass {
 		return tab;
 	}
 
+	navigate(url: string) {
+		if (URL.canParse(url)) {
+			this.activetab.frame.go(url);
+		} else {
+			const search = `https://google.com/search?q=${encodeURIComponent(url)}`;
+			this.activetab.frame.go(search);
+		}
+	}
+
 	destroyTab(tab: Tab) {
 		this.tabs = this.tabs.filter((t) => t !== tab);
 		console.log(this.tabs);
@@ -145,7 +154,10 @@ export class Browser extends StatefulClass {
 						}}
 					></IconButton>
 				</div>
-				<Omnibox value={use(this.activetab.url)} />
+				<Omnibox
+					value={use(this.activetab.url)}
+					navigate={(url) => this.navigate(url)}
+				/>
 				{shell}
 			</div>
 		);