roxxie-proxy-u-prod 0.1.0

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

@@ -0,0 +1,234 @@
+import { css, type FC } from "dreamland/core";
+import { createMenu } from "@components/Menu";
+import { Icon } from "@components/Icon";
+import { Favicon } from "@components/Favicon";
+import { iconLink, iconMore, iconOpen } from "../icons";
+import { tabsService } from "..";
+
+export type TopSiteEntry = {
+	url: URL;
+	title: string;
+	displayTitle: string;
+	favicon: string | null;
+	fallback: string;
+};
+
+export function TopSiteButton(this: FC<{ entry: TopSiteEntry }>) {
+	const openMenu = (event: MouseEvent) => {
+		createMenu({ left: event.clientX, top: event.clientY }, [
+			{
+				label: "Open",
+				icon: iconLink,
+				action: () => tabsService.activetab.pushNavigate(this.entry.url),
+			},
+			{
+				label: "Open in New Tab",
+				icon: iconOpen,
+				action: () => tabsService.newTab(this.entry.url),
+			},
+		]);
+
+		event.preventDefault();
+		event.stopPropagation();
+	};
+
+	return (
+		<li class="top-site-outer">
+			<div class="top-site-inner" on:contextmenu={openMenu}>
+				<button
+					class="top-site-button"
+					title={this.entry.title}
+					on:click={() => tabsService.activetab.pushNavigate(this.entry.url)}
+					on:auxclick={() => tabsService.newTab(this.entry.url)}
+				>
+					<div class="tile" aria-hidden="true">
+						<div class="icon-wrapper" class:has-favicon={!!this.entry.favicon}>
+							{this.entry.favicon ? (
+								<Favicon
+									iconUrl={this.entry.favicon}
+									domain={this.entry.url.hostname}
+									size="unset"
+								></Favicon>
+							) : (
+								<span class="fallback">{this.entry.fallback}</span>
+							)}
+						</div>
+					</div>
+					<div class="title">
+						<span class="title-label">{this.entry.displayTitle}</span>
+					</div>
+					<button
+						class="context-menu-button"
+						title={`Open context menu for ${this.entry.title}`}
+						aria-label={`Open context menu for ${this.entry.title}`}
+						on:click={openMenu}
+					>
+						<Icon icon={iconMore} width="1rem" height="1rem"></Icon>
+					</button>
+				</button>
+			</div>
+		</li>
+	);
+}
+TopSiteButton.style = css`
+	:scope {
+		width: 100%;
+		max-width: var(--top-site-column-size);
+	}
+
+	.top-site-inner {
+		position: relative;
+		width: 100%;
+	}
+
+	.top-site-button {
+		width: 100%;
+		min-width: 0;
+		padding: var(--space-md);
+		border: none;
+		background: none;
+		color: inherit;
+		cursor: pointer;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: var(--space-md);
+		justify-items: center;
+		border-radius: calc(var(--radius-md) * 2);
+		transition:
+			background-color 0.12s ease-out,
+			color 0.12s ease-out;
+	}
+
+	.top-site-button:hover {
+		background: var(--ntp-text-5);
+	}
+
+	.top-site-button:active {
+		background: var(--ntp-text-10);
+	}
+
+	.tile {
+		width: var(--top-site-tile-size);
+		height: var(--top-site-tile-size);
+		margin: auto;
+		margin-top: var(--space-lg);
+		align-self: end;
+		background: var(--toolbar_field);
+		border: 1px solid var(--ntp-text-15);
+		border-radius: calc(var(--radius-md) * 2);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		transition:
+			background 120ms ease-out,
+			border-color 120ms ease-out;
+	}
+
+	:scope:is(:hover, :focus-within) .tile {
+		background: color-mix(in srgb, var(--toolbar_field) 82%, var(--text-8));
+		border-color: var(--ntp-text-20);
+	}
+
+	.top-site-button:focus-visible .tile {
+		border-color: var(--tab_line);
+		box-shadow: 0 0 0 2px var(--accent-20);
+		outline: none;
+	}
+
+	.icon-wrapper {
+		width: var(--top-site-icon-size);
+		height: var(--top-site-icon-size);
+		border-radius: calc(var(--radius-md) * 1.5);
+		background: var(--accent-15);
+		color: var(--accent-tint-50);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		overflow: hidden;
+		font-size: 1rem;
+		font-weight: 700;
+		text-transform: uppercase;
+	}
+
+	.icon-wrapper.has-favicon {
+		background: var(--text-10);
+		color: inherit;
+	}
+
+	.icon-wrapper :global(img) {
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.fallback {
+		line-height: 1;
+		user-select: none;
+	}
+
+	.context-menu-button {
+		position: absolute;
+		top: var(--space-md);
+		right: var(--space-sm);
+		width: 1.75rem;
+		height: 1.75rem;
+		border: 1px solid var(--text-20);
+		border-radius: 999px;
+		background: var(--toolbar_field);
+		color: var(--text-60);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		cursor: pointer;
+		opacity: 0;
+		transition:
+			opacity 100ms ease-out,
+			background 100ms ease-out,
+			border-color 100ms ease-out;
+	}
+
+	:scope:is(:hover, :focus-within) .context-menu-button {
+		opacity: 1;
+	}
+
+	.context-menu-button:hover,
+	.context-menu-button:focus-visible {
+		background: var(--popup);
+		border-color: var(--text-30);
+		opacity: 1;
+	}
+
+	.title {
+		width: 100%;
+		min-width: 0;
+		padding: var(--space-xs);
+		display: flex;
+		justify-content: center;
+		text-align: center;
+	}
+
+	.title-label {
+		display: block;
+		width: 100%;
+		max-width: 100%;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		font-size: 0.88rem;
+		line-height: 1.25;
+		color: var(--ntp-text-70);
+		user-select: none;
+	}
+
+	@media (max-width: 720px) {
+		:scope {
+			max-width: 6.25rem;
+		}
+
+		.top-site-button {
+			grid-template-rows: 6.25rem auto;
+		}
+	}
+`;

