[frontend] implement internal puter:// pages

Author: velzie

frontend/src/components/Shell.tsx

@@ -13,7 +13,9 @@ export const Shell: Component<{
 			<div
 				class={`container ${cx.id}`}
 				class:active={use(this.activetab).map((t) => t === tab)}
+				class:showframe={use(tab.internalpage).map((t) => !t)}
 			>
+				{use(tab.internalpage)}
 				{tab.frame.frame}
 			</div>
 		);
@@ -48,5 +50,9 @@ Shell.css = `
     width: 100%;
     height: 100%;
     border: none;
+    display: none;
+  }
+  .showframe iframe{
+    display: block;
   }
 `;

frontend/src/history.ts

@@ -12,7 +12,7 @@ export class History {
 
 	constructor(private tab: Tab) {}
 
-	push(url: URL, state: any, navigate: boolean = true): HistoryState {
+	push(url: URL, state: any = null, navigate: boolean = true): HistoryState {
 		this.states.push({ url, state });
 		this.index++;
 
@@ -60,8 +60,9 @@ export class History {
 	}
 }
 
-export function injectHistoryEmulation(frame: ScramjetFrame, tab: Tab) {
+export function addHistoryListeners(frame: ScramjetFrame, tab: Tab) {
 	frame.addEventListener("navigate", (e) => {
+		console.log("History push from navigate", e, tab.history.states);
 		// this event is fired whenever location.href is set, or similar
 		// importantly not fired when replaceState is called (we overwrite it ourselves in injectContext)
 
@@ -71,12 +72,14 @@ export function injectHistoryEmulation(frame: ScramjetFrame, tab: Tab) {
 
 		console.log("History push from navigate", url, tab.history.states);
 	});
-	frame.frame.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
+}
+
+export function injectHistoryEmulation(client: ScramjetClient, tab: Tab) {
+	// this is extremely problematic in terms of security but whatever
+	client.global.addEventListener("beforeunload", (e: BeforeUnloadEvent) => {
 		console.log("History beforeunload", e);
 	});
-}
 
-function injectContext(client: ScramjetClient, tab: Tab) {
 	client.Proxy("History.prototype.pushState", {
 		apply(ctx) {
 			console.log("STATE PUSH", ctx.args);

frontend/src/pages/NewTab.tsx

@@ -0,0 +1,56 @@
+import type { Component } from "dreamland/core";
+import type { Tab } from "../Tab";
+
+export const NewTab: Component<
+	{
+		tab: Tab;
+	},
+	{}
+> = function (cx) {
+	return (
+		<div>
+			<div class="main">
+				<h1>Puter Browser</h1>
+				<input
+					on:keydown={(e: KeyboardEvent) => {
+						if (e.key === "Enter") {
+							e.preventDefault();
+							this.tab.history.push(new URL(e.target!.value));
+						}
+					}}
+					placeholder="Search Google or type A URL"
+				></input>
+			</div>
+		</div>
+	);
+};
+NewTab.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;
+}
+`;