roxxie-proxy-u-prod 0.1.0

package/source/packages/chrome/src/components/Favicon.tsx

@@ -0,0 +1,65 @@
+import { css, type FC } from "dreamland/core";
+import { defaultFaviconUrl } from "../assets/favicon";
+import { faviconService } from "..";
+
+export function Favicon(
+	this: FC<
+		{
+			iconUrl?: string | null;
+			domain?: string | null;
+			size?: "small" | "medium" | "large" | "unset";
+		},
+		{
+			url: string;
+		}
+	>
+) {
+	this.size ||= "small";
+	this.url ||= defaultFaviconUrl;
+
+	use(this.iconUrl, this.domain).listen(([iconUrl, domain]) => {
+		if (iconUrl) {
+			if (this.url !== iconUrl) this.url = iconUrl;
+		} else if (domain) {
+			// set default favicon while it's loading
+			// TODO: does this cause flickering?
+			this.url = defaultFaviconUrl;
+			faviconService.fetchFavicon(domain).then((favicon) => {
+				if (favicon?.iconUrl !== this.url)
+					this.url = favicon?.iconUrl || defaultFaviconUrl;
+			});
+		} else {
+			if (this.url !== defaultFaviconUrl) this.url = defaultFaviconUrl;
+		}
+	});
+	// :(
+	this.domain = this.domain;
+	this.iconUrl = this.iconUrl;
+
+	return (
+		<img
+			src={use(this.url)}
+			width={use(this.size).map((s) =>
+				s === "small" ? 16 : s === "medium" ? 32 : 64
+			)}
+			height={use(this.size).map((s) =>
+				s === "small" ? 16 : s === "medium" ? 32 : 64
+			)}
+			class={use(this.size)}
+		></img>
+	);
+}
+Favicon.style = css`
+	:scope.small {
+		width: 16px;
+		height: 16px;
+	}
+	:scope.medium {
+		width: 32px;
+		height: 32px;
+	}
+	:scope.large {
+		width: 64px;
+		height: 64px;
+	}
+`;

package/source/packages/chrome/src/components/Icon.tsx

@@ -0,0 +1,29 @@
+import type { IconifyIcon } from "@iconify/types";
+import type { FC } from "dreamland/core";
+
+export function Icon(
+	this: FC<{
+		icon: IconifyIcon;
+		width?: string | undefined;
+		height?: string | undefined;
+		class?: string | undefined;
+	}>
+) {
+	this.cx.mount = () => {
+		const update = (icon: IconifyIcon) => {
+			this.root.innerHTML = icon.body;
+		};
+		use(this.icon).listen(update);
+		update(this.icon);
+	};
+
+	return (
+		<svg
+			width={use(this.width).map((x) => x || "1em")}
+			height={use(this.height).map((x) => x || "1em")}
+			viewBox={use`0 0 ${this.icon.width} ${this.icon.height}`}
+			xmlns="http://www.w3.org/2000/svg"
+			{...(this.class ? { class: this.class } : {})}
+		></svg>
+	);
+}

package/source/packages/chrome/src/components/Input.tsx

@@ -0,0 +1,82 @@
+import { css, type FC, type Pointer } from "dreamland/core";
+
+export function Input(
+	this: FC<{
+		value: Pointer<string> | string;
+		label?: string;
+		placeholder?: string;
+		type?: string;
+		autocomplete?: string;
+		required?: boolean;
+		disabled?: boolean;
+		autofocus?: boolean;
+		class?: string;
+		"on:input"?: (e: Event) => void;
+		"on:focus"?: (e: FocusEvent) => void;
+		"on:blur"?: (e: FocusEvent) => void;
+		"on:keydown"?: (e: KeyboardEvent) => void;
+		"on:keyup"?: (e: KeyboardEvent) => void;
+	}>
+) {
+	return (
+		<div class={`input-container ${this.class || ""}`}>
+			{this.label && <label>{this.label}</label>}
+			<input
+				type={this.type || "text"}
+				value={use(this.value)}
+				placeholder={this.placeholder}
+				autocomplete={this.autocomplete}
+				required={this.required}
+				disabled={this.disabled}
+				autofocus={this.autofocus}
+				on:input={this["on:input"] as any}
+				on:focus={this["on:focus"] as any}
+				on:blur={this["on:blur"] as any}
+				on:keydown={this["on:keydown"] as any}
+				on:keyup={this["on:keyup"] as any}
+			/>
+		</div>
+	);
+}
+
+Input.style = css`
+	:scope {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-md);
+		width: 100%;
+	}
+
+	label {
+		font-size: 0.9em;
+		color: var(--text-70);
+	}
+
+	input {
+		background: var(--toolbar_field);
+		border: 1px solid var(--text-20);
+		border-radius: var(--radius-md);
+		padding: var(--space-md) var(--space-lg);
+		font-family: var(--font);
+		font-size: 0.9em;
+		color: var(--toolbar_field_text);
+		outline: none;
+		transition:
+			border-color 0.2s ease,
+			box-shadow 0.2s ease;
+	}
+
+	input:focus {
+		border-color: var(--tab_line);
+		box-shadow: 0 0 0 2px var(--accent-20);
+	}
+
+	input:disabled {
+		opacity: 0.6;
+		cursor: not-allowed;
+	}
+
+	input::placeholder {
+		color: var(--field-text-50);
+	}
+`;