package/source/packages/chrome/src/consts.ts

@@ -0,0 +1,3 @@
+export const INTERNAL_URL_PROTOCOL = "puter:";
+
+export const FAVICON_CACHE_TTL = 1000 * 60 * 60 * 24 * 7; // 1 week

package/source/packages/chrome/src/icons.ts

@@ -0,0 +1,70 @@
+// Centralized icon re-exports
+// Export commonly-used icons from @ktibow/iconset-ion so other files can import from "/icons"
+//
+// Example usage after refactor:
+// import { iconBack, iconMore } from "/icons";
+
+export { default as iconBack } from "@ktibow/iconset-ion/arrow-back";
+export { default as iconForwards } from "@ktibow/iconset-ion/arrow-forward";
+
+export { default as iconRefresh } from "@ktibow/iconset-ion/refresh";
+export { default as iconRefreshOutline } from "@ktibow/iconset-ion/refresh-outline";
+
+export { default as iconBookmark } from "@ktibow/iconset-ion/bookmark-outline";
+export { default as iconCode } from "@ktibow/iconset-ion/code-outline";
+
+export { default as iconLink } from "@ktibow/iconset-ion/link-outline";
+
+export { default as iconAdd } from "@ktibow/iconset-ion/add";
+// duplicate-outline is used in multiple places (alias both `iconNew` and `iconAddFromDuplicate`)
+export { default as iconNew } from "@ktibow/iconset-ion/duplicate-outline";
+export { default as iconAddFromDuplicate } from "@ktibow/iconset-ion/duplicate-outline";
+export { default as iconDuplicate } from "@ktibow/iconset-ion/copy-outline"; // alias for copy-outline usage
+export { default as iconCopy } from "@ktibow/iconset-ion/copy-outline";
+
+export { default as iconSave } from "@ktibow/iconset-ion/save-outline";
+
+export { default as iconOpen } from "@ktibow/iconset-ion/open-outline";
+export { default as iconBrush } from "@ktibow/iconset-ion/brush-outline";
+export { default as iconTrash } from "@ktibow/iconset-ion/trash-outline";
+
+export { default as iconClose } from "@ktibow/iconset-ion/close";
+export { default as iconCloseOutline } from "@ktibow/iconset-ion/close-outline";
+export { default as iconCloseCircle } from "@ktibow/iconset-ion/close-circle-outline";
+
+export { default as iconFolder } from "@ktibow/iconset-ion/folder-outline";
+export { default as iconPause } from "@ktibow/iconset-ion/pause-outline";
+
+export { default as iconStar } from "@ktibow/iconset-ion/star-outline";
+export { default as iconStarFilled } from "@ktibow/iconset-ion/star";
+
+export { default as iconExtension } from "@ktibow/iconset-ion/extension-puzzle-outline";
+export { default as iconDownload } from "@ktibow/iconset-ion/download-outline";
+
+export { default as iconMore } from "@ktibow/iconset-ion/more";
+export { default as iconExit } from "@ktibow/iconset-ion/exit-outline";
+
+export { default as iconTime } from "@ktibow/iconset-ion/time-outline";
+export { default as iconInfo } from "@ktibow/iconset-ion/information-circle-outline";
+// alias commonly used name
+export { default as iconAbout } from "@ktibow/iconset-ion/information-circle-outline";
+
+export { default as iconSettings } from "@ktibow/iconset-ion/settings-outline";
+export { default as iconOptions } from "@ktibow/iconset-ion/options-outline";
+
+export { default as iconSearch } from "@ktibow/iconset-ion/search";
+export { default as iconSearchOutline } from "@ktibow/iconset-ion/search-outline";
+export { default as iconTrendingUp } from "@ktibow/iconset-ion/trending-up";
+
+export { default as iconShield } from "@ktibow/iconset-ion/shield-checkmark-outline";
+// alias used in codebase
+export { default as iconPrivacy } from "@ktibow/iconset-ion/shield-checkmark-outline";
+
+export { default as iconError } from "@ktibow/iconset-ion/alert-circle-outline";
+export { default as iconCheckmark } from "@ktibow/iconset-ion/checkmark-circle-outline";
+
+export { default as iconGlobe } from "@ktibow/iconset-ion/globe-outline";
+export { default as iconEarth } from "@ktibow/iconset-ion/earth-outline";
+export { default as iconServer } from "@ktibow/iconset-ion/server-outline";
+export { default as iconDesktop } from "@ktibow/iconset-ion/desktop-outline";
+export { default as iconCloud } from "@ktibow/iconset-ion/cloud-outline";

