roxxie-proxy-u-prod 0.1.0

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

@@ -0,0 +1,386 @@
+/* SPDX-License-Identifier: AGPL-3.0-only */
+
+import { css, type FC } from "dreamland/core";
+import type { RoxxieTransportStatus } from "roxxie-transports";
+
+import { BrowserStartupController, type BrowserStartupPhase } from "../startup";
+
+export interface StartScreenProps {
+	connect: () => Promise<void>;
+	launch: () => Promise<void>;
+	subscribeStatus: (
+		listener: (status: RoxxieTransportStatus) => void
+	) => () => void;
+}
+
+interface StartScreenState {
+	phase: BrowserStartupPhase;
+	message: string;
+	details: string[];
+}
+
+export function StartScreen(this: FC<StartScreenProps, StartScreenState>) {
+	this.phase = "idle" as BrowserStartupPhase;
+	this.message = "Ready to connect.";
+	this.details = [];
+
+	let unsubscribe: () => void = () => undefined;
+	const controller = new BrowserStartupController(
+		this.connect,
+		async () => {
+			await this.launch();
+			unsubscribe();
+		},
+		(state) => {
+			this.phase = state.phase;
+			this.message = state.message;
+			this.details = state.details;
+		}
+	);
+
+	this.cx.mount = () => {
+		unsubscribe = this.subscribeStatus((status) => {
+			if (status.state === "connecting") {
+				const noun = status.candidateCount === 1 ? "node" : "nodes";
+				controller.updateProgress(
+					`Tracker reached. Testing ${status.candidateCount} available ${noun}…`
+				);
+			} else if (status.state === "connected") {
+				controller.updateProgress(
+					`Connected to ${status.nodeName} (${Math.round(status.rttMs)} ms). Verifying the session…`
+				);
+			}
+		});
+	};
+
+	const start = () => {
+		void controller.start();
+	};
+
+	return (
+		<div class="start-screen">
+			<main class="start-panel" aria-labelledby="start-title">
+				<header class="product-name">
+					<span class="product-mark" aria-hidden="true">
+						R
+					</span>
+					<span>Roxxie Proxy U</span>
+				</header>
+
+				<div class="introduction">
+					<p class="eyebrow">Private browsing network</p>
+					<h1 id="start-title">Connect before browsing</h1>
+					<p class="description">
+						Roxxie will contact the tracker, test the available nodes, and
+						select a working connection before the browser opens.
+					</p>
+				</div>
+
+				<section
+					class="connection-status"
+					aria-live="polite"
+					aria-atomic="true"
+				>
+					<span class="status-label">
+						{use(this.phase).map((phase) => {
+							switch (phase) {
+								case "connecting":
+									return "Connecting";
+								case "launching":
+									return "Connected";
+								case "failed":
+									return "Connection failed";
+								default:
+									return "Not connected";
+							}
+						})}
+					</span>
+					<p>{use(this.message)}</p>
+				</section>
+
+				{use(this.phase)
+					.map((phase) => phase === "failed")
+					.and(
+						<section class="connection-error" role="alert">
+							<p>
+								Check that the tracker is reachable and at least one approved
+								node is online, then try again.
+							</p>
+							{use(this.details)
+								.map((details) => details.length > 0)
+								.and(
+									<details open={true}>
+										<summary>Technical details</summary>
+										<ul>
+											{use(this.details).mapEach((detail) => (
+												<li>{detail}</li>
+											))}
+										</ul>
+									</details>
+								)}
+						</section>
+					)}
+
+				<button
+					type="button"
+					class="start-button"
+					disabled={use(this.phase).map(
+						(phase) => phase === "connecting" || phase === "launching"
+					)}
+					on:click={start}
+				>
+					{use(this.phase).map((phase) => {
+						if (phase === "connecting") return "Connecting…";
+						if (phase === "launching") return "Opening browser…";
+						if (phase === "failed") return "Try again";
+						return "Start";
+					})}
+				</button>
+
+				<p class="network-note">
+					The tracker coordinates setup only. Browsing traffic travels directly
+					between this browser and the selected node.
+				</p>
+			</main>
+		</div>
+	);
+}
+
+export function mountStartScreen(props: StartScreenProps): HTMLElement {
+	const host = document.getElementById("app");
+	if (host === null) throw new Error("Browser application host is missing");
+	const screen = (
+		<StartScreen
+			connect={props.connect}
+			launch={props.launch}
+			subscribeStatus={props.subscribeStatus}
+		/>
+	);
+	// App.tsx retains this host reference for the final mount. Keep the host in
+	// the document and replace only its children while the gate is visible.
+	host.replaceChildren(screen);
+	return screen;
+}
+
+StartScreen.style = css`
+	:scope {
+		--start-background: #f2f1ed;
+		--start-panel: #ffffff;
+		--start-text: #1c1d1f;
+		--start-muted: #64676c;
+		--start-border: #d5d4cf;
+		--start-subtle: #f7f7f5;
+		--start-action: #245e4a;
+		--start-action-hover: #194936;
+		--start-error-background: #fff7f5;
+		--start-error-border: #c98d83;
+		--start-error-text: #732d24;
+
+		width: 100%;
+		height: 100%;
+		overflow: auto;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		padding: 2rem 1.25rem;
+		background: var(--start-background);
+		color: var(--start-text);
+		font-family:
+			Inter,
+			ui-sans-serif,
+			system-ui,
+			-apple-system,
+			sans-serif;
+	}
+
+	.start-panel {
+		width: min(100%, 31rem);
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		padding: 2rem;
+		background: var(--start-panel);
+		border: 1px solid var(--start-border);
+		border-radius: 6px;
+	}
+
+	.product-name {
+		display: flex;
+		align-items: center;
+		gap: 0.65rem;
+		font-size: 0.9rem;
+		font-weight: 650;
+		letter-spacing: 0.01em;
+	}
+
+	.product-mark {
+		width: 1.75rem;
+		height: 1.75rem;
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: 4px;
+		background: var(--start-action);
+		color: #ffffff;
+		font-size: 0.95rem;
+		font-weight: 750;
+	}
+
+	.introduction {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+	}
+
+	.eyebrow {
+		color: var(--start-action);
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.08em;
+		text-transform: uppercase;
+	}
+
+	h1 {
+		font-size: clamp(1.65rem, 5vw, 2rem);
+		font-weight: 680;
+		line-height: 1.15;
+		letter-spacing: -0.025em;
+	}
+
+	.description,
+	.network-note,
+	.connection-status p,
+	.connection-error p {
+		line-height: 1.55;
+	}
+
+	.description {
+		color: var(--start-muted);
+		font-size: 0.95rem;
+	}
+
+	.connection-status {
+		display: flex;
+		flex-direction: column;
+		gap: 0.45rem;
+		padding: 0.9rem 1rem;
+		background: var(--start-subtle);
+		border: 1px solid var(--start-border);
+		border-radius: 4px;
+	}
+
+	.status-label {
+		font-size: 0.75rem;
+		font-weight: 700;
+		letter-spacing: 0.05em;
+		text-transform: uppercase;
+	}
+
+	.connection-status p {
+		color: var(--start-muted);
+		font-size: 0.875rem;
+	}
+
+	.connection-error {
+		display: flex;
+		flex-direction: column;
+		gap: 0.85rem;
+		padding: 1rem;
+		background: var(--start-error-background);
+		border: 1px solid var(--start-error-border);
+		border-radius: 4px;
+		color: var(--start-error-text);
+		font-size: 0.85rem;
+	}
+
+	details {
+		border-top: 1px solid var(--start-error-border);
+		padding-top: 0.75rem;
+	}
+
+	summary {
+		cursor: pointer;
+		font-weight: 650;
+	}
+
+	ul {
+		max-height: 10rem;
+		overflow: auto;
+		margin-top: 0.7rem;
+		padding-left: 1.25rem;
+		list-style: disc;
+	}
+
+	li {
+		margin: 0.4rem 0;
+		line-height: 1.4;
+		overflow-wrap: anywhere;
+	}
+
+	.start-button {
+		width: 100%;
+		min-height: 2.75rem;
+		padding: 0.7rem 1rem;
+		background: var(--start-action);
+		border: 1px solid var(--start-action);
+		border-radius: 4px;
+		color: #ffffff;
+		font: inherit;
+		font-size: 0.95rem;
+		font-weight: 650;
+		cursor: pointer;
+	}
+
+	.start-button:hover:not(:disabled) {
+		background: var(--start-action-hover);
+		border-color: var(--start-action-hover);
+	}
+
+	.start-button:focus-visible {
+		outline: 3px solid #8ba99e;
+		outline-offset: 2px;
+	}
+
+	.start-button:disabled {
+		background: #7c9189;
+		border-color: #7c9189;
+		cursor: wait;
+	}
+
+	.network-note {
+		color: var(--start-muted);
+		font-size: 0.78rem;
+	}
+
+	@media (prefers-color-scheme: dark) {
+		:scope {
+			--start-background: #181a1b;
+			--start-panel: #222526;
+			--start-text: #f1f2ef;
+			--start-muted: #b4b8b5;
+			--start-border: #444846;
+			--start-subtle: #292c2d;
+			--start-action: #3d8068;
+			--start-action-hover: #4a9278;
+			--start-error-background: #322321;
+			--start-error-border: #875c55;
+			--start-error-text: #f0c1b9;
+		}
+	}
+
+	@media (max-width: 34rem) {
+		:scope {
+			align-items: flex-start;
+			padding: 0;
+			background: var(--start-panel);
+		}
+
+		.start-panel {
+			min-height: 100%;
+			padding: 1.5rem;
+			border: 0;
+			border-radius: 0;
+			justify-content: center;
+		}
+	}
+`;