roxxie-proxy-u-prod 0.1.0

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

@@ -0,0 +1,279 @@
+import { css, type FC } from "dreamland/core";
+import { Button } from "@components/Button";
+import { Icon } from "@components/Icon";
+import { iconClose, iconError, iconCheckmark } from "../icons";
+import { versionInfo } from "@mercuryworkshop/scramjet/bundled";
+import { Input } from "@components/Input";
+import { tabsService } from "..";
+
+export function ReportBrokenSiteModal(
+	this: FC<
+		{ onClose: () => void },
+		{
+			url: string;
+			version: string;
+			ua: string;
+			email: string;
+			description: string;
+			status: "idle" | "loading" | "success" | "error";
+			statusMessage: string;
+		}
+	>
+) {
+	this.url = tabsService.activetab.url.href;
+	this.version = `${versionInfo.version} (${versionInfo.build})`;
+	this.ua = navigator.userAgent;
+	this.description = "";
+	this.email = "";
+	this.status = "idle" as "idle" | "loading" | "success" | "error";
+	this.statusMessage = "";
+
+	this.cx.mount = () => {
+		document.body.appendChild(this.root);
+	};
+
+	const close = () => {
+		this.root.remove();
+		this.onClose();
+	};
+
+	const sendReport = async () => {
+		this.status = "loading";
+		this.statusMessage = "";
+
+		try {
+			let resp = await puter.workers.exec(
+				"https://browser.puter.work/api/report",
+				{
+					method: "POST",
+					body: JSON.stringify({
+						email: this.email,
+						siteUrl: this.url,
+						scramjetVersion: this.version,
+						userAgent: this.ua,
+						description: this.description,
+					}),
+				}
+			);
+
+			const isSuccess = resp && resp.status === 200;
+
+			if (isSuccess) {
+				this.status = "success";
+				this.statusMessage = "Report sent successfully!";
+				setTimeout(() => {
+					close();
+				}, 1500);
+			} else {
+				this.status = "error";
+				this.statusMessage =
+					resp.error || "Failed to send report. Please try again.";
+			}
+		} catch (error) {
+			this.status = "error";
+			this.statusMessage =
+				error instanceof Error
+					? error.message
+					: "Failed to send report. Please try again.";
+		}
+	};
+
+	return (
+		<div class="backdrop" on:click={close}>
+			<div class="modal" on:click={(e: Event) => e.stopPropagation()}>
+				<div class="header">
+					<span>Report Broken Site</span>
+					<Button
+						variant="icon"
+						on:click={close}
+						disabled={use(this.status).map((s) => s === "loading")}
+					>
+						<Icon icon={iconClose} />
+					</Button>
+				</div>
+				<div class="content">
+					{use(this.status)
+						.map((s) => s === "idle" || s === "loading")
+						.and(
+							<>
+								<p>Is this site not working correctly?</p>
+								<Input label="Page URL" value={use(this.url)} disabled={true} />
+								<Input
+									label="Scramjet Version"
+									value={use(this.version)}
+									disabled={true}
+								/>
+								<Input
+									label="User Agent"
+									value={use(this.ua)}
+									disabled={true}
+								/>
+								<Input
+									label="Email (optional)"
+									value={use(this.email)}
+									disabled={use(this.status).map((s) => s === "loading")}
+								/>
+								<textarea
+									value={use(this.description)}
+									placeholder="Describe the issue..."
+									disabled={use(this.status).map((s) => s === "loading")}
+								></textarea>
+							</>
+						)
+						.or(
+							<div class="status-container">
+								{use(this.status)
+									.map((s) => s === "success")
+									.and(
+										<div class="status-icon success">
+											<Icon icon={iconCheckmark} width="64px" height="64px" />
+										</div>
+									)
+									.or(
+										<div class="status-icon error">
+											<Icon icon={iconError} width="64px" height="64px" />
+										</div>
+									)}
+								<p class="status-message">{use(this.statusMessage)}</p>
+							</div>
+						)}
+				</div>
+				<div class="footer">
+					{use(this.status)
+						.map((s) => s === "idle" || s === "loading")
+						.and(
+							<>
+								<Button
+									on:click={close}
+									disabled={use(this.status).map((s) => s === "loading")}
+								>
+									Cancel
+								</Button>
+								<Button
+									variant="primary"
+									on:click={sendReport}
+									disabled={use(this.status).map((s) => s === "loading")}
+								>
+									{use(this.status)
+										.map((s) => s === "loading")
+										.and("Sending...")
+										.or("Send Report")}
+								</Button>
+							</>
+						)
+						.or(
+							<Button variant="primary" on:click={close}>
+								{use(this.status)
+									.map((s) => s === "success")
+									.and("Close")
+									.or("Try Again")}
+							</Button>
+						)}
+				</div>
+			</div>
+		</div>
+	);
+}
+
+ReportBrokenSiteModal.style = css`
+	.backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		background: rgba(0, 0, 0, 0.5);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		z-index: 2000;
+	}
+	.modal {
+		background: var(--frame);
+		border: 1px solid var(--popup_border);
+		border-radius: 8px;
+		width: 500px;
+		display: flex;
+		flex-direction: column;
+		box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
+		color: var(--toolbar_text);
+	}
+	.header {
+		padding: 1em;
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		border-bottom: 1px solid var(--popup_border);
+		font-weight: bold;
+	}
+	.content {
+		padding: 1em;
+		display: flex;
+		flex-direction: column;
+		gap: 0.5em;
+	}
+	textarea {
+		width: 100%;
+		height: 100px;
+		background: var(--toolbar_field);
+		border: 1px solid var(--popup_border);
+		color: var(--toolbar_text);
+		padding: 0.5em;
+		border-radius: var(--radius-md);
+		resize: none;
+		font-family: inherit;
+	}
+	.footer {
+		padding: 1em;
+		display: flex;
+		justify-content: flex-end;
+		gap: 0.5em;
+		border-top: 1px solid var(--popup_border);
+	}
+	.status-container {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		justify-content: center;
+		padding: 2em 1em;
+		gap: 1em;
+	}
+	.status-icon {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		animation: scaleIn 0.3s ease-out;
+	}
+	.status-icon.success {
+		color: #4caf50;
+	}
+	.status-icon.error {
+		color: #f44336;
+	}
+	.status-message {
+		text-align: center;
+		font-size: 1.1em;
+		margin: 0;
+		animation: fadeIn 0.3s ease-out;
+	}
+	@keyframes scaleIn {
+		from {
+			transform: scale(0);
+			opacity: 0;
+		}
+		to {
+			transform: scale(1);
+			opacity: 1;
+		}
+	}
+	@keyframes fadeIn {
+		from {
+			opacity: 0;
+			transform: translateY(-10px);
+		}
+		to {
+			opacity: 1;
+			transform: translateY(0);
+		}
+	}
+`;

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

