[frontend] small refactor

Author: velzie

frontend/src/browser.tsx

@@ -1,11 +1,11 @@
 import { createState, type Stateful } from "dreamland/core";
-import { ThemeVars, type Theme } from "./ui/theme";
-import { Tabs, Tab } from "./tabs";
-import { IconButton, Omnibox } from "./Omnibox";
+import { ThemeVars, type Theme } from "./theme";
+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 "./Shell";
-import { createMenu } from "./Menu";
+import { popTab, pushTab, Shell } from "./components/Shell";
+import { createMenu } from "./components/Menu";
 
 // let a = createState({
 // 	b: createState({

frontend/src/ui/Icon.tsx renamed to frontend/src/components/Icon.tsx

@@ -0,0 +1,26 @@
+import type { IconifyIcon } from "@iconify/types";
+import type { Component } from "dreamland/core";
+import { Icon } from "./Icon";
+
+export const IconButton: Component<{
+	icon: IconifyIcon;
+	click?: (e: MouseEvent) => void;
+}> = function (cx) {
+	return (
+		<button on:click={(e) => this.click?.(e)}>
+			<Icon icon={this.icon} />
+		</button>
+	);
+};
+IconButton.css = `
+  :scope {
+    padding: 0.4em;
+    display: flex;
+    outline: none;
+    border: none;
+    font-size: 1.25em;
+    background: inerhit
+    # background: var(--aboutbrowser-toolbar-bg);
+    cursor: pointer;
+  }
+`;

frontend/src/components/IconButton.tsx

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

frontend/src/Menu.tsx renamed to frontend/src/components/Menu.tsx

@@ -1,6 +1,4 @@
 import type { Component } from "dreamland/core";
-import { Icon } from "./ui/Icon";
-import type { IconifyIcon } from "@iconify/types";
 import iconBack from "@ktibow/iconset-ion/arrow-back";
 import iconForwards from "@ktibow/iconset-ion/arrow-forward";
 import iconRefresh from "@ktibow/iconset-ion/refresh";
@@ -10,7 +8,8 @@ import iconShield from "@ktibow/iconset-ion/shield-outline";
 import iconStar from "@ktibow/iconset-ion/star-outline";
 import iconSearch from "@ktibow/iconset-ion/search";
 import { createMenu } from "./Menu";
-import { browser, client } from "./main";
+import { browser, client } from "../main";
+import { IconButton } from "./IconButton";
 
 export const Spacer: Component = function (cx) {
 	return <div></div>;
@@ -208,29 +207,6 @@ UrlInput.css = `
   }
 `;
 
-export const IconButton: Component<{
-	icon: IconifyIcon;
-	click?: (e: MouseEvent) => void;
-}> = function (cx) {
-	return (
-		<button on:click={(e) => this.click?.(e)}>
-			<Icon icon={this.icon} />
-		</button>
-	);
-};
-IconButton.css = `
-  :scope {
-    padding: 0.4em;
-    display: flex;
-    outline: none;
-    border: none;
-    font-size: 1.25em;
-    background: inerhit
-    # background: var(--aboutbrowser-toolbar-bg);
-    cursor: pointer;
-  }
-`;
-
 export const Omnibox: Component<{
 	value: string;
 	navigate: (url: string) => void;

frontend/src/Omnibox.tsx renamed to frontend/src/components/Omnibox.tsx

@@ -1,6 +1,6 @@
 import type { Component } from "dreamland/core";
-import type { Tab } from "./tabs";
-import { browser } from "./main";
+import type { Tab } from "./TabStrip";
+import { browser } from "../main";
 
 export let pushTab: (tab: Tab) => void;
 export let popTab: (tab: Tab) => void;

frontend/src/Shell.tsx renamed to frontend/src/components/Shell.tsx

@@ -6,9 +6,9 @@ import {
 	type ComponentInstance,
 	type Stateful,
 } from "dreamland/core";
-import { Icon } from "./ui/Icon";
-import { IconButton } from "./Omnibox";
-import { memoize } from "./memoize";
+import { Icon } from "./Icon";
+import { memoize } from "../memoize";
+import { IconButton } from "./IconButton";
 
 export const DragTab: Component<{
 	active: boolean;
@@ -339,12 +339,6 @@ export const Tabs: Component<
 		const root = getTabFromIndex(tab.id);
 		const dragroot = root.querySelector(".dragroot") as HTMLElement;
 
-		let lifetimeOffset = tab.pos - tab.startdragpos;
-		if (Math.abs(lifetimeOffset) < 20) {
-			// TODO: arbitrary magic
-			if (this.activetab != tab) this.activetab = tab;
-		}
-
 		dragroot.style.width = "";
 		dragroot.style.position = "unset";
 		tab.dragoffset = -1;
@@ -368,6 +362,8 @@ export const Tabs: Component<
 		if (tab.dragoffset < 0) throw new Error("dragoffset must be positive");
 
 		calcDragPos(e, tab);
+
+		if (this.activetab != tab) this.activetab = tab;
 	};
 
 	const transitionend = () => {
@@ -393,11 +389,6 @@ export const Tabs: Component<
 							icon={use(tab.icon)}
 							active={use(this.activetab).map((x) => x === tab)}
 							mousedown={(e) => mouseDown(e, tab)}
-							click={() => {
-								if (this.activetab !== tab) {
-									this.activetab = tab;
-								}
-							}}
 							destroy={() => {
 								this.destroyTab(tab);
 							}}

frontend/src/tabs.tsx renamed to frontend/src/components/TabStrip.tsx

@@ -0,0 +1,20 @@
+export type Delegate<T> = {
+	listen: (callback: (value: T) => void) => void;
+	(value: T): void;
+};
+
+export function createDelegate<T>(): Delegate<T> {
+	let listeners: Array<(value: T) => void> = [];
+
+	const delegate = (value: T) => {
+		for (const listener of listeners) {
+			listener(value);
+		}
+	};
+
+	delegate.listen = (callback: (value: T) => void) => {
+		listeners.push(callback);
+	};
+
+	return delegate;
+}

frontend/src/delegate.ts

@@ -1,7 +1,7 @@
 import "./style.css";
 
 import { createBrowser } from "./browser";
-import { createMenu } from "./Menu";
+import { createMenu } from "./components/Menu";
 let app = document.getElementById("app")!;
 import { BareMuxConnection, BareClient } from "@mercuryworkshop/bare-mux";