@adea-ai/ui 0.96.0 → 0.97.1

package/dist/components/composites/update-dialog/update-dialog.js

@@ -2,22 +2,24 @@ import { cn } from "../../../lib/utils.js";
 import { Badge } from "../../ui/badge/badge.js";
 import { Button } from "../../ui/button/button.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger, createDialogFocusRestoration } from "../../ui/dialog/dialog.js";
+import { ActionButton } from "../action-button/action-button.js";
 import { Progress } from "../../ui/progress/progress.js";
 import { formatBytes, formatReleaseDate, plainTextFromMarkdown } from "../../../lib/version-notes.js";
-import { createComponent, insert, memo, template } from "solid-js/web";
-import { Check, Download, ExternalLink, LoaderCircle, RefreshCw, Sparkles } from "lucide-solid";
+import { createComponent, effect, insert, memo, setAttribute, template } from "solid-js/web";
+import { Check, CircleStop, Download, ExternalLink, LoaderCircle, Monitor, RefreshCw, Sparkles } from "lucide-solid";
 import { Show, createEffect, createMemo, createSignal, onCleanup, onMount, splitProps } from "solid-js";
 //#region src/components/composites/update-dialog/update-dialog.tsx
-var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-3"><span class="flex size-10 items-center justify-center rounded-xl bg-primary text-primary-foreground"></span><div>`);
-var _tmpl$2 = /*#__PURE__*/ template(`<section class="rounded-xl border border-primary/35 bg-primary-subtle p-4"aria-label="Available update"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="flex items-center gap-2 text-sm font-semibold">Version <!> is ready</p><p class="text-sm text-muted-foreground">The signed installer is verified before <!> restarts.`);
+var _tmpl$ = /*#__PURE__*/ template(`<div class="flex items-center gap-3"><div>`);
+var _tmpl$2 = /*#__PURE__*/ template(`<section class="rounded-xl border border-primary/35 bg-primary-subtle p-4"aria-label="Available update"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="flex items-center gap-2 text-sm font-semibold">Version <!> </p><p class="text-sm text-muted-foreground">The signed installer is verified before <!> restarts.`);
 var _tmpl$3 = /*#__PURE__*/ template(`<section class="grid gap-2"aria-label="Update progress"><p class="text-xs text-muted-foreground"role=status>`);
 var _tmpl$4 = /*#__PURE__*/ template(`<p class="text-foreground flex items-center gap-2 text-sm"role=status> is up to date.`);
 var _tmpl$5 = /*#__PURE__*/ template(`<p class="text-foreground flex items-center gap-2 text-sm"role=status>`);
 var _tmpl$6 = /*#__PURE__*/ template(`<p class="text-foreground rounded-lg border border-destructive/35 bg-destructive-subtle px-3 py-2 text-sm"role=alert>`);