@@ -0,0 +1,191 @@
+import { createDelegate, css, type FC } from "dreamland/core";
+import { popTab, pushTab } from "../services/TabsService";
+import { tabsService } from "..";
+
+let locks: Symbol[] = [];
+let setUnfocus = createDelegate<boolean>();
+export function requestUnfocusFrames(): [() => void, () => void] {
+	let lock = Symbol();
+	return [
+		() => {
+			setUnfocus(true);
+			locks.push(lock);
+		},
+		() => {
+			locks = locks.filter((l) => l !== lock);
+			if (locks.length === 0) {
+				setUnfocus(false);
+			}
+		},
+	];
+}
+
+export function Shell(this: FC<{}>) {
+	pushTab.listen((tab) => {
+		// paint the iframes
+		tab.frame.frame.classList.add(this.cx.id!);
+		// tab.devtoolsFrame.frame.classList.add(this.cx.id!);
+
+		let mouseMoveListen = (e: MouseEvent) => {
+			tab.devtoolsWidth = window.innerWidth - e.clientX;
+		};
+
+		const [lock, unlock] = requestUnfocusFrames();
+
+		this.root.appendChild(
+			<div
+				class="container"
+				data-tab={tab.id}
+				id={"tab" + tab.id}
+				class:active={use(tabsService.activetab).map((t) => t === tab)}
+				class:showframe={use(tab.internalpage).map((t) => !t)}
+			>
+				<div class="mainframecontainer">
+					{use(tab.internalpage)}
+					{tab.frame.frame}
+				</div>
+				<div
+					class="devtools"
+					class:active={use(tab.devtoolsOpen)}
+					style={use`width: ${tab.devtoolsWidth}px`}
+				>
+					<div
+						on:mousedown={(e: MouseEvent) => {
+							lock();
+							document.body.style.cursor = "ew-resize";
+							window.addEventListener("mousemove", mouseMoveListen);
+							window.addEventListener("mouseup", () => {
+								unlock();
+								window.removeEventListener("mousemove", mouseMoveListen);
+								document.body.style.cursor = "";
+							});
+						}}
+						class="divider"
+					></div>
+					<div class="devtoolsframecontainer">
+						{/*{tab.devtoolsFrame.frame}*/}
+					</div>
+				</div>
+				<progress value={use(tab.loadProgress)}></progress>
+			</div>
+		);
+	});
+	popTab.listen((tab) => {
+		const container = this.root.querySelector(`[data-tab="${tab.id}"]`);
+		if (!container) throw new Error(`No container found for tab ${tab.id}`);
+		container.remove();
+	});
+	// forceScreenshot.listen(async (tab) => {
+	// 	const container = this.root.querySelector(
+	// 		`[data-tab="${tab.id}"]`
+	// 	) as HTMLElement;
+	// 	if (!container) throw new Error(`No container found for tab ${tab.id}`);
+
+	// 	let blob = await takeScreenshotGDM(container);
+	// 	if (blob) tab.screenshot = URL.createObjectURL(blob);
+	// 	else {
+	// 		// tab.screenshot = await takeScreenshotSvg(container);
+	// 	}
+	// });
+	setUnfocus.listen((unfocus) => {
+		if (unfocus) {
+			this.root
+				.querySelectorAll(".mainframecontainer, .devtoolsframecontainer")
+				.forEach((el) => {
+					if (!(el instanceof HTMLElement)) return;
+					el.style.pointerEvents = "none";
+				});
+		} else {
+			this.root
+				.querySelectorAll(".mainframecontainer, .devtoolsframecontainer")
+				.forEach((el) => {
+					if (!(el instanceof HTMLElement)) return;
+					el.style.pointerEvents = "";
+				});
+		}
+	});
+
+	return <div></div>;
+}
+
+Shell.style = css`
+	:scope {
+		flex: 1;
+		overflow: hidden;
+		width: 100%;
+		position: relative;
+	}
+	.container {
+		position: absolute;
+		width: 100%;
+		height: 100%;
+		display: flex;
+		top: 0;
+		left: 0;
+		z-index: -1;
+		/*display: none;*/
+
+		/*https://screen-share.github.io/element-capture/#elements-eligible-for-restriction*/
+		isolation: isolate;
+		transform-style: flat;
+
+		background-color: var(--ntp_background);
+	}
+	.container.active {
+		z-index: 0;
+	}
+	.container .devtools {
+		position: relative;
+		display: none;
+		width: 20em;
+	}
+	.container .devtools.active {
+		display: flex;
+	}
+
+	.devtoolsframecontainer {
+		width: 100%;
+	}
+
+	.mainframecontainer {
+		display: flex;
+		width: 100%;
+		flex: 1;
+		background: white;
+	}
+
+	.divider {
+		position: absolute;
+		top: 0;
+		left: -5px;
+		width: 5px;
+		/* background: #ccc; */
+		border-right: 1px solid #ccc;
+		height: 100%;
+		cursor: ew-resize;
+	}
+
+	iframe {
+		flex: 1;
+		height: 100%;
+		width: 100%;
+		border: none;
+		display: none;
+	}
+	.showframe iframe {
+		display: block;
+	}
+	progress {
+		z-index: 1;
+		position: absolute;
+		width: 100%;
+		height: 3px;
+		border: none;
+	}
+	progress::-webkit-progress-bar {
+		background-color: transparent;
+	}
+	progress::-webkit-progress-value {
+		background-color: var(--tab_line);
+	}
+`;

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

