[frontend] add icons to context menus

Author: velzie

frontend/src/Tab.tsx

@@ -15,6 +15,11 @@ import { HistoryPage } from "./pages/HistoryPage";
 import { SettingsPage } from "./pages/SettingsPage";
 import { scramjet } from "./main";
 import { DownloadsPage } from "./pages/DownloadsPage";
+import iconBack from "@ktibow/iconset-ion/arrow-back";
+import iconForwards from "@ktibow/iconset-ion/arrow-forward";
+import iconRefresh from "@ktibow/iconset-ion/refresh";
+import iconBookmark from "@ktibow/iconset-ion/bookmark-outline";
+import iconCode from "@ktibow/iconset-ion/code-outline";
 
 const requestInspectElement = createDelegate<[HTMLElement, Tab]>();
 
@@ -657,32 +662,37 @@ function pageContextItems(client: ScramjetClient, tab: Tab, e: MouseEvent) {
 			action: () => {
 				tab.back();
 			},
+			icon: iconBack,
 		},
 		{
 			label: "Forward",
 			action: () => {
 				tab.forward();
 			},
+			icon: iconForwards,
 		},
 		{
 			label: "Reload",
 			action: () => {
 				tab.reload();
 			},
+			icon: iconRefresh,
 		},
 		{
 			label: "Bookmark",
 			action: () => {
 				// TODO:
 				console.log("Bookmarking", tab.title, tab.url);
 			},
+			icon: iconBookmark,
 		},
 		{
 			label: "Inspect",
 			action: () => {
 				tab.devtoolsOpen = true;
 				if (e.target) requestInspectElement([e.target as HTMLElement, tab]);
 			},
+			icon: iconCode,
 		},
 	];
 }

frontend/src/components/BookmarksStrip.tsx

@@ -9,6 +9,7 @@ export const BookmarksStrip: Component = function (cx) {
 		setContextMenu(cx.root, [
 			{
 				label: "Add Bookmark",
+				icon: iconAdd,
 				action: () => {},
 			},
 			{

frontend/src/components/Menu.tsx

@@ -1,6 +1,8 @@
 import { css, Pointer, type Component, type DLElement } from "dreamland/core";
 import { browser } from "../Browser";
 import { Checkbox } from "./Checkbox";
+import { Icon } from "./Icon";
+import type { IconifyIcon } from "@iconify/types";
 
 export const Menu: Component<{
 	x: number;
@@ -69,7 +71,7 @@ export const Menu: Component<{
 							e.stopPropagation();
 						}}
 					>
-						<div class="pad" />
+						{item.icon ? <Icon icon={item.icon}></Icon> : <div class="pad" />}
 						<span>{item.label}</span>
 					</button>
 				)
@@ -128,6 +130,7 @@ type MenuItem = {
 	label: string;
 	action?: () => void;
 	checkbox?: Pointer<boolean>;
+	icon?: IconifyIcon;
 };
 
 export function setContextMenu(elm: HTMLElement, items: MenuItem[]) {

frontend/src/components/Omnibox.tsx

@@ -13,6 +13,11 @@ import { UrlInput } from "./UrlInput";
 import { browser } from "../Browser";
 import { Icon } from "./Icon";
 
+import iconNew from "@ktibow/iconset-ion/duplicate-outline";
+import iconTime from "@ktibow/iconset-ion/time-outline";
+import iconInfo from "@ktibow/iconset-ion/information-circle-outline";
+import iconSettings from "@ktibow/iconset-ion/settings-outline";
+
 export const animateDownloadFly = createDelegate<void>();
 
 export const Spacer: Component = function (cx) {
@@ -205,30 +210,35 @@ export const Omnibox: Component<{
 							action: () => {
 								browser.newTab(new URL("puter://newtab"), true);
 							},
+							icon: iconNew,
 						},
 						{
 							label: "History",
 							action: () => {
 								browser.newTab(new URL("puter://history"));
 							},
+							icon: iconTime,
 						},
 						{
 							label: "Downloads",
 							action: () => {
 								browser.newTab(new URL("puter://downloads"));
 							},
+							icon: iconDownload,
 						},
 						{
 							label: "Settings",
 							action: () => {
 								browser.newTab(new URL("puter://settings"));
 							},
+							icon: iconSettings,
 						},
 						{
 							label: "About",
 							action: () => {
 								browser.newTab(new URL("puter://version"));
 							},
+							icon: iconInfo,
 						},
 					]);
 					e.stopPropagation();

frontend/src/components/TabStrip.tsx

@@ -1,5 +1,8 @@
 import iconClose from "@ktibow/iconset-ion/close";
 import iconAdd from "@ktibow/iconset-ion/add";
+import iconNew from "@ktibow/iconset-ion/duplicate-outline";
+import iconDuplicate from "@ktibow/iconset-ion/copy-outline";
+import iconRefresh from "@ktibow/iconset-ion/refresh-outline";
 import { css, type Component } from "dreamland/core";
 import { Icon } from "./Icon";
 import { memoize } from "../memoize";
@@ -31,24 +34,28 @@ export const DragTab: Component<
 		setContextMenu(cx.root, [
 			{
 				label: "New tab to the right",
+				icon: iconNew,
 				action: () => {
 					browser.newTabRight(this.tab);
 				},
 			},
 			{
 				label: "Reload",
+				icon: iconRefresh,
 				action: () => {
 					this.tab.frame.reload();
 				},
 			},
 			{
 				label: "Duplicate",
+				icon: iconDuplicate,
 				action: () => {
 					browser.newTabRight(this.tab, this.tab.url);
 				},
 			},
 			{
 				label: "Close Tab",
+				icon: iconClose,
 				action: () => {
 					this.destroy();
 				},
@@ -391,6 +398,7 @@ export const Tabs: Component<
 		setContextMenu(cx.root, [
 			{
 				label: "New Tab",
+				icon: iconNew,
 				action: () => {
 					this.addTab();
 				},

frontend/src/components/UrlInput.tsx

@@ -9,6 +9,7 @@ import iconStar from "@ktibow/iconset-ion/star-outline";
 import iconStarFilled from "@ktibow/iconset-ion/star";
 import iconSearch from "@ktibow/iconset-ion/search";
 import iconForwards from "@ktibow/iconset-ion/arrow-forward";
+import iconTrash from "@ktibow/iconset-ion/trash-outline";
 import { Icon } from "./Icon";
 import { scramjet } from "../main";
 import { IconButton } from "./IconButton";
@@ -284,7 +285,7 @@ export const UrlInput: Component<
 								class="optionsbutton"
 								on:click={(e: MouseEvent) => {
 									createMenu(e.clientX, e.clientY, [
-										{ label: "Clear Site Data" },
+										{ label: "Clear Site Data", icon: iconTrash },
 									]);
 									e.preventDefault();
 									e.stopPropagation();