[frontend] add puter://history page

Author: velzie

frontend/src/Browser.tsx

@@ -56,7 +56,7 @@ export class Browser extends StatefulClass {
 	tabs: Tab[] = [];
 	activetab: Tab;
 
-	globalhistory: HistoryState[];
+	globalhistory: HistoryState[] = [];
 
 	unfocusframes: boolean = false;
 
@@ -82,8 +82,7 @@ export class Browser extends StatefulClass {
 			let tab = this.newTab();
 			tab.deserialize(detab);
 		}
-		this.activetab = this.tabs[0]; // TODO
-		// this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
+		this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
 		console.log(this.activetab, this.activetab.url);
 	}
 

frontend/src/History.ts

@@ -4,38 +4,39 @@ import type { Tab } from "./Tab";
 // history api emulation
 export class HistoryState {
 	url: URL;
-	tab: Tab;
 	state: any;
-	title?: string;
-	favicon?: string;
+	title: string | null;
+	favicon: string | null;
+	timestamp: number;
 
 	constructor(partial?: Partial<HistoryState>) {
 		Object.assign(this, partial);
+		this.timestamp = Date.now();
 	}
 
 	serialize(): SerializedHistoryState {
 		return {
 			state: this.state,
 			url: this.url.href,
-			tab: this.tab.id,
 			title: this.title,
 			favicon: this.favicon,
+			timestamp: this.timestamp,
 		};
 	}
 	deserialize(de: SerializedHistoryState) {
 		this.state = de.state;
 		this.url = new URL(de.url);
-		this.tab = browser.tabs.find((t) => t.id === de.tab) || this.tab;
 		this.title = de.title;
 		this.favicon = de.favicon;
+		this.timestamp = de.timestamp;
 	}
 }
 export type SerializedHistoryState = {
 	state: any;
 	url: string;
-	tab: number;
-	title?: string;
-	favicon?: string;
+	title: string | null;
+	favicon: string | null;
+	timestamp: number;
 };
 
 export type SerializedHistory = {
@@ -73,8 +74,8 @@ export class History {
 	}
 
 	push(url: URL, state: any = null, navigate: boolean = true): HistoryState {
-		const hstate = new HistoryState({ url, state, tab: this.tab });
-		browser.globalhistory.push(hstate);
+		const hstate = new HistoryState({ url, state });
+		if (url.href != "puter://newtab") browser.globalhistory.push(hstate);
 		this.states.push(hstate);
 		this.index++;
 
@@ -89,9 +90,8 @@ export class History {
 		if (this.index < this.states.length) {
 			this.current().url = url;
 			this.current().state = state;
-			this.current().tab = this.tab;
-			this.current().title = undefined;
-			this.current().favicon = undefined;
+			this.current().title = null;
+			this.current().favicon = null;
 		} else {
 			return this.push(url, state);
 		}

frontend/src/Tab.tsx

@@ -7,10 +7,11 @@ import {
 	injectHistoryEmulation,
 	type SerializedHistory,
 } from "./History";
-import { NewTab } from "./pages/NewTab";
-import { Playground } from "./pages/Playground";
+import { NewTabPage } from "./pages/NewTabPage";
+import { PlaygroundPage } from "./pages/PlaygroundPage";
 import { createMenu } from "./components/Menu";
-import { About } from "./pages/About";
+import { AboutPage } from "./pages/AboutPage";
+import { HistoryPage } from "./pages/HistoryPage";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 
@@ -106,15 +107,19 @@ export class Tab extends StatefulClass {
 			switch (url.host) {
 				case "newtab":
 					this.title = "New Tab";
-					this.internalpage = <NewTab tab={this} />;
+					this.internalpage = <NewTabPage tab={this} />;
 					break;
 				case "playground":
 					this.title = "Scramjet Playground";
-					this.internalpage = <Playground tab={this} />;
+					this.internalpage = <PlaygroundPage tab={this} />;
+					break;
+				case "history":
+					this.title = "Browser History";
+					this.internalpage = <HistoryPage tab={this}></HistoryPage>;
 					break;
 				case "version":
 					this.title = "About Version";
-					this.internalpage = <About tab={this} />;
+					this.internalpage = <AboutPage tab={this} />;
 			}
 		} else {
 			this.internalpage = null;
@@ -431,6 +436,8 @@ function injectTitleWatcher(client: ScramjetClient, tab: Tab) {
 		} else {
 			tab.icon = scramjet.encodeUrl(new URL("/favicon.ico", client.url));
 		}
+		tab.history.current().title = tab.title;
+		tab.history.current().favicon = tab.icon;
 	});
 	observer.observe(head, {
 		childList: true,

frontend/src/components/Omnibox.tsx

@@ -152,7 +152,7 @@ export const UrlInput: Component<
 									this.active = false;
 									this.input.blur();
 								} else {
-									this.navigate(this.value);
+									browser.searchNavigate(this.value);
 								}
 							}
 						}}
