[frontend] add about/version page

Author: velzie

frontend/src/Tab.tsx

@@ -9,6 +9,7 @@ import {
 import { NewTab } from "./pages/NewTab";
 import { Playground } from "./pages/Playground";
 import { createMenu } from "./components/Menu";
+import { About } from "./pages/About";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 
@@ -86,6 +87,9 @@ export class Tab extends StatefulClass {
 					this.title = "Scramjet Playground";
 					this.internalpage = <Playground tab={this} />;
 					break;
+				case "version":
+					this.title = "About Version";
+					this.internalpage = <About tab={this} />;
 			}
 		} else {
 			this.internalpage = null;

frontend/src/components/Omnibox.tsx

@@ -3,7 +3,7 @@ import iconBack from "@ktibow/iconset-ion/arrow-back";
 import iconForwards from "@ktibow/iconset-ion/arrow-forward";
 import iconRefresh from "@ktibow/iconset-ion/refresh";
 import iconExtension from "@ktibow/iconset-ion/extension-puzzle-outline";
-import iconSettings from "@ktibow/iconset-ion/settings-outline";
+import iconMore from "@ktibow/iconset-ion/more";
 import iconShield from "@ktibow/iconset-ion/shield-outline";
 import iconStar from "@ktibow/iconset-ion/star-outline";
 import iconSearch from "@ktibow/iconset-ion/search";
@@ -289,11 +289,35 @@ export const Omnibox: Component<{
 			<Spacer></Spacer>
 			<IconButton icon={iconExtension}></IconButton>
 			<IconButton
-				icon={iconSettings}
+				icon={iconMore}
 				click={(e: MouseEvent) => {
-					createMenu(e.x, e.y, [
+					createMenu(e.x, cx.root.clientTop + cx.root.clientHeight * 2, [
+						{
+							label: "New Tab",
+							action: () => {
+								browser.newTab();
+							},
+						},
+						{
+							label: "History",
+							action: () => {
+								let t = browser.newTab();
+								t.replaceNavigate(new URL("puter://history"));
+							},
+						},
 						{
 							label: "Settings",
+							action: () => {
+								let t = browser.newTab();
+								t.replaceNavigate(new URL("puter://settings"));
+							},
+						},
+						{
+							label: "About",
+							action: () => {
+								let t = browser.newTab();
+								t.replaceNavigate(new URL("puter://version"));
+							},
 						},
 					]);
 					e.stopPropagation();

frontend/src/pages/About.tsx

@@ -0,0 +1,49 @@
+import { css, type Component } from "dreamland/core";
+import type { Tab } from "../Tab";
+import { scramjet } from "../main";
+
+export const About: Component<
+	{
+		tab: Tab;
+	},
+	{}
+> = function (cx) {
+	return (
+		<div>
+			<div class="main">
+				<h1>Puter Browser</h1>
+				Scramjet Version: {$scramjetVersion.build} {$scramjetVersion.version}
+			</div>
+		</div>
+	);
+};
+About.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		font-family: sans-serif;
+	}
+
+	.main {
+		width: 70%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	input {
+		width: 100%;
+		height: 2em;
+		font-size: 1.5em;
+		border: 2px solid #ccc;
+		outline: none;
+		border-radius: 4px;
+	}
+
+	.main {
+		position: relative;
+		top: 10em;
+	}
+`;