package/source/packages/chrome/src/components/Menu.tsx

@@ -0,0 +1,287 @@
+import { createDelegate, css, Pointer, type FC } from "dreamland/core";
+import { Checkbox } from "@components/Checkbox";
+import { Icon } from "@components/Icon";
+import type { IconifyIcon } from "@iconify/types";
+import { emToPx } from "../util";
+import { requestUnfocusFrames } from "@components/Shell";
+
+export const closeMenu = createDelegate<void>();
+
+export type PositionConstraints = {
+	left?: number;
+	right?: number;
+	top?: number;
+	bottom?: number;
+};
+
+export function Menu(
+	this: FC<
+		{
+			position: PositionConstraints;
+			items?: MenuItem[];
+			custom?: HTMLElement;
+		},
+		{
+			closing: boolean;
+			x: number;
+			y: number;
+			transformOriginX: string;
+			transformOriginY: string;
+		}
+	>
+) {
+	this.closing = true;
+	requestAnimationFrame(() => {
+		this.closing = false;
+	});
+	this.x = 0;
+	this.y = 0;
+	this.transformOriginX = "left";
+	this.transformOriginY = "top";
+
+	const [lock, unlock] = requestUnfocusFrames();
+
+	const close = () => {
+		unlock();
+
+		window.removeEventListener("mousedown", ev, { capture: true });
+		window.removeEventListener("contextmenu", ev, { capture: true });
+		window.removeEventListener("click", ev, { capture: true });
+
+		this.closing = true;
+		this.root.addEventListener("transitionend", () => {
+			this.root.remove();
+		});
+	};
+	closeMenu.listen(close);
+
+	const ev = (e: MouseEvent) => {
+		// Don't close if the click is over the menu
+		if (this.root.contains(e.target as Node)) {
+			return;
+		}
+
+		close();
+		e.stopImmediatePropagation();
+		e.preventDefault();
+	};
+
+	this.cx.mount = () => {
+		lock();
+		document.body.appendChild(this.root);
+		const { width, height } = this.root.getBoundingClientRect();
+		const docWidth = document.documentElement.clientWidth;
+		const docHeight = document.documentElement.clientHeight;
+		const padding = emToPx(1);
+
+		if (this.position.left !== undefined) {
+			this.x = this.position.left;
+		} else if (this.position.right !== undefined) {
+			this.x = this.position.right - width;
+		}
+
+		if (this.position.top !== undefined) {
+			this.y = this.position.top;
+		} else if (this.position.bottom !== undefined) {
+			this.y = this.position.bottom - height;
+		}
+
+		const maxX = docWidth - width - padding;
+		const maxY = docHeight - height - padding;
+		if (this.x > maxX) {
+			this.x = maxX;
+			this.transformOriginX = "right";
+		}
+		if (this.y > maxY) {
+			this.y = maxY;
+			this.transformOriginY = "bottom";
+		}
+		if (this.x < padding) this.x = padding;
+		if (this.y < padding) this.y = padding;
+
+		window.addEventListener("mousedown", ev, { capture: true });
+		window.addEventListener("contextmenu", ev, {
+			capture: true,
+		});
+		window.addEventListener("click", ev, { capture: true });
+
+		this.root.addEventListener("mousedown", (e) => {
+			e.stopPropagation();
+		});
+	};
+	return (
+		<div
+			style={use`--x: ${this.x}px; --y: ${this.y}px; --transform-origin-x: ${this.transformOriginX}; --transform-origin-y: ${this.transformOriginY};`}
+			class:closing={use(this.closing)}
+		>
+			{this.items
+				? use(this.items).mapEach((item) =>
+						item == null ? (
+							""
+						) : item == "-" ? (
+							<div class="separator" />
+						) : item.checkbox ? (
+							<button
+								class="item"
+								on:click={(e: MouseEvent) => {
+									if (!item.checkbox) return;
+									item.checkbox.value = !item.checkbox.value;
+
+									e.preventDefault();
+									e.stopPropagation();
+								}}
+							>
+								<Checkbox value={item.checkbox}></Checkbox>
+								{item.label}
+							</button>
+						) : (
+							<button
+								class="item"
+								on:click={(e: MouseEvent) => {
+									item.action?.();
+									close();
+									e.stopPropagation();
+								}}
+							>
+								{item.image ? (
+									<img src={item.image}></img>
+								) : item.icon ? (
+									<Icon icon={item.icon}></Icon>
+								) : (
+									<div class="pad" />
+								)}
+								<span>{item.label}</span>
+							</button>
+						)
+					)
+				: this.custom}
+		</div>
+	);
+}
+Menu.style = css`
+	:scope {
+		position: absolute;
+		top: var(--y);
+		left: var(--x);
+		background-color: var(--popup);
+		border: 1px solid var(--popup_border);
+		border-radius: var(--radius-md);
+		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+		z-index: 1000;
+		display: flex;
+		flex-direction: column;
+		min-width: 15em;
+		overflow: hidden;
+
+		transition:
+			opacity 0.1s ease,
+			transform 0.12s cubic-bezier(0.35, 0.15, 0, 1.8);
+		opacity: 1;
+		transform: scaleX(100%) scaleY(100%);
+		transform-origin: var(--transform-origin-x) var(--transform-origin-y);
+	}
+	.separator {
+		border-top: 1px solid var(--text-20);
+	}
+	:scope.closing {
+		transform: scaleX(95%) scaleY(87%);
+		opacity: 0;
+	}
+	.item {
+		background: none;
+		border: none;
+		font-size: 0.8em;
+		padding: var(--space-lg) var(--space-xxl);
+		text-align: left;
+		color: var(--toolbar_text);
+
+		display: flex;
+		align-items: center;
+		gap: var(--space-xl);
+	}
+
+	img {
+		width: 16px;
+		height: 16px;
+	}
+
+	.pad {
+		width: 1em;
+	}
+
+	input[type="checkbox"] {
+		width: 1em;
+		height: 1em;
+		padding: 0;
+		margin: 0;
+
+		background: var(--toolbar_field);
+		border: 1px solid var(--text-20);
+	}
+	.item:hover {
+		background: var(--text-10);
+	}
+`;
+
+let activeMenu: HTMLElement | null = null;
+
+type MenuItem =
+	| {
+			label: string;
+			action?: () => void;
+			checkbox?: Pointer<boolean>;
+			icon?: IconifyIcon;
+			image?: string;
+	  }
+	| "-";
+
+export function setContextMenu(elm: HTMLElement, items: MenuItem[]) {
+	elm.addEventListener("contextmenu", (e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		createMenu({ left: e.clientX, top: e.clientY }, items);
+	});
+}
+
+export function createMenu(
+	position: PositionConstraints,
+	items: MenuItem[]
+): HTMLElement {
+	// if (isPuter) {
+	// 	puter.ui.contextMenu({
+	// 		items: items.map((i) =>
+	// 			i == "-"
+	// 				? i
+	// 				: {
+	// 						label: i.label,
+	// 						action: i.action,
+	// 					}
+	// 		),
+	// 	});
+
+	// 	return undefined as any;
+	// }
+
+	if (activeMenu) {
+		closeMenu();
+	}
+
+	let menu = (<Menu position={position} items={items} />) as HTMLElement;
+	activeMenu = menu;
+
+	return menu;
+}
+
+export function createMenuCustom(
+	position: PositionConstraints,
+	custom: HTMLElement
+): HTMLElement {
+	if (activeMenu) {
+		closeMenu();
+	}
+
+	let menu = (<Menu position={position} custom={custom} />) as HTMLElement;
+	activeMenu = menu;
+
+	return menu;
+}

