[frontend] save browser state to puter cloud

Author: velzie

frontend/src/App.tsx

@@ -1,7 +1,7 @@
 import type { Component } from "dreamland/core";
 import { Omnibox } from "./components/Omnibox";
 import { Tabs } from "./components/TabStrip";
-import { browser } from "./main";
+import { browser } from "./Browser";
 import type { Tab } from "./Tab";
 import { BookmarksStrip } from "./components/BookmarksStrip";
 

frontend/src/Browser.tsx

@@ -1,5 +1,4 @@
 import { createState, type Stateful } from "dreamland/core";
-import { browser, scramjet } from "./main";
 import { StatefulClass } from "./StatefulClass";
 import { Tab, type SerializedTab } from "./Tab";
 import { createDelegate } from "dreamland/core";
@@ -8,12 +7,11 @@ import { HistoryState } from "./History";
 import { focusOmnibox } from "./components/UrlInput";
 
 import * as tldts from "tldts";
-console.log(tldts);
 export const pushTab = createDelegate<Tab>();
 export const popTab = createDelegate<Tab>();
 export const forceScreenshot = createDelegate<Tab>();
 
-export const saveBrowserState = createDelegate<void>();
+export let browser: Browser;
 
 export const config = createState({
 	theme: {
@@ -154,7 +152,45 @@ export class Browser extends StatefulClass {
 	}
 }
 
-saveBrowserState.listen(() => {
+let loaded = false;
+export function saveBrowserState() {
+	if (!loaded) return;
+
 	let ser = browser.serialize();
-	localStorage["browserstate"] = JSON.stringify(ser);
-});
+
+	if (import.meta.env.VITE_LOCAL) {
+		localStorage["browserstate"] = JSON.stringify(ser);
+	} else {
+		puter.kv.set("browserstate", JSON.stringify(ser));
+	}
+}
+
+export async function initBrowser() {
+	browser = new Browser();
+
+	let de;
+	if (import.meta.env.VITE_LOCAL) {
+		de = localStorage["browserstate"];
+	} else {
+		de = await puter.kv.get("browserstate");
+		console.log(de);
+	}
+	if (de) {
+		try {
+			browser.deserialize(JSON.parse(de));
+		} catch (e) {
+			console.error(e);
+			console.error("Error while loading browser state. Resetting...");
+
+			browser = new Browser();
+			let tab = browser.newTab();
+			browser.activetab = tab;
+		}
+	} else {
+		let tab = browser.newTab();
+		browser.activetab = tab;
+	}
+
+	(self as any).browser = browser;
+	loaded = true;
+}

frontend/src/CDP.ts

@@ -1,3 +1,7 @@
+import type Protocol from "devtools-protocol";
+import { browser } from "./Browser";
+import type { Tab } from "./Tab";
+
 export function startCDP(message: (message: string) => void): CDPServer {
 	const server = new CDPServer(message);
 
@@ -166,10 +170,6 @@ class CDPServer {
 	}
 }
 
-import type Protocol from "devtools-protocol";
-import { browser } from "./main";
-import type { Tab } from "./Tab";
-
 function createTargetInfo(tab: Tab): Protocol.Target.TargetInfo {
 	return {
 		browserContextId: "0",

frontend/src/History.ts

@@ -1,4 +1,4 @@
-import { browser } from "./main";
+import { browser } from "./Browser";
 import type { Tab } from "./Tab";
 
 // history api emulation

frontend/src/Tab.tsx

@@ -1,6 +1,6 @@
 import { createDelegate, createState } from "dreamland/core";
 import { StatefulClass } from "./StatefulClass";
-import { browser, scramjet } from "./main";
+import { browser } from "./Browser";
 import {
 	addHistoryListeners,
 	History,
@@ -13,6 +13,7 @@ import { createMenu } from "./components/Menu";
 import { AboutPage } from "./pages/AboutPage";
 import { HistoryPage } from "./pages/HistoryPage";
 import { SettingsPage } from "./pages/SettingsPage";
+import { scramjet } from "./main";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 

frontend/src/components/BookmarksStrip.tsx

@@ -1,7 +1,7 @@
 import { css, type Component } from "dreamland/core";
 import { Icon } from "./Icon";
 import iconAdd from "@ktibow/iconset-ion/add";
-import { browser } from "../main";
+import { browser } from "../Browser";
 import { createMenu } from "./Menu";
 
 export const BookmarksStrip: Component = function () {

frontend/src/components/Menu.tsx

@@ -1,5 +1,5 @@
 import { css, type Component, type DLElement } from "dreamland/core";
-import { browser } from "../main";
+import { browser } from "../Browser";
 
 export const Menu: Component<{
 	x: number;

frontend/src/components/Omnibox.tsx

@@ -5,11 +5,11 @@ import iconRefresh from "@ktibow/iconset-ion/refresh";
 import iconExtension from "@ktibow/iconset-ion/extension-puzzle-outline";
 import iconMore from "@ktibow/iconset-ion/more";
 import { createMenu, setContextMenu } from "./Menu";
-import { browser, scramjet } from "../main";
 import { IconButton } from "./IconButton";
 import { createDelegate, type Delegate } from "dreamland/core";
 import type { Tab } from "../Tab";
 import { UrlInput } from "./UrlInput";
+import { browser } from "../Browser";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;

frontend/src/components/Shell.tsx

@@ -1,5 +1,5 @@
 import { css, type Component } from "dreamland/core";
-import { browser } from "../main";
+import { browser } from "../Browser";
 import { forceScreenshot, popTab, pushTab } from "../Browser";
 import type { Tab } from "../Tab";
 import { toBlob } from "html-to-image";

frontend/src/components/TabStrip.tsx

@@ -13,7 +13,7 @@ import { IconButton } from "./IconButton";
 import type { Tab } from "../Tab";
 import html2canvas from "html2canvas";
 import { setContextMenu } from "./Menu";
-import { browser } from "../main";
+import { browser } from "../Browser";
 
 export const DragTab: Component<
 	{