@remit/ui 0.0.21 → 0.0.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/ui",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "type": "module",
   "files": [
     "src"

package/src/components/self-update-confirm-dialog.tsx

@@ -0,0 +1,86 @@
+import { Download, ExternalLink } from "lucide-react";
+import { Button, ButtonLink } from "./button.js";
+import { Dialog } from "./dialog.js";
+import { formatReleaseDate, type ReleaseInfo } from "./self-update.js";
+
+export interface SelfUpdateConfirmDialogProps {
+	open: boolean;
+	currentVersion: string;
+	release: ReleaseInfo;
+	onClose: () => void;
+	onConfirm: () => void;
+}
+
+const consequences = [
+	"Remit restarts. Mail stops loading for about a minute and this page will lose its connection while that happens.",
+	"Nothing is sent, deleted or moved. Your mail stays at your provider.",
+	"If the new version does not come back up, the version you are running now is restored automatically.",
+];
+
+/**
+ * Consent before the server replaces itself. Reflects what will happen in the
+ * user's terms, in the order they will feel it, and leaves the way back open
+ * until the moment they commit.
+ */
+export function SelfUpdateConfirmDialog({
+	open,
+	currentVersion,
+	release,
+	onClose,
+	onConfirm,
+}: SelfUpdateConfirmDialogProps) {
+	if (!open) return null;
+
+	return (
+		<Dialog open onClose={onClose} title={`Install Remit ${release.version}`}>
+			<div className="flex max-h-[80vh] flex-col">
+				<header className="space-y-1 border-b border-line px-4 py-3">
+					<h3 className="text-sm font-semibold text-fg">
+						Install Remit {release.version}?
+					</h3>
+					<p className="text-xs text-fg-muted">
+						You are on {currentVersion}. {release.version} was released{" "}
+						{formatReleaseDate(release.releasedAt)}.
+					</p>
+				</header>
+
+				<div className="flex-1 space-y-3 overflow-auto px-4 py-3">
+					<p className="text-sm text-fg-muted">{release.summary}</p>
+					<ul className="space-y-2">
+						{consequences.map((line) => (
+							<li key={line} className="flex gap-2 text-sm text-fg-muted">
+								<span className="mt-1.5 size-1.5 shrink-0 rounded-full bg-fg-subtle" />
+								<span>{line}</span>
+							</li>
+						))}
+					</ul>
+					<p className="text-xs text-fg-subtle">
+						Good moment for this: when you are not waiting on a message.
+					</p>
+				</div>
+
+				<footer className="flex flex-wrap items-center justify-end gap-2 border-t border-line px-4 py-3">
+					<Button variant="ghost" size="sm" onClick={onClose}>
+						Not now
+					</Button>
+					<ButtonLink
+						variant="secondary"
+						size="sm"
+						external
+						href={release.releaseNotesUrl}
+						icon={<ExternalLink className="size-3.5" />}
+					>
+						Release notes
+					</ButtonLink>
+					<Button
+						size="sm"
+						icon={<Download className="size-3.5" />}
+						onClick={onConfirm}
+					>
+						Install and restart
+					</Button>
+				</footer>
+			</div>
+		</Dialog>
+	);
+}

package/src/components/self-update-dot.tsx

@@ -0,0 +1,32 @@
+import type { ReactNode } from "react";
+
+export interface UpdateAvailableDotProps {
+	/** The icon or control the hint is attached to. */
+	children?: ReactNode;
+	show: boolean;
+	/** Read out to assistive tech in place of the bare dot. */
+	label?: string;
+}
+
+/**
+ * The only place an available update is allowed to reach outside settings: a
+ * dot on the way there. It carries no count, no copy and no action, so it can
+ * never grow into a prompt over someone's mail.
+ */
+export function UpdateAvailableDot({
+	children,
+	show,
+	label = "Update available",
+}: UpdateAvailableDotProps) {
+	return (
+		<span className="relative inline-flex">
+			{children}
+			{show && (
+				<>
+					<span className="absolute -right-1 -top-1 size-2 rounded-full bg-accent-2" />
+					<span className="sr-only">{label}</span>
+				</>
+			)}
+		</span>
+	);
+}

package/src/components/self-update-progress-overlay.stories.tsx

@@ -0,0 +1,80 @@
+import type { Meta, StoryObj } from "@storybook/react-vite";
+import { demoLogsCommand, demoRelease } from "./self-update.js";
+import {
+	SelfUpdateProgressOverlay,
+	SelfUpdateUnreachableScreen,
+} from "./self-update-progress-overlay.js";
+
+const meta: Meta<typeof SelfUpdateProgressOverlay> = {
+	title: "Settings/Self-update restart",
+	component: SelfUpdateProgressOverlay,
+	parameters: { layout: "fullscreen" },
+	args: { target: demoRelease.version },
+	decorators: [
+		(Story) => (
+			<div className="h-dvh w-full bg-canvas p-6">
+				<p className="text-sm text-fg-subtle">
+					Settings sits here. The overlay is fixed to the window, so this stays
+					covered and out of tab order.
+				</p>
+				<Story />
+			</div>
+		),
+	],
+};
+export default meta;
+
+type Story = StoryObj<typeof SelfUpdateProgressOverlay>;
+
+/**
+ * The new version is being put in place; the running server has not gone away
+ * yet.
+ */
+export const Preparing: Story = {
+	args: { phase: "preparing", elapsedSeconds: 6 },
+};
+
+/** The server is going down. From here the page has nothing to talk to. */
+export const Restarting: Story = {
+	args: { phase: "restarting", elapsedSeconds: 24 },
+};
+
+/**
+ * Polling for a server that is not answering yet. This is the normal middle of
+ * an update, so it reads as waiting, not as failure.
+ */
+export const Reconnecting: Story = {
+	args: { phase: "reconnecting", elapsedSeconds: 48 },
+};
+
+/**
+ * Past the point where "about a minute" is still true. The copy stops making
+ * that promise rather than repeating it.
+ */
+export const ReconnectingTakingLong: Story = {
+	args: { phase: "reconnecting", elapsedSeconds: 200 },
+};
+
+/**
+ * Long silence. The copy still describes only what the client can observe —
+ * how long it has been quiet — and never what the server is doing about it.
+ */
+export const ReconnectingStillSilent: Story = {
+	args: { phase: "reconnecting", elapsedSeconds: 300 },
+};
+
+/**
+ * The server never came back. The client cannot see the rollback from here, so
+ * it says what it knows and points at the machine that can answer.
+ */
+export const NeverCameBack: StoryObj<typeof SelfUpdateUnreachableScreen> = {
+	render: () => (
+		<SelfUpdateUnreachableScreen
+			attemptedVersion={demoRelease.version}
+			previousVersion="0.9.3"
+			elapsedSeconds={420}
+			logsCommand={demoLogsCommand}
+			onRetryConnection={() => {}}
+		/>
+	),
+};

package/src/components/self-update-progress-overlay.tsx

@@ -0,0 +1,203 @@
+import { AlertOctagon, Check, Loader2 } from "lucide-react";
+import { type RefObject, useEffect, useRef } from "react";
+import { cn } from "../lib/cn.js";
+import { Button } from "./button.js";
+import {
+	type UpdatePhase,
+	updatePhaseLabel,
+	updateWaitNote,
+} from "./self-update.js";
+
+const phaseOrder: UpdatePhase[] = ["preparing", "restarting", "reconnecting"];
+
+const FOCUSABLE =
+	'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
+
+/**
+ * A screen whose purpose is to stop interaction has to stop it for the
+ * keyboard too. Focus moves in on mount and Tab cycles inside, so nothing
+ * behind the overlay can be reached while the server is gone.
+ */
+function useBlockingFocus(ref: RefObject<HTMLDivElement | null>) {
+	useEffect(() => {
+		const container = ref.current;
+		if (!container) return;
+
+		const focusables = () =>
+			Array.from(container.querySelectorAll<HTMLElement>(FOCUSABLE));
+
+		(focusables()[0] ?? container).focus();
+
+		const onKeyDown = (event: KeyboardEvent) => {
+			if (event.key !== "Tab") return;
+			const items = focusables();
+			if (items.length === 0) {
+				event.preventDefault();
+				container.focus();
+				return;
+			}
+			const first = items[0];
+			const last = items[items.length - 1];
+			const active = document.activeElement;
+			if (event.shiftKey && (active === first || !container.contains(active))) {
+				event.preventDefault();
+				last.focus();
+				return;
+			}
+			if (!event.shiftKey && (active === last || !container.contains(active))) {
+				event.preventDefault();
+				first.focus();
+			}
+		};
+
+		window.addEventListener("keydown", onKeyDown, true);
+		return () => window.removeEventListener("keydown", onKeyDown, true);
+	}, [ref]);
+}
+
+const overlayShell =
+	"fixed inset-0 z-50 flex flex-col items-center justify-center gap-6 bg-canvas p-6 text-center outline-none";
+
+export interface SelfUpdateProgressOverlayProps {
+	target: string;
+	phase: UpdatePhase;
+	elapsedSeconds: number;
+}
+
+/**
+ * Applying an update takes the server away, so the app genuinely cannot be
+ * used while it runs. Blocking here is the honest state — a background spinner
+ * over a dead mailbox would let a broken system look healthy.
+ */
+export function SelfUpdateProgressOverlay({
+	target,
+	phase,
+	elapsedSeconds,
+}: SelfUpdateProgressOverlayProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	useBlockingFocus(ref);
+	const activeIndex = phaseOrder.indexOf(phase);
+
+	return (
+		<div
+			ref={ref}
+			role="dialog"
+			aria-modal="true"
+			aria-labelledby="self-update-progress-title"
+			tabIndex={-1}
+			className={overlayShell}
+		>
+			<div className="max-w-md space-y-2">
+				<h1
+					id="self-update-progress-title"
+					className="text-lg font-semibold text-fg"
+				>
+					Installing Remit {target}
+				</h1>
+				<p className="text-sm text-fg-muted">
+					Remit is restarting, so this page has no server to talk to for a
+					moment. Leave this open — it reconnects on its own.
+				</p>
+			</div>
+
+			<ol className="w-full max-w-sm space-y-2 text-left">
+				{phaseOrder.map((step, index) => {
+					const done = index < activeIndex;
+					const active = index === activeIndex;
+					return (
+						<li
+							key={step}
+							className={cn(
+								"flex items-center gap-3 rounded-sm border px-row-inset py-2 text-sm",
+								active
+									? "border-line-strong bg-surface text-fg"
+									: "border-line bg-surface-sunken text-fg-subtle",
+							)}
+						>
+							{done ? (
+								<Check className="size-4 shrink-0 text-positive" aria-hidden />
+							) : active ? (
+								<Loader2
+									className="size-4 shrink-0 animate-spin text-accent-2"
+									aria-hidden
+								/>
+							) : (
+								<span className="size-4 shrink-0 rounded-full border border-line-strong" />
+							)}
+							{updatePhaseLabel(step)}
+						</li>
+					);
+				})}
+			</ol>
+
+			<p aria-live="polite" className="max-w-md text-xs text-fg-subtle">
+				<span className="sr-only">{`${updatePhaseLabel(phase)}. `}</span>
+				{updateWaitNote(elapsedSeconds)}
+			</p>
+		</div>
+	);
+}
+
+export interface SelfUpdateUnreachableScreenProps {
+	attemptedVersion: string;
+	previousVersion: string;
+	elapsedSeconds: number;
+	logsCommand: string;
+	onRetryConnection: () => void;
+}
+
+/**
+ * The server never came back. The client cannot tell whether the rollback ran,
+ * so it must not claim that it did — it says what it knows, what it does not,
+ * and where to look on the machine that is still running.
+ */
+export function SelfUpdateUnreachableScreen({
+	attemptedVersion,
+	previousVersion,
+	elapsedSeconds,
+	logsCommand,
+	onRetryConnection,
+}: SelfUpdateUnreachableScreenProps) {
+	const ref = useRef<HTMLDivElement>(null);
+	useBlockingFocus(ref);
+	const minutes = Math.max(1, Math.round(elapsedSeconds / 60));
+
+	return (
+		<div
+			ref={ref}
+			role="alertdialog"
+			aria-modal="true"
+			aria-labelledby="self-update-unreachable-title"
+			tabIndex={-1}
+			className={overlayShell}
+		>
+			<AlertOctagon className="size-12 shrink-0 text-danger" aria-hidden />
+			<div className="max-w-lg space-y-3">
+				<h1
+					id="self-update-unreachable-title"
+					className="text-lg font-semibold text-fg"
+				>
+					Remit has not answered since the restart
+				</h1>
+				<p className="text-sm text-fg-muted">
+					Installing {attemptedVersion} started {minutes} minute
+					{minutes === 1 ? "" : "s"} ago and the server has been silent since.
+					Your mail is safe at your provider — it was never part of the update.
+				</p>
+				<p className="text-sm text-fg-muted">
+					Remit rolls back to {previousVersion} on its own when the new version
+					fails to start, but this page cannot confirm that from here. Check the
+					server directly:
+				</p>
+				<code className="block rounded-xs bg-surface-sunken px-3 py-2 text-left text-xs text-fg-muted">
+					{logsCommand}
+				</code>
+			</div>
+			<div className="flex flex-wrap items-center justify-center gap-2">
+				<Button size="sm" onClick={onRetryConnection}>
+					Try connecting again
+				</Button>
+			</div>
+		</div>
+	);
+}