@remit/ui 0.0.20 → 0.0.22

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>
+	);
+}

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

@@ -0,0 +1,377 @@
+import {
+	CheckCircle2,
+	CloudOff,
+	Download,
+	ExternalLink,
+	Loader2,
+	RotateCcw,
+	TriangleAlert,
+} from "lucide-react";
+import { type ReactNode, useState } from "react";
+import { cn } from "../lib/cn.js";
+import { Badge } from "./badge.js";
+import { Banner } from "./banner.js";
+import { Button, ButtonLink } from "./button.js";
+import {
+	formatRelativeCheck,
+	formatReleaseDate,
+	type SelfUpdateState,
+} from "./self-update.js";
+
+export interface SelfUpdateSectionProps {
+	state: SelfUpdateState;
+	onCheck: () => void;
+	/** Opens consent before anything is replaced. */
+	onInstall: () => void;
+	/**
+	 * Clears a finished result from the pane. Required: it is the only exit
+	 * from `succeeded` and `rolledBack`, and without it the pane sticks on a
+	 * red failure row for good.
+	 */
+	onDismissResult: () => void;
+	/** Fixed "now" so stories and tests read the same relative times. */
+	now?: number;
+}
+
+function SectionRow({
+	children,
+	tone,
+}: {
+	children: ReactNode;
+	tone?: "danger";
+}) {
+	return (
+		<div
+			className={cn(
+				"rounded-sm border bg-surface px-row-inset py-3",
+				tone === "danger" ? "border-danger/50" : "border-line",
+			)}
+		>
+			{children}
+		</div>
+	);
+}
+
+/**
+ * Updates, in Settings › Advanced.
+ *
+ * A mail client is read first and administered second, so an available update
+ * is stated here and nowhere else — no modal, no interruption, no repeat
+ * asking. Applying one is consequential (the server goes away and comes back),
+ * so it is never one click from this pane.
+ */
+export function SelfUpdateSection({
+	state,
+	onCheck,
+	onInstall,
+	onDismissResult,
+	now = Date.now(),
+}: SelfUpdateSectionProps) {
+	const [notice, setNotice] = useState<string | null>(null);
+
+	const checking = state.status === "checking";
+	const installable = state.status === "available";
+
+	const handleCheck = () => {
+		if (checking) {
+			setNotice("Already checking. The result appears here in a moment.");
+			return;
+		}
+		setNotice(null);
+		onCheck();
+	};
+
+	const handleInstall = () => {
+		if (!installable && state.status !== "rolledBack") {
+			setNotice(
+				"There is no update to install. Check for updates first — if one is found it appears here.",
+			);
+			return;
+		}
+		setNotice(null);
+		onInstall();
+	};
+
+	const body = ((): ReactNode => {
+		switch (state.status) {
+			case "upToDate":
+				return (
+					<SectionRow>
+						<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex min-w-0 items-center gap-2">
+								<CheckCircle2
+									className="size-4 shrink-0 text-positive"
+									aria-hidden
+								/>
+								<p className="text-sm text-fg">
+									Remit {state.version} is the latest version.
+									<span className="text-fg-subtle">
+										{" "}
+										Checked {formatRelativeCheck(state.checkedAt, now)}.
+									</span>
+								</p>
+							</div>
+							<Button
+								variant="secondary"
+								size="sm"
+								className="shrink-0"
+								onClick={handleCheck}
+							>
+								Check again
+							</Button>
+						</div>
+					</SectionRow>
+				);
+
+			case "checking":
+				return (
+					<SectionRow>
+						<div className="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
+							<div className="flex min-w-0 items-center gap-2">
+								<Loader2
+									className="size-4 shrink-0 animate-spin text-fg-subtle"
+									aria-hidden
+								/>
+								<p className="text-sm text-fg-muted">
+									Looking for a newer version. You are on {state.version}.
+								</p>
+							</div>
+							<Button
+								variant="secondary"
+								size="sm"
+								className="shrink-0"
+								onClick={handleCheck}
+							>
+								Check again
+							</Button>
+						</div>
+					</SectionRow>
+				);
+
+			case "checkFailed":
+				return (
+					<SectionRow>
+						<div className="space-y-2">
+							<div className="flex items-start gap-2">
+								<CloudOff
+									className="mt-0.5 size-4 shrink-0 text-fg-subtle"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm text-fg">
+										Could not reach the update source.
+									</p>
+									<p className="text-xs text-fg-muted">{state.reason}</p>
+									<p className="text-xs text-fg-subtle">
+										You are still on {state.version} and it keeps working.
+										{state.lastCheckedAt !== undefined && (
+											<>
+												{" "}
+												Last successful check{" "}
+												{formatRelativeCheck(state.lastCheckedAt, now)}.
+											</>
+										)}
+									</p>
+								</div>
+							</div>
+							<div className="flex justify-end">
+								<Button variant="secondary" size="sm" onClick={handleCheck}>
+									Try again
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "available":
+				return (
+					<SectionRow>
+						<div className="space-y-3">
+							<div className="flex flex-wrap items-center gap-2">
+								<span className="text-sm font-semibold text-fg">
+									Remit {state.release.version}
+								</span>
+								<Badge tone="accent">update available</Badge>
+								<span className="text-2xs text-fg-subtle">
+									released {formatReleaseDate(state.release.releasedAt)} · you
+									are on {state.version}
+								</span>
+							</div>
+							<p className="text-sm text-fg-muted">{state.release.summary}</p>
+							<p className="text-xs text-fg-subtle">
+								Installing restarts Remit, so mail stops loading for about a
+								minute. If the new version does not come back up, the one you
+								are running now is restored on its own.
+							</p>
+							<div className="flex flex-wrap items-center gap-2">
+								<Button
+									size="sm"
+									icon={<Download className="size-3.5" />}
+									onClick={handleInstall}
+								>
+									Install {state.release.version}
+								</Button>
+								<ButtonLink
+									variant="secondary"
+									size="sm"
+									external
+									href={state.release.releaseNotesUrl}
+									icon={<ExternalLink className="size-3.5" />}
+								>
+									Release notes
+								</ButtonLink>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "applying":
+				return (
+					<SectionRow>
+						<div className="flex min-w-0 items-center gap-2">
+							<Loader2
+								className="size-4 shrink-0 animate-spin text-accent-2"
+								aria-hidden
+							/>
+							<p className="text-sm text-fg-muted">
+								Installing Remit {state.target}. The restart screen has the
+								details.
+							</p>
+						</div>
+					</SectionRow>
+				);
+
+			case "succeeded":
+				return (
+					<Banner tone="success" onDismiss={onDismissResult}>
+						<div className="space-y-1">
+							<p className="font-semibold">Updated to Remit {state.version}.</p>
+							<p>
+								You were on {state.previousVersion}.{" "}
+								<a
+									href={state.releaseNotesUrl}
+									target="_blank"
+									rel="noopener noreferrer"
+									className="underline"
+								>
+									See what changed
+								</a>
+								.
+							</p>
+						</div>
+					</Banner>
+				);
+
+			case "rolledBack":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-3">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-danger"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Remit {state.attemptedVersion} did not start. Remit reports
+										that it put {state.version} back.
+									</p>
+									<p className="text-sm text-fg-muted">
+										You are running {state.version} again. A failed update can
+										still have changed things on the way — the log below is the
+										only account of what it got as far as doing.
+									</p>
+								</div>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									What Remit reported as the failure
+								</p>
+								<code className="block rounded-xs bg-danger-soft px-2 py-1 text-2xs text-danger">
+									{state.reason}
+								</code>
+							</div>
+							<div className="space-y-1">
+								<p className="text-xs text-fg-subtle">
+									Read the full log before trying again:
+								</p>
+								<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+									{state.logsCommand}
+								</code>
+							</div>
+							<div className="flex flex-wrap items-center gap-2">
+								<Button
+									variant="secondary"
+									size="sm"
+									icon={<RotateCcw className="size-3.5" />}
+									onClick={handleInstall}
+								>
+									Try {state.attemptedVersion} again
+								</Button>
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Stay on {state.version}
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			case "unreachable":
+				return (
+					<SectionRow tone="danger">
+						<div className="space-y-2">
+							<div className="flex items-start gap-2">
+								<TriangleAlert
+									className="mt-0.5 size-4 shrink-0 text-danger"
+									aria-hidden
+								/>
+								<div className="min-w-0 space-y-1">
+									<p className="text-sm font-semibold text-fg">
+										Installing {state.attemptedVersion} left the server
+										unreachable.
+									</p>
+									<p className="text-sm text-fg-muted">
+										Remit has answered again since, but nothing here can say
+										what happened during the silence.
+									</p>
+								</div>
+							</div>
+							<code className="block rounded-xs bg-surface-sunken px-2 py-1 text-2xs text-fg-muted">
+								{state.logsCommand}
+							</code>
+							<div className="flex justify-end">
+								<Button variant="ghost" size="sm" onClick={onDismissResult}>
+									Dismiss
+								</Button>
+							</div>
+						</div>
+					</SectionRow>
+				);
+
+			default: {
+				const exhaustive: never = state;
+				return exhaustive;
+			}
+		}
+	})();
+
+	return (
+		<section className="space-y-3">
+			<header className="space-y-1">
+				<h2 className="text-sm font-semibold text-fg">Updates</h2>
+				<p className="text-xs text-fg-muted">
+					This Remit runs on your own server, so it updates when you say so.
+					Your mail lives at your provider and is never touched by an update.
+				</p>
+			</header>
+
+			{body}
+
+			{notice && (
+				<p role="status" className="text-xs text-fg-muted">
+					{notice}
+				</p>
+			)}
+		</section>
+	);
+}