@@ -0,0 +1,96 @@
+import { css, type FC } from "dreamland/core";
+import { type Tab } from "../Tab/Tab";
+import { splitUrl } from "../util";
+
+import { iconClose } from "../icons";
+import { Icon } from "@components/Icon";
+import { Button } from "@components/Button";
+
+import { closeMenu } from "@components/Menu";
+
+export function SiteInformationPopup(this: FC<{ tab: Tab }>) {
+	return (
+		<div>
+			<div class="header section">
+				<span>
+					{use(this.tab.url).map((u) => splitUrl(u)[0] + splitUrl(u)[1])}
+				</span>
+				<div class="buttoniconscontainer">
+					<Button
+						variant="icon"
+						on:click={() => {
+							closeMenu();
+						}}
+					>
+						<Icon icon={iconClose}></Icon>
+					</Button>
+				</div>
+			</div>
+			<div class="content section">
+				<p>Connection is forwarded through an authenticated Roxxie node.</p>
+			</div>
+			<div class="footer section">
+				{/* <div class="entry">
+					<Icon icon={iconTrash}></Icon>
+					<span>Clear Site Data</span>
+				</div>
+				<div class="entry">
+					<Icon icon={iconSettings}></Icon>
+					<span>Site Settings</span>
+				</div> */}
+			</div>
+		</div>
+	);
+}
+SiteInformationPopup.style = css`
+	:scope {
+		display: flex;
+		flex-direction: column;
+		gap: var(--space-xl);
+		width: 20em;
+
+		color: var(--toolbar_text);
+	}
+
+	.buttoniconscontainer {
+		flex: 1;
+		display: flex;
+		align-items: top;
+		justify-content: end;
+		color: var(--toolbar_text);
+	}
+
+	.content {
+		padding-inline: var(--space-xl);
+		font-size: 0.85em;
+		line-height: 1.3;
+	}
+
+	.header {
+		padding: var(--space-xl);
+		display: flex;
+		border-bottom: 1px solid var(--popup_border);
+	}
+	.header span {
+		font-size: 1.15em;
+		font-weight: 500;
+	}
+
+	.footer {
+		border-top: 1px solid var(--popup_border);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.entry {
+		padding: var(--space-xl);
+		padding-left: calc(var(--space-xl) - 4px);
+		cursor: pointer;
+		display: flex;
+		align-items: center;
+		gap: var(--space-md);
+	}
+	.entry:hover {
+		background: var(--toolbarbutton-hover-background);
+	}
+`;

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

@@ -0,0 +1,36 @@
+import type { IconifyIcon } from "@iconify/types";
+import { css, type FC } from "dreamland/core";
+import { Icon } from "@components/Icon";
+
+export function SmallIconButton(
+	this: FC<{
+		click: (e: MouseEvent) => void;
+		icon: IconifyIcon;
+	}>
+) {
+	return (
+		<button on:click={this.click}>
+			<Icon icon={this.icon}></Icon>
+		</button>
+	);
+}
+SmallIconButton.style = css`
+	:scope {
+		display: flex;
+		align-items: center;
+		font-size: 1em;
+		position: relative;
+	}
+	:scope:hover::before {
+		content: "";
+		z-index: -1;
+		position: absolute;
+		width: 150%;
+		height: 150%;
+		top: 50%;
+		left: 50%;
+		transform: translate(-50%, -50%);
+		background: var(--text-15);
+		border-radius: 50%;
+	}
+`;