[frontend] new tab to the right and duplicate context menus

Author: velzie

frontend/src/Tab.tsx

@@ -20,7 +20,7 @@ export type SerializedTab = {
 	history: SerializedHistory;
 };
 
-let id = 0;
+let id = 100;
 export class Tab extends StatefulClass {
 	id: number;
 	title: string | null;
@@ -54,6 +54,9 @@ export class Tab extends StatefulClass {
 		this.title = null;
 		this.internalpage = null;
 
+		const frame = scramjet.createFrame();
+		this.frame = frame;
+
 		this.history = new History(this);
 		this.history.push(this.url, undefined);
 
@@ -65,7 +68,6 @@ export class Tab extends StatefulClass {
 		this.width = 0;
 		this.pos = 0;
 
-		const frame = scramjet.createFrame();
 		addHistoryListeners(frame, this);
 		frame.addEventListener("contextInit", (ctx) => {
 			injectContextMenu(ctx.client, this);
@@ -77,7 +79,6 @@ export class Tab extends StatefulClass {
 			}
 		});
 
-		this.frame = frame;
 		this.devtoolsFrame = scramjet.createFrame();
 	}
 
@@ -89,7 +90,7 @@ export class Tab extends StatefulClass {
 		};
 	}
 	deserialize(de: SerializedTab) {
-		if (id >= de.id) id = de.id + 1;
+		if (de.id >= id) id = de.id + 1;
 		this.id = de.id;
 		this.title = de.title;
 		this.history.deserialize(de.history);

frontend/src/browser.tsx

@@ -73,14 +73,24 @@ export class Browser extends StatefulClass {
 		console.log(this.activetab, this.activetab.url);
 	}
 
-	newTab() {
-		let tab = new Tab();
+	newTab(url?: URL) {
+		let tab = new Tab(url);
 		pushTab(tab);
 		this.tabs = [...this.tabs, tab];
 		this.activetab = tab;
 		return tab;
 	}
 
+	newTabRight(ref: Tab, url?: URL) {
+		let tab = new Tab(url);
+		pushTab(tab);
+		let index = this.tabs.indexOf(ref);
+		this.tabs.splice(index + 1, 0, tab);
+		this.tabs = this.tabs;
+		this.activetab = tab;
+		return tab;
+	}
+
 	destroyTab(tab: Tab) {
 		this.tabs = this.tabs.filter((t) => t !== tab);
 		console.log(this.tabs);

frontend/src/components/TabStrip.tsx

@@ -13,6 +13,7 @@ import { IconButton } from "./IconButton";
 import type { Tab } from "../Tab";
 import html2canvas from "html2canvas";
 import { setContextMenu } from "./Menu";
+import { browser } from "../main";
 
 export const DragTab: Component<{
 	active: boolean;
@@ -24,19 +25,30 @@ export const DragTab: Component<{
 }> = function (cx) {
 	cx.mount = () => {
 		setContextMenu(cx.root, [
+			{
+				label: "New tab to the right",
+				action: () => {
+					browser.newTabRight(this.tab);
+				},
+			},
 			{
 				label: "Reload",
 				action: () => {
 					this.tab.frame.reload();
 				},
 			},
+			{
+				label: "Duplicate",
+				action: () => {
+					browser.newTabRight(this.tab, this.tab.url);
+				},
+			},
 			{
 				label: "Close Tab",
 				action: () => {
 					this.destroy();
 				},
 			},
-			// TODO: mute? duplicate?
 		]);
 	};
 	return (