package/source/packages/chrome/src/components/Omnibar/BookmarkButton.tsx

@@ -0,0 +1,73 @@
+import { css, type FC, type Stateful } from "dreamland/core";
+import { createMenuCustom } from "@components/Menu";
+import { BookmarkPopup } from "@components/BookmarkPopup";
+
+import { iconStar, iconStarFilled } from "../../icons";
+import { Icon } from "@components/Icon";
+import { profileService, tabsService } from "../..";
+import { BookmarkEntry } from "../../services/ProfileService";
+
+export function BookmarkButton(this: FC<{ url: URL }>) {
+	return (
+		<button
+			on:click={(e: MouseEvent) => {
+				e.stopPropagation();
+				e.preventDefault();
+				const target = e.currentTarget as HTMLElement;
+				const rect = target.getBoundingClientRect();
+				let bookmark = profileService.bookmarks.find(
+					(b) => b.url.href == this.url.href
+				);
+
+				let isnew = false;
+				if (!bookmark) {
+					bookmark = new BookmarkEntry({
+						url: tabsService.activetab.url,
+						favicon: tabsService.activetab.icon,
+						title:
+							tabsService.activetab.title || tabsService.activetab.url.hostname,
+					});
+					isnew = true;
+				}
+
+				createMenuCustom(
+					{
+						right: rect.right,
+						top: rect.bottom + 6,
+					},
+					<BookmarkPopup
+						new={isnew}
+						bookmark={bookmark as Stateful<BookmarkEntry>}
+					></BookmarkPopup>
+				);
+			}}
+		>
+			<Icon
+				icon={use(profileService.bookmarks, this.url).map(() =>
+					profileService.bookmarks.some((b) => b.url.href == this.url.href)
+						? iconStarFilled
+						: iconStar
+				)}
+			></Icon>
+		</button>
+	);
+}
+BookmarkButton.style = css`
+	:scope {
+		font-size: 1em;
+		color: var(--toolbar_text);
+		display: flex;
+		margin: var(--space-xs);
+		padding: var(--space-xs);
+		box-sizing: border-box;
+		aspect-ratio: 1/1;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		border-radius: var(--radius-sm);
+	}
+	:scope:hover {
+		background: var(--toolbarbutton-hover-background);
+	}
+`;