package/source/packages/chrome/src/index.ts

@@ -0,0 +1,168 @@
+// this needs to be first
+import "./sentry.tsx";
+
+import "./reset.css";
+import "./style.css";
+
+// temp fix for vite not working
+import.meta.hot?.accept(() => location.reload());
+
+import {
+	connectRoxxieTransport,
+	installRoxxieTransport,
+	subscribeToRoxxieStatus,
+} from "./proxy/roxxie.ts";
+
+import { ProfileService } from "./services/ProfileService.ts";
+import { SettingsService } from "./services/SettingsService.ts";
+import { TabsService } from "./services/TabsService.ts";
+import { DownloadsService } from "./services/DownloadsService.ts";
+import { FaviconService } from "./services/FaviconService.ts";
+import { KVWrapper } from "./services/KVWrapper.ts";
+import { Service } from "./services/Service.ts";
+import { migrate } from "./migrations/index.ts";
+import { mount } from "./App.tsx";
+import { createBundledAdBlocker } from "./adblock";
+import { mountStartScreen } from "./components/StartScreen.tsx";
+import { createRetryableTask } from "./startup.ts";
+
+export const isPuter =
+	import.meta.env.VITE_PUTER_BRANDING && puter.env == "app";
+export const puterBranding = import.meta.env.VITE_PUTER_BRANDING;
+export const STORAGE_VERSION = 2;
+
+export let profileService: ProfileService;
+export let settingsService: SettingsService;
+export let tabsService: TabsService;
+export let downloadsService: DownloadsService;
+export let faviconService: FaviconService;
+
+const bundledAdBlocker = createBundledAdBlocker(
+	() => settingsService?.settings.blockTrackers ?? true
+);
+export const adBlockService = bundledAdBlocker.service;
+export const adBlockPlugin = bundledAdBlocker.plugin;
+
+type ProfileMetadata = {
+	id: string;
+	storageKey: string;
+	name: string;
+	lastModified: number;
+};
+
+type SaveableService = Service & { save(): unknown };
+
+function registerSave(service: SaveableService, kv: KVWrapper, key: string) {
+	let saving = false;
+
+	const flush = async () => {
+		if (!service.dirty || saving) return;
+		saving = true;
+		const data = service.save();
+		// The snapshot now owns the current dirty state. Any mutation that occurs
+		// while storage is awaiting completion marks the service dirty again and
+		// must be preserved for the next flush.
+		service.dirty = false;
+		try {
+			await kv.set(key, data);
+		} catch {
+			service.dirty = true;
+		} finally {
+			saving = false;
+		}
+	};
+
+	setInterval(async () => {
+		await flush();
+	}, 1000);
+
+	window.addEventListener("pagehide", () => {
+		void flush();
+	});
+	document.addEventListener("visibilitychange", () => {
+		if (document.visibilityState === "hidden") {
+			void flush();
+		}
+	});
+}
+
+async function loadServices() {
+	await navigator.locks.request("write", async () => {
+		const kv = new KVWrapper(puterBranding ? "puter" : "localstorage");
+		let version;
+		if (await kv.has("version")) {
+			version = Number(await kv.get("version"));
+		} else if (await kv.has("browserstate")) {
+			// pre-services
+			version = 0;
+		} else {
+			// new install
+			version = STORAGE_VERSION;
+		}
+
+		if (version !== STORAGE_VERSION) {
+			try {
+				await migrate(version, kv);
+			} catch (e) {
+				console.error(`error migrating storage: ${e}`);
+			}
+		}
+		await kv.set("version", STORAGE_VERSION);
+
+		settingsService = new SettingsService(await kv.get("settings"));
+		registerSave(settingsService, kv, "settings");
+		faviconService = new FaviconService(await kv.get("faviconCache"));
+		registerSave(faviconService, kv, "faviconCache");
+
+		let profiles = await kv.get<ProfileMetadata[]>("profiles");
+		if (!profiles) {
+			profiles = [];
+		}
+
+		if (profiles.length === 0) {
+			profiles.push({
+				id: "default",
+				name: "Default",
+				lastModified: Date.now(),
+				storageKey: "profile-default",
+			});
+		}
+
+		const profile = profiles[0];
+
+		profileService = new ProfileService(await kv.get(profile.storageKey));
+		registerSave(profileService, kv, profile.storageKey);
+		downloadsService = new DownloadsService();
+
+		const tabsKey = `tabs-${profile.id}`;
+		tabsService = new TabsService(await kv.get(tabsKey));
+		registerSave(tabsService, kv, tabsKey);
+	});
+}
+
+const prepareBrowser = createRetryableTask(async () => {
+	if (import.meta.env.VITE_PUTER_BRANDING && !puter.auth.isSignedIn()) {
+		await puter.auth.signIn();
+	}
+	await loadServices();
+	// The bundled EasyList/uBlock-compatible blocker must be ready before any
+	// restored tab or first navigation is allowed to run.
+	await bundledAdBlocker.ready;
+});
+
+// Installation only wires the transport into Scramjet. The tracker is not
+// contacted until the user explicitly presses Start on the gate below.
+installRoxxieTransport();
+mountStartScreen({
+	connect: async () => {
+		await connectRoxxieTransport();
+	},
+	launch: async () => {
+		await prepareBrowser();
+		// Preparation can take long enough for a selected node to disappear. Check
+		// the verified connection once more at the exact browser-mount boundary.
+		await connectRoxxieTransport();
+		await mount();
+	},
+	subscribeStatus: subscribeToRoxxieStatus,
+});

