[frontend] use delegates for poptab/pushtab

Author: velzie

frontend/src/browser.tsx

@@ -4,18 +4,12 @@ import { Tabs, Tab } from "./components/TabStrip";
 import { Omnibox } from "./components/Omnibox";
 import { scramjet } from "./main";
 import iconAdd from "@ktibow/iconset-ion/add";
-import { popTab, pushTab, Shell } from "./components/Shell";
+import { Shell } from "./components/Shell";
 import { createMenu } from "./components/Menu";
+import { createDelegate } from "./delegate";
 
-// let a = createState({
-// 	b: createState({
-// 		c: "test",
-// 	}),
-// });
-// use(a.b.c).listen((v) => {
-// 	console.log("a.b.c changed to", v);
-// });
-// a.b.c = "test2";
+export const pushTab = createDelegate<Tab>();
+export const popTab = createDelegate<Tab>();
 
 class StatefulClass {
 	constructor(state: Stateful<any>) {

frontend/src/components/Shell.tsx

@@ -1,15 +1,13 @@
 import type { Component } from "dreamland/core";
 import type { Tab } from "./TabStrip";
 import { browser } from "../main";
-
-export let pushTab: (tab: Tab) => void;
-export let popTab: (tab: Tab) => void;
+import { popTab, pushTab } from "../browser";
 
 export const Shell: Component<{
 	tabs: Tab[];
 	activetab: Tab;
 }> = function (cx) {
-	pushTab = (tab) => {
+	pushTab.listen((tab) => {
 		tab.frame.frame.classList.add(cx.id);
 		cx.root.appendChild(
 			<div
@@ -19,15 +17,15 @@ export const Shell: Component<{
 				{tab.frame.frame}
 			</div>
 		);
-	};
-	popTab = (tab) => {
+	});
+	popTab.listen((tab) => {
 		for (let el of cx.root.children) {
 			if (el.children[0] == tab.frame.frame) {
 				el.remove();
 				break;
 			}
 		}
-	};
+	});
 
 	return <div class:unfocus={use(browser.unfocusframes)}></div>;
 };