[scramjet, chrome] misc improvements

packages/chrome/src/App.tsx

@@ -5,7 +5,7 @@ import type { Tab } from "./Tab";
 import { BookmarksStrip } from "./components/BookmarksStrip";
 import { Omnibar } from "./components/Omnibar/Omnibar";
 
-export function App(_, cx: ComponentContext) {
+export function App(props: {}, cx: ComponentContext) {
 	const applyTheme = () => {
 		let theme = browser.settings.theme;
 
@@ -45,7 +45,7 @@ export function App(_, cx: ComponentContext) {
 				}}
 			/>
 			<Omnibar tab={use(browser.activetab)} />
-			{use(browser.activetab.url, browser.settings.bookmarksPinned)
+			{use(browser.activetab.url, browser.settings.showBookmarksBar)
 				.map(([u, pinned]) => pinned || u.href === "puter://newtab")
 				.andThen(<BookmarksStrip />)}
 			<div style="border-bottom: 1px solid var(--bg20)"></div>

packages/chrome/src/Browser.tsx

@@ -62,7 +62,6 @@ export type Settings = {
 	startupPage: "new-tab" | "continue";
 	defaultZoom: number;
 	showBookmarksBar: boolean;
-	bookmarksPinned: boolean;
 	defaultSearchEngine:
 		| "google"
 		| "bing"
@@ -98,7 +97,6 @@ export class Browser extends StatefulClass {
 		startupPage: "new-tab",
 		defaultZoom: 100,
 		showBookmarksBar: true,
-		bookmarksPinned: false,
 		defaultSearchEngine: "google",
 		searchSuggestionsEnabled: true,
 		blockTrackers: true,
@@ -219,11 +217,16 @@ export class Browser extends StatefulClass {
 			state.deserialize(s);
 			return state;
 		});
-		for (let detab of de.tabs) {
-			let tab = this.newTab();
-			tab.deserialize(detab);
-			tab.history.justTriggeredNavigation = true;
-			tab.history.go(0, false);
+
+		if (de.settings.startupPage === "continue") {
+			for (let detab of de.tabs) {
+				let tab = this.newTab();
+				tab.deserialize(detab);
+				tab.history.justTriggeredNavigation = true;
+				tab.history.go(0, false);
+			}
+		} else {
+			this.tabs[0] = this.newTab();
 		}
 		this.activetab = this.tabs[0];
 		this.bookmarks = de.bookmarks.map(createState);

packages/chrome/src/assets/favicon.ts

@@ -1,3 +1,3 @@
-import defaultFavicon from "../../public/defaultfavicon.png";
+import defaultFavicon from "/defaultfavicon.png";
 
 export const defaultFaviconUrl = defaultFavicon;

packages/chrome/src/components/BookmarkPopup.tsx

@@ -5,56 +5,44 @@ import { Input } from "./Input";
 import { closeMenu } from "./Menu";
 import { Button } from "./Button";
 
-export function BookmarkPopup(s: {
+export function BookmarkPopup(props: {
 	bookmark: Stateful<BookmarkEntry>;
 	new: boolean;
 }) {
 	return (
 		<div>
-			<div class="title">{s.new ? "Add Bookmark" : "Edit Bookmark"}</div>
+			<div class="title">{props.new ? "Add Bookmark" : "Edit Bookmark"}</div>
 
 			<div class="field">
-				<Input
-					label="Title"
-					value={s.bookmark.title}
-					onInput={(e) =>
-						(s.bookmark.title = (e.target as HTMLInputElement).value)
-					}
-				/>
+				<Input label="Title" value={use(props.bookmark.title)} />
 			</div>
 			<div class="field">
-				<Input
-					label="URL"
-					value={s.bookmark.url}
-					onInput={(e) =>
-						(s.bookmark.url = (e.target as HTMLInputElement).value)
-					}
-				/>
+				<Input label="URL" value={use(props.bookmark.url)} />
 			</div>
 			<div class="actions">
 				<Button
 					on:click={() => {
-						if (!s.new) {
+						if (!props.new) {
 							browser.bookmarks = browser.bookmarks.filter(
-								(b) => b !== s.bookmark
+								(b) => b !== props.bookmark
 							);
 						}
 						closeMenu();
 					}}
 				>
-					{s.new ? "Cancel" : "Delete"}
+					{props.new ? "Cancel" : "Delete"}
 				</Button>
 				<Button
 					variant="primary"
 					on:click={() => {
-						if (s.new) {
-							browser.bookmarks = [s.bookmark, ...browser.bookmarks];
+						if (props.new) {
+							browser.bookmarks = [props.bookmark, ...browser.bookmarks];
 						}
 
 						closeMenu();
 					}}
 				>
-					{s.new ? "Add" : "Save"}
+					{props.new ? "Add" : "Save"}
 				</Button>
 			</div>
 		</div>

packages/chrome/src/components/BookmarksStrip.tsx

@@ -5,7 +5,7 @@ import { browser, type BookmarkEntry } from "../Browser";
 import { createMenu, createMenuCustom, setContextMenu } from "./Menu";
 import { BookmarkPopup } from "./BookmarkPopup";
 
-export function BookmarksStrip(_, cx: ComponentContext) {
+export function BookmarksStrip(props: {}, cx: ComponentContext) {
 	cx.mount = () => {
 		setContextMenu(cx.root, [
 			{
@@ -15,11 +15,11 @@ export function BookmarksStrip(_, cx: ComponentContext) {
 			},
 			{
 				label: "Pin Bookmarks Strip",
-				checkbox: use(browser.settings.bookmarksPinned),
+				checkbox: use(browser.settings.showBookmarksBar),
 			},
 		]);
 	};
-
+	console.log(browser.bookmarks);
 	return (
 		<div>
 			<button

packages/chrome/src/components/Omnibar/Suggestion.tsx

@@ -1,6 +1,7 @@
 import { css } from "dreamland/core";
-import type { OmniboxResult } from "./suggestions";
+import { type OmniboxResult, AVAILABLE_SEARCH_ENGINES } from "./suggestions";
 import { iconSearch, iconTrendingUp } from "../../icons";
+import { browser } from "../../Browser";
 import { Icon } from "../Icon";
 import { Favicon } from "../Favicon";
 import { trimUrl } from "./utils";
@@ -72,7 +73,12 @@ export function Suggestion(props: {
 						{item.title}
 						<span style="font-weight: normal; opacity: 0.7">
 							{" "}
-							- Google Search
+							-{" "}
+							{
+								AVAILABLE_SEARCH_ENGINES[browser.settings.defaultSearchEngine]
+									.name
+							}{" "}
+							Search
 						</span>
 					</span>
 				) : null}

packages/chrome/src/components/Omnibar/suggestions.ts

@@ -15,6 +15,53 @@ export type OmniboxResult = {
 	relevanceScore?: number;
 };
 
+export interface SearchEngine {
+	name: string;
+	suggestUrlBuilder: (query: string) => string;
+	searchUrlBuilder: (query: string) => string;
+	suggestionParser: (data: any) => string[];
+}
+
+/** Available search engines */
+export const AVAILABLE_SEARCH_ENGINES: Record<string, SearchEngine> = {
+	google: {
+		name: "Google",
+		searchUrlBuilder: (query) =>
+			`https://www.google.com/search?q=${encodeURIComponent(query)}`,
+		suggestUrlBuilder: (query) =>
+			`https://suggestqueries.google.com/complete/search?client=chrome&q=${encodeURIComponent(query)}`,
+		suggestionParser: (data) => {
+			if (Array.isArray(data) && data.length > 1 && Array.isArray(data[1])) {
+				return data[1].map((item: any) => String(item)).filter(Boolean);
+			}
+			return [];
+		},
+	},
+	brave: {
+		name: "Brave",
+		searchUrlBuilder: (query) =>
+			`https://search.brave.com/search?q=${encodeURIComponent(query)}`,
+		suggestUrlBuilder: (query) =>
+			`https://search.brave.com/api/suggest?q=${encodeURIComponent(query)}&source=web`,
+		suggestionParser: (data) => {
+			// Google format
+			if (Array.isArray(data) && data.length > 1 && Array.isArray(data[1])) {
+				// biome-ignore lint/suspicious/noExplicitAny: <explanation>
+				return data[1].map((item: any) => String(item)).filter(Boolean);
+			}
+			// Brave Format
+			if (
+				Array.isArray(data) &&
+				data.length > 0 &&
+				typeof data[0] === "string"
+			) {
+				return data.map((item: string) => String(item)).filter(Boolean);
+			}
+			return [];
+		},
+	},
+};
+
 function calculateRelevanceScore(result: OmniboxResult, query: string): number {
 	if (!query) return 0;
 
@@ -130,7 +177,9 @@ const addDirectResult = (
 			{
 				kind: "directsearch",
 				url: new URL(
-					`https://www.google.com/search?q=${encodeURIComponent(query)}`
+					AVAILABLE_SEARCH_ENGINES[
+						browser.settings.defaultSearchEngine
+					].searchUrlBuilder(query)
 				),
 				title: query,
 				favicon: null,
@@ -147,13 +196,20 @@ const fetchGoogleSuggestions = async (
 
 	try {
 		const resp = await bare.fetch(
-			`http://suggestqueries.google.com/complete/search?client=chrome&q=${encodeURIComponent(query)}`
+			AVAILABLE_SEARCH_ENGINES[
+				browser.settings.defaultSearchEngine
+			].suggestUrlBuilder(query)
 		);
 
 		const json = await resp.json();
+		let rawSuggestions =
+			AVAILABLE_SEARCH_ENGINES[
+				browser.settings.defaultSearchEngine
+			].suggestionParser(json);
+		rawSuggestions = rawSuggestions.slice(0, 5);
 		const suggestions: OmniboxResult[] = [];
 
-		for (const item of json[1].slice(0, 5)) {
+		for (const item of rawSuggestions) {
 			// it's gonna be stuff like "http //fortnite.com/2fa ps5"
 			// generally not useful
 			if (item.startsWith("http")) continue;
@@ -162,7 +218,9 @@ const fetchGoogleSuggestions = async (
 				kind: "search",
 				title: item,
 				url: new URL(
-					`https://www.google.com/search?q=${encodeURIComponent(item)}`
+					AVAILABLE_SEARCH_ENGINES[
+						browser.settings.defaultSearchEngine
+					].searchUrlBuilder(query)
 				),
 				favicon: null,
 			});
@@ -217,6 +275,7 @@ export type TrendingQuery = {
 
 export let trendingCached: TrendingQuery[] | null = null;
 export async function fetchGoogleTrending(geo = "US"): Promise<void> {
+	// TODO: make this search engine agnostic
 	try {
 		if (trendingCached) return;
 

packages/chrome/src/pages/AboutPage.tsx

@@ -1,12 +1,13 @@
 import { css } from "dreamland/core";
 import type { Tab } from "../Tab";
+import { versionInfo } from "@mercuryworkshop/scramjet";
 
-export function AboutPage(s: { tab: Tab }) {
+export function AboutPage(props: { tab: Tab }) {
 	return (
 		<div>
 			<div class="main">
 				<h1>Puter Browser</h1>
-				Scramjet Version: {$scramjetVersion.build} {$scramjetVersion.version}
+				Scramjet Version: {versionInfo.version} ({versionInfo.build})
 			</div>
 		</div>
 	);

packages/chrome/src/pages/DownloadsPage.tsx

@@ -6,7 +6,7 @@ import { Icon } from "../components/Icon";
 import { formatBytes } from "../utils";
 import { defaultFaviconUrl } from "../assets/favicon";
 
-export function DownloadsPage(s: { tab: Tab }) {
+export function DownloadsPage(props: { tab: Tab }) {
 	return (
 		<div>
 			<nav>

packages/chrome/src/pages/HistoryPage.tsx

@@ -3,7 +3,7 @@ import type { Tab } from "../Tab";
 import { browser } from "../Browser";
 import { defaultFaviconUrl } from "../assets/favicon";
 
-export function HistoryPage(s: { tab: Tab }) {
+export function HistoryPage(props: { tab: Tab }) {
 	return (
 		<div>
 			<nav>

packages/chrome/src/pages/PlaygroundPage.tsx

@@ -27,7 +27,7 @@ import type { Tab } from "../Tab";
 // 	}
 // `;
 
-export function PlaygroundPage(s: { tab: Tab }) {
+export function PlaygroundPage(props: { tab: Tab }) {
 	return (
 		<div>
 			<h1>Scramjet Playground</h1>