package/source/packages/chrome/src/migrations/0-from-legacy.ts

@@ -0,0 +1,6 @@
+import { migration } from ".";
+import { KVWrapper } from "../services/KVWrapper";
+
+export default migration(0, async (kv: KVWrapper) => {
+	throw new Error("Not attempting to migrate legacy settings");
+});

package/source/packages/chrome/src/migrations/1-vertical-tab-settings.ts

@@ -0,0 +1,15 @@
+import { migration } from ".";
+import type { SettingsServiceState } from "../services/SettingsService";
+import { KVWrapper } from "../services/KVWrapper";
+
+export default migration(1, async (kv: KVWrapper) => {
+	const data = await kv.get<SettingsServiceState>("settings");
+	if (!data?.settings) return;
+
+	const { settings } = data;
+	settings.tabLayout = "horizontal";
+	settings.verticalTabJustify = "left";
+	settings.sidebarWidth = null;
+
+	await kv.set("settings", data);
+});

package/source/packages/chrome/src/migrations/index.ts

@@ -0,0 +1,42 @@
+import { STORAGE_VERSION } from "..";
+import { KVWrapper } from "../services/KVWrapper";
+
+export type MigrationAction = (kv: KVWrapper) => Promise<void>;
+export type Migration = {
+	version: number;
+	action: MigrationAction;
+};
+
+export function migration(
+	version: number,
+	migrate: MigrationAction
+): Migration {
+	return {
+		version,
+		action: migrate,
+	};
+}
+
+export async function migrate(version: number, kv: KVWrapper) {
+	const modules = import.meta.glob("./[0-9]*.ts", { eager: true });
+	const migrations = Object.values(modules).map(
+		(m: any) => m.default
+	) as Migration[];
+	console.log(migrations);
+	console.log(
+		`attempting migration from ver. ${version} to ${STORAGE_VERSION}`
+	);
+	for (let i = version; i < STORAGE_VERSION; i++) {
+		const migration = Object.values(migrations).find((m) => m.version === i)!;
+		if (!migrate) {
+			throw new Error(`Migration ${i} not found`);
+		}
+		console.log(`running migration ${i}`);
+		// eslint-disable-next-line no-await-in-loop
+		await migration.action(kv);
+		console.log(`migration ${i} complete`);
+		// eslint-disable-next-line no-await-in-loop
+		await kv.set("version", (i + 1).toString());
+	}
+	console.log("migration complete");
+}

package/source/packages/chrome/src/pages/AboutPage.tsx

@@ -0,0 +1,37 @@
+import { css, type FC } from "dreamland/core";
+import type { Tab } from "../Tab/Tab";
+import { versionInfo } from "@mercuryworkshop/scramjet/bundled";
+
+export function AboutPage(this: FC<{ tab: Tab }>) {
+	return (
+		<div>
+			<div class="main">
+				<h1>Puter Browser</h1>
+				Scramjet Version: {versionInfo.version} ({versionInfo.build})
+			</div>
+		</div>
+	);
+}
+AboutPage.style = css`
+	:scope {
+		width: 100%;
+		height: 100%;
+		display: flex;
+		justify-content: center;
+		font-family: sans-serif;
+		background: var(--ntp_background);
+		color: var(--ntp_text);
+	}
+
+	.main {
+		width: 70%;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.main {
+		position: relative;
+		top: 10em;
+	}
+`;