[frontend] allow adding and removing bookmarks

Author: velzie

frontend/src/Browser.tsx

@@ -42,6 +42,7 @@ export type SerializedBrowser = {
 	tabs: SerializedTab[];
 	globalhistory: SerializedHistoryState[];
 	activetab: number;
+	bookmarks: BookmarkEntry[];
 };
 
 export type GlobalHistoryEntry = {
@@ -51,20 +52,25 @@ export type GlobalHistoryEntry = {
 	favicon?: string;
 };
 
+export type BookmarkEntry = {
+	url: string;
+	title: string;
+	favicon?: string;
+};
+
 export class Browser extends StatefulClass {
 	built: boolean = false;
 
-	tabs: Tab[];
-	activetab: Tab;
+	tabs: Tab[] = [];
+	activetab: Tab = null!;
 
-	globalhistory: HistoryState[];
+	globalhistory: HistoryState[] = [];
+	bookmarks: BookmarkEntry[] = [];
 
 	unfocusframes: boolean = false;
 
 	constructor() {
 		super(createState(Object.create(Browser.prototype)));
-		this.tabs = [];
-		this.globalhistory = [];
 
 		setInterval(saveBrowserState, 1000);
 	}
@@ -74,6 +80,7 @@ export class Browser extends StatefulClass {
 			tabs: this.tabs.map((t) => t.serialize()),
 			activetab: this.activetab.id,
 			globalhistory: this.globalhistory.map((s) => s.serialize()),
+			bookmarks: this.bookmarks,
 		};
 	}
 	deserialize(de: SerializedBrowser) {
@@ -88,6 +95,7 @@ export class Browser extends StatefulClass {
 			tab.deserialize(detab);
 		}
 		this.activetab = this.tabs[0];
+		this.bookmarks = de.bookmarks;
 		// this.activetab = this.tabs.find((t) => t.id == de.activetab)!;
 		console.log(this.activetab, this.activetab.url);
 	}

frontend/src/components/BookmarksStrip.tsx

@@ -10,10 +10,17 @@ export const BookmarksStrip: Component = function () {
 				<Icon icon={iconAdd}></Icon>
 				<span>create bookmark</span>
 			</button>
-			{use(browser.globalhistory).mapEach((g) => (
-				<button on:click={() => {}}>
-					<img src={g.favicon}></img>
-					<span>{g.title}</span>
+			{use(browser.bookmarks).mapEach((b) => (
+				<button
+					on:auxclick={() => {
+						browser.newTab(new URL(b.url));
+					}}
+					on:click={() => {
+						browser.activetab.pushNavigate(new URL(b.url));
+					}}
+				>
+					<img src={b.favicon}></img>
+					<span>{b.title}</span>
 				</button>
 			))}
 		</div>

frontend/src/components/IconButton.tsx

@@ -16,7 +16,7 @@ export const IconButton: Component<{
 			on:click={(e) => this.click?.(e)}
 			title={this.tooltip}
 		>
-			<Icon icon={this.icon} />
+			<Icon icon={use(this.icon)} />
 		</button>
 	);
 };

frontend/src/components/UrlInput.tsx

@@ -6,6 +6,7 @@ import {
 } from "dreamland/core";
 import iconOptions from "@ktibow/iconset-ion/options-outline";
 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 { Icon } from "./Icon";
@@ -348,7 +349,38 @@ export const UrlInput: Component<
 
 				{use(this.active)
 					.map((a) => !a)
-					.andThen(<IconButton icon={iconStar}></IconButton>)}
+					.andThen(
+						<IconButton
+							click={(e) => {
+								e.stopPropagation();
+								e.preventDefault();
+								let bookmark = browser.bookmarks.find(
+									(b) => b.url == this.tabUrl.href
+								);
+								if (bookmark) {
+									browser.bookmarks = browser.bookmarks.filter(
+										(b) => b.url !== this.tabUrl.href
+									);
+								} else {
+									browser.bookmarks = [
+										{
+											url: browser.activetab.url.href,
+											favicon: browser.activetab.icon,
+											title:
+												browser.activetab.title ||
+												browser.activetab.url.hostname,
+										},
+										...browser.bookmarks,
+									];
+								}
+							}}
+							icon={use(browser.bookmarks, this.tabUrl).map(() =>
+								browser.bookmarks.some((b) => b.url == this.tabUrl.href)
+									? iconStarFilled
+									: iconStar
+							)}
+						></IconButton>
+					)}
 				{use(this.active).andThen(
 					<IconButton
 						click={(e: MouseEvent) => {