[frontend] fix history (almost)

Author: velzie

dreamlandjs

@@ -19,6 +19,9 @@ export class Tab extends StatefulClass {
 
 	history: History;
 
+	canGoForward: boolean = false;
+	canGoBack: boolean = false;
+
 	constructor(public url: URL = new URL("puter://newtab")) {
 		super(createState(Object.create(Tab.prototype)));
 

frontend/src/Tab.ts

@@ -48,7 +48,7 @@ export class Browser extends StatefulClass {
 		};
 	}
 
-	newTab(title: string) {
+	newTab() {
 		let tab = new Tab();
 		pushTab(tab);
 		this.tabs = [...this.tabs, tab];
@@ -60,18 +60,15 @@ export class Browser extends StatefulClass {
 		this.tabs = this.tabs.filter((t) => t !== tab);
 		console.log(this.tabs);
 		if (this.activetab === tab) {
-			this.activetab = this.tabs[0] || this.newTab("New Tab");
+			this.activetab = this.tabs[0] || this.newTab();
 		}
-		console.log(this.tabs);
-
-		console.log(this.activetab);
 		popTab(tab);
 	}
 
 	build(): HTMLElement {
 		let shell = <Shell tabs={use(this.tabs)} activetab={use(this.activetab)} />;
 
-		let tab = this.newTab("title");
+		let tab = this.newTab();
 		this.activetab = tab;
 		if (this.built) throw new Error("already built");
 		this.built = true;
@@ -83,13 +80,14 @@ export class Browser extends StatefulClass {
 					tabs={use(this.tabs).bind()}
 					activetab={use(this.activetab).bind()}
 					destroyTab={(tab) => this.destroyTab(tab)}
-					addTab={() => this.newTab("title")}
+					addTab={() => this.newTab()}
 				/>
 				<Omnibox
-					tabUrl={use(this.activetab)
-						.zip(use(this.activetab.url))
-						.map(([a]) => use(a.url))}
+					tabUrl={use(this.activetab.url)}
+					canGoBack={use(this.activetab.canGoBack)}
+					canGoForwards={use(this.activetab.canGoForward)}
 					goBack={() => {
+						console.log("WHAT");
 						this.activetab.history.go(-1);
 					}}
 					goForwards={() => {

frontend/src/browser.tsx

@@ -5,9 +5,15 @@ import { Icon } from "./Icon";
 export const IconButton: Component<{
 	icon: IconifyIcon;
 	click?: (e: MouseEvent) => void;
+	active?: boolean;
 }> = function (cx) {
+	this.active ??= true;
 	return (
-		<button on:click={(e) => this.click?.(e)}>
+		<button
+			disabled={use(this.active).map((x) => (x ? undefined : true))}
+			class:active={use(this.active)}
+			on:click={(e) => this.click?.(e)}
+		>
 			<Icon icon={this.icon} />
 		</button>
 	);
@@ -19,8 +25,11 @@ IconButton.css = `
     outline: none;
     border: none;
     font-size: 1.25em;
-    background: inerhit
-    # background: var(--aboutbrowser-toolbar-bg);
+    background: none;
+    color: grey;
+  }
+  :scope.active {
     cursor: pointer;
+    color: var(--aboutbrowser-active-tab-fg);
   }
 `;

frontend/src/components/IconButton.tsx

@@ -236,11 +236,21 @@ export const Omnibox: Component<{
 	goBack: () => void;
 	goForwards: () => void;
 	refresh: () => void;
+	canGoBack: boolean;
+	canGoForwards: boolean;
 }> = function (cx) {
 	return (
 		<div>
-			<IconButton click={this.goBack} icon={iconBack}></IconButton>
-			<IconButton click={this.goForwards} icon={iconForwards}></IconButton>
+			<IconButton
+				active={use(this.canGoBack)}
+				click={this.goBack}
+				icon={iconBack}
+			></IconButton>
+			<IconButton
+				active={use(this.canGoForwards)}
+				click={this.goForwards}
+				icon={iconForwards}
+			></IconButton>
 			<IconButton click={this.refresh} icon={iconRefresh}></IconButton>
 			<Spacer></Spacer>
 			<UrlInput tabUrl={use(this.tabUrl)} navigate={this.navigate}></UrlInput>

frontend/src/components/Omnibox.tsx

@@ -7,7 +7,7 @@ export type HistoryState = {
 };
 
 export class History {
-	index: number = 0;
+	index: number = -1;
 	states: HistoryState[] = [];
 
 	constructor(private tab: Tab) {}
@@ -18,6 +18,9 @@ export class History {
 
 		if (navigate) this.tab.navigate(url);
 
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
 		return this.states[this.index];
 	}
 	replace(url: URL, state: any, navigate: boolean = true): HistoryState {
@@ -29,6 +32,9 @@ export class History {
 
 		if (navigate) this.tab.navigate(url);
 
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
 		return this.states[this.index];
 	}
 	go(delta: number, navigate: boolean = true): HistoryState {
@@ -41,6 +47,9 @@ export class History {
 
 		if (navigate) this.tab.navigate(this.states[this.index].url);
 
+		this.tab.canGoBack = this.canGoBack();
+		this.tab.canGoForward = this.canGoForward();
+
 		return this.states[this.index];
 	}
 	canGoBack(): boolean {