-var _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><div class="flex items-center gap-2"><h2 id=update-release-notes class="text-sm font-semibold">What changed in this release</h2></div><div class="max-h-52 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"role=region aria-labelledby=update-release-notes tabindex=0>`);
-var _tmpl$8 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><h2 id=update-changelog class="text-sm font-semibold">Installed changelog</h2><p class="text-xs text-muted-foreground">A plain-text history of the installed release channel.</p><div class="max-h-72 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"role=region aria-labelledby=update-changelog tabindex=0>`);
-var _tmpl$9 = /*#__PURE__*/ template(`<div class="flex min-h-0 flex-col gap-5 overflow-y-auto p-6"><section class="rounded-xl border border-border bg-background/45 p-4"aria-label="Version status"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="text-2xs font-semibold tracking-widest text-muted-foreground uppercase">Installed version</p><p class="text-xl font-semibold tracking-tight">v</p><p class="text-sm text-muted-foreground">`);
-var _tmpl$0 = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">Released `);
+var _tmpl$7 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><div class="flex items-center gap-2"><h2 id=update-release-notes class="text-sm font-semibold text-primary">What changed in this release</h2></div><div class="max-h-52 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"role=region aria-labelledby=update-release-notes tabindex=0>`);
+var _tmpl$8 = /*#__PURE__*/ template(`<div class="flex flex-col gap-2"><h2 id=update-changelog class="text-sm font-semibold text-primary">Installed changelog</h2><p class="text-xs text-muted-foreground">All versions and updates included with this installation.</p><div class="max-h-72 overflow-y-auto rounded-xl border border-border bg-background/45 p-4 font-mono text-xs leading-5 whitespace-pre-wrap text-muted-foreground"role=region aria-labelledby=update-changelog tabindex=0>`);
+var _tmpl$9 = /*#__PURE__*/ template(`<div class="flex min-h-0 flex-col gap-5 overflow-y-auto p-6"><section class="rounded-xl border border-border bg-background/45 p-4"aria-label="Version status"><div class="flex flex-wrap items-start justify-between gap-4"><div class="flex flex-col gap-1"><p class="text-2xs font-semibold tracking-widest text-muted-foreground uppercase">Installed version</p><p class="text-xl font-semibold tracking-tight text-primary">v</p><p class="text-sm text-muted-foreground">`);
+var _tmpl$0 = /*#__PURE__*/ template(`<img alt class=size-10 aria-hidden=true>`);
+var _tmpl$1 = /*#__PURE__*/ template(`<p class="text-xs text-muted-foreground">Released `);
 function messageText(value) {
 	if (typeof value !== "string") return void 0;
 	const message = value.trim();
@@ -40,12 +42,14 @@ function errorMessage(caught, fallback) {
 * happens.
 */
 function isBusy(state) {
-	return state?.phase === "checking" || state?.phase === "downloading" || state?.phase === "installing";
+	return state?.phase === "checking" || state?.phase === "downloading" || state?.phase === "installing" || state?.phase === "cancelling";
 }
 function UpdateDialog(props) {
 	const [local] = splitProps(props, [
 		"adapter",
 		"appName",
+		"appIcon",
+		"changelog",
 		"fallbackVersion",
 		"desktopOnlyMessage",
 		"open",
@@ -70,6 +74,7 @@ function UpdateDialog(props) {
 	const [busy, setBusy] = createSignal(false);
 	const [error, setError] = createSignal("");
 	const [checkFailed, setCheckFailed] = createSignal(false);
+	const [cancelPending, setCancelPending] = createSignal(false);
 	let lifecycleEpoch = 0;
 	let activeOpenEpoch;
 	let disposed = false;
@@ -141,6 +146,7 @@ function UpdateDialog(props) {
 	*/
 	createEffect(() => {
 		if (!open() || !desktop()) {
+			setCancelPending(false);
 			if (activeOpenEpoch !== void 0) {
 				activeOpenEpoch = void 0;
 				lifecycleEpoch += 1;
@@ -160,6 +166,7 @@ function UpdateDialog(props) {
 		});
 		setError("");
 		setCheckFailed(false);
+		setCancelPending(false);
 		setBusy(true);
 		(async () => {
 			try {
@@ -182,10 +189,19 @@ function UpdateDialog(props) {
 		if (!version || !isCurrent()) return;
 		setBusy(true);
 		setError("");
+		setState((current) => current ? {
+			...current,
+			phase: "downloading",
+			downloadedBytes: 0,
+			totalBytes: null
+		} : current);
 		try {
 			const next = await local.adapter.install(version);
 			if (!isCurrent()) return;
-			setState(next);
+			setState(cancelPending() && ["downloading", "installing"].includes(next.phase) ? {
+				...next,
+				phase: "cancelling"
+			} : next);
 			if (next.phase === "failed") setError(errorMessage(next.error, "Update installation failed"));
 			else setCheckFailed(false);
 		} catch (caught) {
@@ -196,12 +212,75 @@ function UpdateDialog(props) {
 			if (isCurrent()) setBusy(false);
 		}
 	};
-	const changelog = createMemo(() => plainTextFromMarkdown(state()?.changelog ?? ""));
+	createEffect(() => {
+		const phase = state()?.phase;
+		if (!open() || !desktop() || !local.adapter.pollIntervalMs || ![
+			"downloading",
+			"installing",
+			"cancelling"
+		].includes(phase ?? "")) return;
+		const epoch = activeOpenEpoch;
+		let active = true;
+		let requestInFlight = false;
+		const timer = window.setInterval(() => {
+			if (requestInFlight) return;
+			requestInFlight = true;
+			(async () => {
+				try {
+					const next = await local.adapter.getStatus();
+					if (!active || disposed || !open() || activeOpenEpoch !== epoch) return;
+					setState(cancelPending() && ["downloading", "installing"].includes(next.phase) ? {
+						...next,
+						phase: "cancelling"
+					} : next);
+					if (next.phase === "failed") setError(errorMessage(next.error, "Update installation failed"));
+				} catch (caught) {
+					if (active && !disposed && activeOpenEpoch === epoch) setError(errorMessage(caught, "Update progress is unavailable"));
+				} finally {
+					requestInFlight = false;
+				}
+			})();
+		}, Math.max(250, local.adapter.pollIntervalMs));
+		onCleanup(() => {
+			active = false;
+			window.clearInterval(timer);
+		});
+	});
+	const cancel = async () => {
+		if (!local.adapter.cancel || cancelPending() || state()?.phase === "cancelling") return;
+		const epoch = activeOpenEpoch;
+		setError("");
+		setCancelPending(true);
+		setState((current) => current ? {
+			...current,
+			phase: "cancelling"
+		} : current);
+		try {
+			const next = await local.adapter.cancel();
+			if (!disposed && open() && activeOpenEpoch === epoch) setState(next);
+		} catch (caught) {
+			if (!disposed && open() && activeOpenEpoch === epoch) {
+				setError(errorMessage(caught, "Could not cancel the update"));
+				await loadStatus(() => !disposed && open() && activeOpenEpoch === epoch);
+			}
+		} finally {
+			if (!disposed && open() && activeOpenEpoch === epoch) setCancelPending(false);
+		}
+	};
+	const openRelease = async (url) => {
+		try {
+			if (local.adapter.openExternal) await local.adapter.openExternal(url);
+			else window.open(url, "_blank", "noopener,noreferrer");
+		} catch (caught) {
+			if (!disposed) setError(errorMessage(caught, "Could not open the release page"));
+		}
+	};
+	const changelog = createMemo(() => plainTextFromMarkdown(state()?.changelog || local.changelog || ""));
 	const notes = () => {
 		const value = state()?.releaseNotes;
 		return value ? plainTextFromMarkdown(value) : "";
 	};
-	const working = () => busy() || isBusy(state());
+	const working = () => busy() || cancelPending() || isBusy(state());
 	const isCurrent = () => state()?.phase === "current" && !error() && !checkFailed() && !working();
 	const triggerLabel = () => {
 		const current = state();
@@ -258,8 +337,18 @@ function UpdateDialog(props) {
 				get ["class"]() {
 					return cn("max-w-3xl", local.class);
 				},
-				get onOpenAutoFocus() {
-					return focusRestoration.onOpenAutoFocus;
+				onKeyDown: (event) => {
+					if (event.key === "Escape" && !event.defaultPrevented) {
+						event.preventDefault();
+						setOpen(false);
+					}
+				},
+				onOpenAutoFocus: (event) => {
+					focusRestoration.onOpenAutoFocus(event);
+					if (!event.defaultPrevented && event.currentTarget instanceof HTMLElement) {
+						event.preventDefault();
+						event.currentTarget.focus({ preventScroll: true });
+					}
 				},
 				get onCloseAutoFocus() {
 					return focusRestoration.onCloseAutoFocus;
@@ -267,13 +356,25 @@ function UpdateDialog(props) {
 				get children() {
 					return [
 						createComponent(DialogHeader, { get children() {
-							var _el$ = _tmpl$(), _el$2 = _el$.firstChild, _el$3 = _el$2.nextSibling;
-							insert(_el$2, createComponent(Sparkles, {
-								"class": "size-5",
-								"aria-hidden": "true"
-							}));
-							insert(_el$3, createComponent(DialogTitle, { children: "Version & updates" }), null);
-							insert(_el$3, createComponent(DialogDescription, { get children() {
+							var _el$ = _tmpl$(), _el$2 = _el$.firstChild;
+							insert(_el$, createComponent(Show, {
+								get when() {
+									return local.appIcon;
+								},
+								get fallback() {
+									return createComponent(Monitor, {
+										"class": "size-10 text-primary",
+										"aria-hidden": "true"
+									});
+								},
+								children: (icon) => (() => {
+									var _el$34 = _tmpl$0();
+									effect(() => setAttribute(_el$34, "src", icon()));
+									return _el$34;
+								})()
+							}), _el$2);
+							insert(_el$2, createComponent(DialogTitle, { children: "Version & updates" }), null);
+							insert(_el$2, createComponent(DialogDescription, { get children() {
 								return [
 									"Keep ",
 									memo(() => appName()),
@@ -283,11 +384,11 @@ function UpdateDialog(props) {
 							return _el$;
 						} }),
 						(() => {
-							var _el$4 = _tmpl$9(), _el$6 = _el$4.firstChild.firstChild, _el$9 = _el$6.firstChild.firstChild.nextSibling;
-							_el$9.firstChild;
-							var _el$1 = _el$9.nextSibling;
-							insert(_el$9, () => state()?.currentVersion || local.fallbackVersion || "0.1.0", null);
-							insert(_el$1, createComponent(Show, {
+							var _el$3 = _tmpl$9(), _el$5 = _el$3.firstChild.firstChild, _el$8 = _el$5.firstChild.firstChild.nextSibling;
+							_el$8.firstChild;
+							var _el$0 = _el$8.nextSibling;
+							insert(_el$8, () => state()?.currentVersion || local.fallbackVersion || "0.1.0", null);
+							insert(_el$0, createComponent(Show, {
 								get when() {
 									return isCurrent();
 								},
@@ -297,7 +398,7 @@ function UpdateDialog(props) {
 											return memo(() => state()?.phase === "available")() && state()?.availableVersion;
 										},
 										get fallback() {
-											return memo(() => !!desktop())() ? "Check the release channel for the latest signed build." : local.desktopOnlyMessage ?? `Open this dialog inside the desktop app to check for updates.`;
+											return memo(() => state()?.phase === "unavailable")() ? "No signed package is published for this platform." : memo(() => state()?.phase === "cancelled")() ? "Update cancelled. You can retry when ready." : memo(() => !!desktop())() ? "Check the release channel for the latest signed build." : local.desktopOnlyMessage ?? `Open this dialog inside the desktop app to check for updates.`;
 										},
 										get children() {
 											return `A newer release, v${state()?.availableVersion}, is ready.`;
@@ -306,10 +407,11 @@ function UpdateDialog(props) {
 								},
 								children: "You are running the latest release."
 							}));
-							insert(_el$6, createComponent(Button, {
+							insert(_el$5, createComponent(ActionButton, {
 								type: "button",
 								variant: "outline",
 								size: "sm",
+								tooltip: "Check the release channel for the latest signed app version.",
 								get disabled() {
 									return !desktop() || working();
 								},
@@ -331,35 +433,43 @@ function UpdateDialog(props) {
 									}), memo(() => checkFailed() ? "Retry update check" : "Check latest version")];
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
-									return memo(() => state()?.phase === "available")() && state()?.availableVersion;
+									return memo(() => !!(state()?.availableVersion && state()?.phase !== "installed"))() && state()?.phase !== "unavailable";
 								},
 								get children() {
-									var _el$10 = _tmpl$2(), _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$14 = _el$13.firstChild, _el$16 = _el$14.nextSibling;
-									_el$16.nextSibling;
-									var _el$17 = _el$13.nextSibling, _el$20 = _el$17.firstChild.nextSibling;
-									_el$20.nextSibling;
-									insert(_el$13, createComponent(Sparkles, {
+									var _el$1 = _tmpl$2(), _el$10 = _el$1.firstChild, _el$11 = _el$10.firstChild, _el$12 = _el$11.firstChild, _el$13 = _el$12.firstChild, _el$15 = _el$13.nextSibling;
+									_el$15.nextSibling;
+									var _el$16 = _el$12.nextSibling, _el$19 = _el$16.firstChild.nextSibling;
+									_el$19.nextSibling;
+									insert(_el$12, createComponent(Sparkles, {
 										"class": "size-4 text-primary",
 										"aria-hidden": "true"
-									}), _el$14);
-									insert(_el$13, () => state()?.availableVersion, _el$16);
-									insert(_el$17, appName, _el$20);
-									insert(_el$12, createComponent(Show, {
+									}), _el$13);
+									insert(_el$12, () => state()?.availableVersion, _el$15);
+									insert(_el$12, () => [
+										"downloading",
+										"installing",
+										"cancelling"
+									].includes(state()?.phase ?? "") ? "is being prepared" : "is ready", null);
+									insert(_el$16, appName, _el$19);
+									insert(_el$11, createComponent(Show, {
 										get when() {
 											return formatReleaseDate(state()?.releaseDate ?? null);
 										},
 										children: (released) => (() => {
-											var _el$35 = _tmpl$0();
+											var _el$35 = _tmpl$1();
 											_el$35.firstChild;
 											insert(_el$35, released, null);
 											return _el$35;
 										})()
 									}), null);
-									insert(_el$11, createComponent(Button, {
+									insert(_el$10, createComponent(ActionButton, {
 										type: "button",
 										size: "sm",
+										get tooltip() {
+											return `Download the signed update and restart ${appName()}.`;
+										},
 										get disabled() {
 											return working();
 										},
@@ -381,24 +491,24 @@ function UpdateDialog(props) {
 											}), "Install and restart"];
 										}
 									}), null);
-									return _el$10;
+									return _el$1;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
-									return state()?.phase === "downloading" || state()?.phase === "installing";
+									return state()?.phase === "downloading" || state()?.phase === "installing" || state()?.phase === "cancelling";
 								},
 								get children() {
-									var _el$21 = _tmpl$3(), _el$22 = _el$21.firstChild;
-									insert(_el$21, createComponent(Progress, {
+									var _el$20 = _tmpl$3(), _el$21 = _el$20.firstChild;
+									insert(_el$20, createComponent(Progress, {
 										get value() {
 											return progressValue() ?? void 0;
 										},
 										get ["aria-label"]() {
 											return state()?.phase === "installing" ? "Installing update" : "Downloading update";
 										}
-									}), _el$22);
-									insert(_el$22, createComponent(Show, {
+									}), _el$21);
+									insert(_el$21, createComponent(Show, {
 										get when() {
 											return state()?.phase === "installing";
 										},
@@ -415,34 +525,54 @@ function UpdateDialog(props) {
 										},
 										children: "Applying the update…"
 									}));
-									return _el$21;
+									insert(_el$20, createComponent(Show, {
+										get when() {
+											return local.adapter.cancel;
+										},
+										get children() {
+											return createComponent(ActionButton, {
+												type: "button",
+												variant: "outline",
+												size: "sm",
+												tooltip: "Stop the current update download or installation.",
+												get disabled() {
+													return cancelPending() || state()?.phase === "cancelling";
+												},
+												onClick: () => void cancel(),
+												get children() {
+													return [createComponent(CircleStop, { "aria-hidden": "true" }), memo(() => cancelPending() || state()?.phase === "cancelling" ? "Cancelling…" : "Cancel update")];
+												}
+											});
+										}
+									}), null);
+									return _el$20;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
 									return isCurrent();
 								},
 								get children() {
-									var _el$23 = _tmpl$4(), _el$24 = _el$23.firstChild;
-									insert(_el$23, createComponent(Check, {
+									var _el$22 = _tmpl$4(), _el$23 = _el$22.firstChild;
+									insert(_el$22, createComponent(Check, {
 										"class": "size-4 text-success",
 										"aria-hidden": "true"
-									}), _el$24);
-									insert(_el$23, appName, _el$24);
-									return _el$23;
+									}), _el$23);
+									insert(_el$22, appName, _el$23);
+									return _el$22;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
 									return state()?.phase === "installed";
 								},
 								get children() {
-									var _el$25 = _tmpl$5();
-									insert(_el$25, createComponent(Check, {
+									var _el$24 = _tmpl$5();
+									insert(_el$24, createComponent(Check, {
 										"class": "size-4 text-success",
 										"aria-hidden": "true"
 									}), null);
-									insert(_el$25, createComponent(Show, {
+									insert(_el$24, createComponent(Show, {
 										get when() {
 											return state()?.restartRequired;
 										},
@@ -455,60 +585,61 @@ function UpdateDialog(props) {
 											];
 										}
 									}), null);
-									return _el$25;
+									return _el$24;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
 									return error();
 								},
 								get children() {
-									var _el$26 = _tmpl$6();
-									insert(_el$26, error);
-									return _el$26;
+									var _el$25 = _tmpl$6();
+									insert(_el$25, error);
+									return _el$25;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
 									return notes();
 								},
 								get children() {
-									var _el$27 = _tmpl$7(), _el$28 = _el$27.firstChild;
-									_el$28.firstChild;
-									var _el$30 = _el$28.nextSibling;
-									insert(_el$28, createComponent(Badge, {
+									var _el$26 = _tmpl$7(), _el$27 = _el$26.firstChild;
+									_el$27.firstChild;
+									var _el$29 = _el$27.nextSibling;
+									insert(_el$27, createComponent(Badge, {
 										variant: "subtle",
 										size: "sm",
 										get children() {
 											return ["v", memo(() => state()?.availableVersion)];
 										}
 									}), null);
-									insert(_el$30, notes);
-									return _el$27;
+									insert(_el$29, notes);
+									return _el$26;
 								}
 							}), null);
-							insert(_el$4, createComponent(Show, {
+							insert(_el$3, createComponent(Show, {
 								get when() {
 									return changelog();
 								},
 								get children() {
-									var _el$31 = _tmpl$8(), _el$34 = _el$31.firstChild.nextSibling.nextSibling;
-									insert(_el$34, changelog);
-									return _el$31;
+									var _el$30 = _tmpl$8(), _el$33 = _el$30.firstChild.nextSibling.nextSibling;
+									insert(_el$33, changelog);
+									return _el$30;
 								}
 							}), null);
-							return _el$4;
+							return _el$3;
 						})(),
 						createComponent(DialogFooter, { get children() {
 							return [createComponent(Show, {
 								get when() {
 									return state()?.releaseUrl;
 								},
-								children: (url) => createComponent(Button, {
+								children: (url) => createComponent(ActionButton, {
 									type: "button",
 									variant: "ghost",
 									size: "sm",
-									onClick: () => window.open(url(), "_blank", "noopener,noreferrer"),
+									tooltip: "Open the release history in your browser.",
+									onClick: () => void openRelease(url()),
 									get children() {
 										return [createComponent(ExternalLink, { "aria-hidden": "true" }), "View releases"];
 									}