[frontend] add global history

Author: velzie

frontend/src/Browser.tsx

@@ -1,15 +1,11 @@
 import { createState, type Stateful } from "dreamland/core";
-import { ThemeVars, type Theme } from "./theme";
-import { Tabs } from "./components/TabStrip";
-import { Omnibox } from "./components/Omnibox";
 import { browser, scramjet } from "./main";
-import iconAdd from "@ktibow/iconset-ion/add";
-import { Shell } from "./components/Shell";
-import { createMenu } from "./components/Menu";
 import { StatefulClass } from "./StatefulClass";
 import { Tab, type SerializedTab } from "./Tab";
 import { createDelegate } from "dreamland/core";
 import tlds from "tlds";
+import type { SerializedHistoryState } from "./History";
+import { HistoryState } from "./History";
 
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
@@ -43,6 +39,7 @@ export const config = createState({
 
 export type SerializedBrowser = {
 	tabs: SerializedTab[];
+	globalhistory: SerializedHistoryState[];
 	activetab: number;
 };
 
@@ -59,7 +56,7 @@ export class Browser extends StatefulClass {
 	tabs: Tab[] = [];
 	activetab: Tab;
 
-	globalhistory: string[];
+	globalhistory: HistoryState[];
 
 	unfocusframes: boolean = false;
 
@@ -71,13 +68,18 @@ export class Browser extends StatefulClass {
 		return {
 			tabs: this.tabs.map((t) => t.serialize()),
 			activetab: this.activetab.id,
+			globalhistory: this.globalhistory.map((s) => s.serialize()),
 		};
 	}
 	deserialize(de: SerializedBrowser) {
 		this.tabs = [];
+		this.globalhistory = de.globalhistory.map((s) => {
+			const state = new HistoryState();
+			state.deserialize(s);
+			return state;
+		});
 		for (let detab of de.tabs) {
 			let tab = this.newTab();
-			console.log(tab);
 			tab.deserialize(detab);
 		}
 		this.activetab = this.tabs[0]; // TODO

frontend/src/History.ts

@@ -1,17 +1,46 @@
+import { browser } from "./main";
 import type { Tab } from "./Tab";
 
 // history api emulation
-export type HistoryState = {
-	state: any;
+export class HistoryState {
 	url: URL;
+	tab: Tab;
+	state: any;
+	title?: string;
+	favicon?: string;
+
+	constructor(partial?: Partial<HistoryState>) {
+		Object.assign(this, partial);
+	}
+
+	serialize(): SerializedHistoryState {
+		return {
+			state: this.state,
+			url: this.url.href,
+			tab: this.tab.id,
+			title: this.title,
+			favicon: this.favicon,
+		};
+	}
+	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;
+	}
+}
+export type SerializedHistoryState = {
+	state: any;
+	url: string;
+	tab: number;
+	title?: string;
+	favicon?: string;
 };
 
 export type SerializedHistory = {
 	index: number;
-	states: {
-		state: any;
-		url: string;
-	}[];
+	states: SerializedHistoryState[];
 };
 
 export class History {
@@ -23,19 +52,30 @@ export class History {
 	serialize(): SerializedHistory {
 		return {
 			index: this.index,
-			states: this.states.map((s) => ({ state: s.state, url: s.url.href })),
+			states: this.states.map((s) => s.serialize()),
 		};
 	}
 	deserialize(de: SerializedHistory) {
 		this.index = de.index;
-		this.states = de.states.map((s) => ({
-			state: s.state,
-			url: new URL(s.url),
-		}));
+		this.states = de.states.map((s) => {
+			const state = new HistoryState();
+			state.deserialize(s);
+
+			return state;
+		});
+	}
+	current(): HistoryState {
+		if (this.index < 0 || this.index >= this.states.length) {
+			throw new Error("No current history state");
+		}
+
+		return this.states[this.index];
 	}
 
 	push(url: URL, state: any = null, navigate: boolean = true): HistoryState {
-		this.states.push({ url, state });
+		const hstate = new HistoryState({ url, state, tab: this.tab });
+		browser.globalhistory.push(hstate);
+		this.states.push(hstate);
 		this.index++;
 
 		if (navigate) this.tab._directnavigate(url);
@@ -47,9 +87,13 @@ export class History {
 	}
 	replace(url: URL, state: any, navigate: boolean = true): HistoryState {
 		if (this.index < this.states.length) {
-			this.states[this.index] = { url, state };
+			this.current().url = url;
+			this.current().state = state;
+			this.current().tab = this.tab;
+			this.current().title = undefined;
+			this.current().favicon = undefined;
 		} else {
-			this.push(url, state);
+			return this.push(url, state);
 		}
 
 		if (navigate) this.tab._directnavigate(url);