[frontend] switch to ionicons and fix double add button

Author: velzie

frontend/package.json

@@ -14,7 +14,7 @@
 	},
 	"dependencies": {
 		"@iconify/types": "^2.0.0",
-		"@ktibow/iconset-material-symbols": "^0.0.1749705809",
+		"@ktibow/iconset-ion": "^8.0.13",
 		"@mercuryworkshop/epoxy-transport": "^2.1.27",
 		"@mercuryworkshop/scramjet": "workspace:scramjet",
 		"dreamland": "workspace:dreamland",

frontend/src/Omnibox.tsx

@@ -1,14 +1,14 @@
 import type { Component } from "dreamland/core";
 import { Icon } from "./ui/Icon";
 import type { IconifyIcon } from "@iconify/types";
-import iconBack from "@ktibow/iconset-material-symbols/arrow-back";
-import iconForwards from "@ktibow/iconset-material-symbols/arrow-forward";
-import iconRefresh from "@ktibow/iconset-material-symbols/refresh";
-import iconExtension from "@ktibow/iconset-material-symbols/extension";
-import iconSettings from "@ktibow/iconset-material-symbols/settings";
-import iconShield from "@ktibow/iconset-material-symbols/shield";
-import iconStar from "@ktibow/iconset-material-symbols/star";
-import iconSearch from "@ktibow/iconset-material-symbols/search";
+import iconBack from "@ktibow/iconset-ion/arrow-back";
+import iconForwards from "@ktibow/iconset-ion/arrow-forward";
+import iconRefresh from "@ktibow/iconset-ion/refresh";
+import iconExtension from "@ktibow/iconset-ion/extension-puzzle-outline";
+import iconSettings from "@ktibow/iconset-ion/settings-outline";
+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";
 

frontend/src/browser.tsx

@@ -3,7 +3,7 @@ import { ThemeVars, type Theme } from "./ui/theme";
 import { Tabs, Tab } from "./tabs";
 import { IconButton, Omnibox } from "./Omnibox";
 import { scramjet } from "./main";
-import iconAdd from "@ktibow/iconset-material-symbols/add";
+import iconAdd from "@ktibow/iconset-ion/add";
 import { popTab, pushTab, Shell } from "./Shell";
 import { createMenu } from "./Menu";
 
@@ -239,19 +239,12 @@ export class Browser extends StatefulClass {
 		return (
 			<div>
 				<ThemeVars colors={use(this.theme)} />
-				<div style="display: flex; align-items: center; background: var(--aboutbrowser-frame-bg)">
-					<Tabs
-						tabs={use(this.tabs).bind()}
-						activetab={use(this.activetab).bind()}
-						destroyTab={(tab) => this.destroyTab(tab)}
-					/>
-					<IconButton
-						icon={iconAdd}
-						click={() => {
-							this.newTab("tab 2");
-						}}
-					></IconButton>
-				</div>
+				<Tabs
+					tabs={use(this.tabs).bind()}
+					activetab={use(this.activetab).bind()}
+					destroyTab={(tab) => this.destroyTab(tab)}
+					addTab={() => this.newTab("title")}
+				/>
 				<Omnibox
 					value={use(this.activetab.url)}
 					navigate={(url) => this.navigate(url)}

frontend/src/tabs.tsx

@@ -1,5 +1,5 @@
-import iconClose from "@ktibow/iconset-material-symbols/close";
-import iconAdd from "@ktibow/iconset-material-symbols/add";
+import iconClose from "@ktibow/iconset-ion/close";
+import iconAdd from "@ktibow/iconset-ion/add";
 import {
 	createState,
 	type Component,
@@ -394,7 +394,6 @@ export const Tabs: Component<
 };
 Tabs.css = `
 	:scope {
-	flex: 1;
 		background: var(--aboutbrowser-frame-bg);
 		padding: 6px 12px;
 		height: calc(28px + 12px);