package/source/packages/chrome/src/components/Omnibar/CircularProgress.tsx

@@ -0,0 +1,83 @@
+import { css, type FC } from "dreamland/core";
+
+export function CircularProgress(
+	this: FC<{
+		progress: number;
+		size?: string;
+		strokeWidth?: string;
+		color?: string;
+	}>
+) {
+	const radius = 100;
+	const circumference = 2 * Math.PI * radius;
+
+	use(this.progress).listen((p) => {
+		if (p == 0) {
+			this.root.classList.remove("visible");
+		} else {
+			this.root.classList.add("visible");
+
+			this.root
+				.querySelector("circle.moving")!
+				.setAttribute("stroke-dashoffset", circumference * (1 - p) + "px");
+		}
+	});
+
+	return (
+		<svg
+			width="200"
+			height="200"
+			viewBox="0 0 200 200"
+			version="1.1"
+			xmlns="http://www.w3.org/2000/svg"
+			style="transform:rotate(-90deg)"
+		>
+			<circle
+				r="90"
+				cx="100"
+				cy="100"
+				class="inactive"
+				stroke-width="16px"
+				stroke-linecap="round"
+				stroke-dashoffset="0px"
+				fill="transparent"
+				stroke-dasharray="565.48px"
+			></circle>
+			<circle
+				r="90"
+				cx="100"
+				cy="100"
+				class="moving"
+				stroke-width="16px"
+				stroke-linecap="round"
+				stroke-dashoffset="118.692px"
+				fill="transparent"
+				stroke-dasharray="565.48px"
+			></circle>
+		</svg>
+	);
+}
+CircularProgress.style = css`
+	:scope {
+		pointer-events: none;
+		position: absolute;
+		top: 2px;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+		transition: opacity 0.2s ease;
+		transform: rotate(-90deg);
+	}
+	:scope.visible {
+		opacity: 1;
+	}
+	circle {
+		fill: transparent;
+		stroke: var(--tab_line);
+		/*transition: stroke-dashoffset 0.2s ease;*/
+	}
+	circle.inactive {
+		stroke: var(--text-15);
+	}
+`;