@@ -297,8 +297,7 @@ export const Omnibox: Component<{
 						{
 							label: "History",
 							action: () => {
-								let t = browser.newTab();
-								t.replaceNavigate(new URL("puter://history"));
+								let t = browser.newTab(new URL("puter://history"));
 							},
 						},
 						{

frontend/src/components/Shell.tsx

@@ -63,14 +63,14 @@ export const Shell: Component = function (cx) {
 		if (!container) throw new Error(`No container found for tab ${tab.id}`);
 		container.remove();
 	});
-	forceScreenshot.listen(async (tab) => {
-		const container = cx.root.querySelector(
-			`[data-tab="${tab.id}"]`
-		) as HTMLElement;
-		if (!container) throw new Error(`No container found for tab ${tab.id}`);
+	// forceScreenshot.listen(async (tab) => {
+	// 	const container = cx.root.querySelector(
+	// 		`[data-tab="${tab.id}"]`
+	// 	) as HTMLElement;
+	// 	if (!container) throw new Error(`No container found for tab ${tab.id}`);
 
-		// tab.screenshot = URL.createObjectURL(await toBlob(container));
-	});
+	// 	// tab.screenshot = URL.createObjectURL(await toBlob(container));
+	// });
 
 	return <div></div>;
 };

frontend/src/pages/About.tsx renamed to frontend/src/pages/AboutPage.tsx

@@ -2,7 +2,7 @@ import { css, type Component } from "dreamland/core";
 import type { Tab } from "../Tab";
 import { scramjet } from "../main";
 
-export const About: Component<
+export const AboutPage: Component<
 	{
 		tab: Tab;
 	},
@@ -17,7 +17,7 @@ export const About: Component<
 		</div>
 	);
 };
-About.style = css`
+AboutPage.style = css`
 	:scope {
 		width: 100%;
 		height: 100%;

frontend/src/pages/HistoryPage.tsx

@@ -0,0 +1,62 @@
+import { css, type Component } from "dreamland/core";
+import type { Tab } from "../Tab";
+import { browser } from "../main";
+
+export const HistoryPage: Component<
+	{
+		tab: Tab;
+	},
+	{}
+> = function (cx) {
+	return (
+		<div>
+			<h1>History</h1>
+			<div class="entries">
+				{browser.globalhistory
+					.sort((a, b) => b.timestamp - a.timestamp)
+					.map((entry) => (
+						<div
+							class="entry"
+							on:click={() => {
+								browser.newTab(entry.url);
+							}}
+						>
+							<img src={entry.favicon || "/vite.svg"} alt="favicon" />
+							<span class="title">{entry.title || entry.url.href}</span>
+							<span class="url">{entry.url.hostname}</span>
+						</div>
+					))}
+			</div>
+		</div>
+	);
+};
+HistoryPage.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		font-family: sans-serif;
+	}
+	.entries {
+		display: flex;
+		flex-direction: column;
+		gap: 1em;
+		width: 70%;
+	}
+	.entry {
+		display: flex;
+		align-items: center;
+		/*border-bottom: 1px solid #ccc;*/
+		cursor: pointer;
+		gap: 0.5em;
+	}
+	.entry img {
+		width: 16px;
+		height: 16px;
+	}
+	.entry .title {
+		font-weight: bold;
+	}
+`;

frontend/src/pages/NewTab.tsx renamed to frontend/src/pages/NewTabPage.tsx

@@ -2,7 +2,7 @@ import { css, type Component } from "dreamland/core";
 import type { Tab } from "../Tab";
 import { browser } from "../main";
 
-export const NewTab: Component<
+export const NewTabPage: Component<
 	{
 		tab: Tab;
 	},
@@ -25,7 +25,7 @@ export const NewTab: Component<
 		</div>
 	);
 };
-NewTab.style = css`
+NewTabPage.style = css`
 	:scope {
 		width: 100%;
 		height: 100%;

frontend/src/pages/Playground.tsx renamed to frontend/src/pages/PlaygroundPage.tsx

@@ -28,7 +28,7 @@ Editor.style = css`
 	}
 `;
 
-export const Playground: Component<
+export const PlaygroundPage: Component<
 	{
 		tab: Tab;
 	},
@@ -41,7 +41,7 @@ export const Playground: Component<
 		</div>
 	);
 };
-Playground.style = css`
+PlaygroundPage.style = css`
 	:scope {
 		width: 100%;
 		height: 100%;