[frontend] blur omnibox on navigate, focus on newtab

Author: velzie

frontend/src/App.tsx

@@ -14,7 +14,7 @@ export const App: Component = function (cx) {
 				tabs={use(browser.tabs).bind()}
 				activetab={use(browser.activetab).bind()}
 				addTab={() => {
-					browser.newTab();
+					browser.newTab(new URL("puter://newtab"), true);
 				}}
 				destroyTab={(tab: Tab) => {
 					browser.destroyTab(tab);

frontend/src/Browser.tsx

@@ -6,6 +6,7 @@ import { createDelegate } from "dreamland/core";
 import tlds from "tlds";
 import type { SerializedHistoryState } from "./History";
 import { HistoryState } from "./History";
+import { focusOmnibox } from "./components/Omnibox";
 
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
@@ -90,11 +91,12 @@ export class Browser extends StatefulClass {
 		console.log(this.activetab, this.activetab.url);
 	}
 
-	newTab(url?: URL) {
+	newTab(url?: URL, focusomnibox: boolean = false) {
 		let tab = new Tab(url);
 		pushTab(tab);
 		this.tabs = [...this.tabs, tab];
 		this.activetab = tab;
+		if (focusomnibox) focusOmnibox();
 		return tab;
 	}
 

frontend/src/components/Omnibox.tsx

@@ -13,6 +13,8 @@ import { IconButton } from "./IconButton";
 import { createDelegate, type Delegate } from "dreamland/core";
 import type { Tab } from "../Tab";
 
+export const focusOmnibox = createDelegate<void>();
+
 export function trimUrl(v: URL) {
 	return (
 		(v.protocol === "puter:" ? v.protocol : "") + v.host + v.pathname + v.search
@@ -53,6 +55,14 @@ export const UrlInput: Component<
 	this.focusindex = 0;
 	this.overflowItems = [];
 	this.value = "";
+
+	focusOmnibox.listen(() => {
+		console.log("WH");
+		setTimeout(() => {
+			activate();
+		}, 10);
+	});
+
 	const fetchSuggestions = async () => {
 		let search = this.input.value;
 
@@ -213,11 +223,12 @@ export const UrlInput: Component<
 									browser.activetab.pushNavigate(
 										this.overflowItems[this.focusindex - 1].url
 									);
-									this.active = false;
-									this.input.blur();
 								} else {
 									browser.searchNavigate(this.value);
 								}
+
+								this.active = false;
+								this.input.blur();
 							}
 						}}
 						on:input={(e: InputEvent) => {
@@ -367,7 +378,7 @@ export const Omnibox: Component<{
 						{
 							label: "New Tab",
 							action: () => {
-								browser.newTab();
+								browser.newTab(new URL("puter://newtab"), true);
 							},
 						},
 						{

frontend/src/pages/NewTabPage.tsx

@@ -24,7 +24,7 @@ export const NewTabPage: Component<
 				></input>
 				<div class="suggestions">
 					{browser.globalhistory.slice(0, 5).map((entry) => (
-						<div class="suggestion" on:click={() => browser.newTab()}>
+						<div class="suggestion" on:click={() => browser.newTab(entry.url)}>
 							<div class="circle">
 								<img src={entry.favicon || "/vite.svg"} alt="favicon" />
 							</div>