@remit/web-client 0.0.322 → 0.0.324

package/src/routes/mail/flagged.tsx

@@ -6,6 +6,7 @@
  * route matched below this one, and the open thread and the message inside it
  * are the segments there rather than a selection read out of the query.
  */
+import { ErrorState } from "@remit/ui";
 import {
 	createFileRoute,
 	type ErrorComponentProps,
@@ -13,7 +14,6 @@ import {
 } from "@tanstack/react-router";
 import { MailShell } from "@/components/layout/MailShell";
 import { FlaggedPane } from "@/components/mail/FlaggedPane";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { flaggedSearchSchema } from "@/lib/mail-search";
 import { useOpenThreadPath, useSearchMirror } from "@/routing";
 

package/src/routes/mail.tsx

@@ -2,7 +2,11 @@ import {
 	configOperationsGetConfigOptions,
 	unifiedThreadOperationsListAllThreadsOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { useTriageKeyboard } from "@remit/ui";
+import {
+	ErrorState,
+	KeyboardShortcutsModal,
+	useTriageKeyboard,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import {
 	createFileRoute,
@@ -16,8 +20,6 @@ import { ComposeFab } from "@/components/layout/ComposeFab";
 import { MailShellProvider } from "@/components/layout/MailShell";
 import { MailTopBar } from "@/components/layout/MailTopBar";
 import { MailNav } from "@/components/mail/MailNav";
-import { ErrorState } from "@/components/ui/ErrorState";
-import { KeyboardShortcutsModal } from "@/components/ui/KeyboardShortcutsModal";
 import { useKeyboardNavigation } from "@/hooks/useKeyboardNavigation";
 import { isSinglePaneTier, useLayoutTier } from "@/hooks/useLayoutTier";
 import { useMailboxNameIndex } from "@/hooks/useMailboxNameIndex";

package/src/routes/settings/-accounts.test.ts

@@ -80,11 +80,6 @@ describe("mapOauthError", () => {
 			`Expected code in message, got: ${result}`,
 		);
 	});
-
-	test("empty string returns generic fallback", () => {
-		const result = mapOauthError("");
-		assert.ok(typeof result === "string" && result.length > 0);
-	});
 });
 
 /**

package/src/routes/settings/-filters.test.ts

@@ -65,7 +65,6 @@ const filter: RemitImapFilterResponse = {
 	scope: "Standing",
 	state: "Active",
 	disabledReason: "None",
-	hasAnchor: false,
 	ruleChangedAt: 0,
 	actionChangedAt: 0,
 	matchOperator: "And",

package/src/routes/settings/-shared/help-copy.tsx

@@ -66,11 +66,26 @@ export const advancedHelp = (
 			<strong className="text-fg">Notification rules</strong> and data export
 			are coming in a future release.
 		</p>
+	</div>
+);
+
+export const warningsHelp = (
+	<div className="space-y-3">
+		<p>
+			A message that fails to sync three times shows here. A{" "}
+			<strong className="text-fg">retrying</strong> one is tried again every
+			sync; a body that <strong className="text-fg">gave up</strong> is not.
+			Either leaves the list once it syncs.
+		</p>
 		<p>
 			A message Remit cannot read is{" "}
 			<strong className="text-fg">set aside</strong> rather than skipped, and
 			the folder keeps syncing. Setting one aside is a defect in Remit, so every
 			entry can be reported with the diagnostics already attached.
 		</p>
+		<p>
+			A report carries no folder name, subject, address, message content or
+			error text.
+		</p>
 	</div>
 );

package/src/routes/settings/accounts.tsx

@@ -12,6 +12,7 @@ import {
 	Banner,
 	Button,
 	Dialog,
+	ErrorState,
 	type RowAction,
 	RowActions,
 	SettingsShell,
@@ -28,7 +29,6 @@ import {
 import { AccountFormPanel } from "@/components/settings/AccountFormPanel";
 import { AccountServices } from "@/components/settings/AccountServices";
 import { DangerZone } from "@/components/settings/DangerZone";
-import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	REDIRECT_STALL_MESSAGE,
 	useRedirectEnded,

package/src/routes/settings/advanced.tsx

@@ -1,17 +1,16 @@
 /**
  * Advanced settings. Updates live here — and only here — with a full pane in
- * Settings › Advanced, alongside the messages sync could not read. Notification
- * rules and export are future scope.
+ * Settings › Advanced. Notification rules and export are future scope.
  */
 import { SettingsShell } from "@remit/ui";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { ConfigTransferPanel } from "@/components/settings/ConfigTransferPanel";
-import { QuarantinePanel } from "@/components/settings/QuarantinePanel";
 import { SelfUpdatePanel } from "@/components/settings/SelfUpdatePanel";
 import { TlsRootCaDownload } from "@/components/settings/TlsRootCaDownload";
 import { AppVersion } from "@/components/ui/AppVersion";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+import { getRuntimeConfig } from "@/runtime-config";
 import { advancedHelp } from "./-shared/help-copy";
 
 export const Route = createFileRoute("/settings/advanced")({
@@ -39,8 +38,7 @@ function AdvancedSettings() {
 			onSelect={handleSelectNav}
 			onBackToMail={() => void navigate({ to: "/mail" })}
 		>
-			<SelfUpdatePanel />
-			<QuarantinePanel />
+			{getRuntimeConfig().updateMode === "self" && <SelfUpdatePanel />}
 			<div className="mt-6 border-t border-line pt-4">
 				<ConfigTransferPanel />
 			</div>

package/src/routes/settings/filters.tsx

@@ -3,14 +3,13 @@ import {
 	mailboxOperationsListMailboxesOptions,
 } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
-import { type LabelOption, SettingsShell } from "@remit/ui";
+import { ErrorState, type LabelOption, SettingsShell } from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useCallback, useMemo, useState } from "react";
 import { FilterActionError } from "@/components/settings/FilterActionError";
 import { FilterEditorSurface } from "@/components/settings/FilterEditorSurface";
 import { FiltersList } from "@/components/settings/FiltersList";
-import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	useDeleteFilter,
 	useFilterList,

package/src/routes/settings/folders.tsx

@@ -13,6 +13,7 @@ import type {
 import {
 	Banner,
 	type CandidateFolder,
+	ErrorState,
 	FolderManager,
 	FolderRenameDialog,
 	type FolderRole,
@@ -26,7 +27,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useMemo, useState } from "react";
 import { DeleteFolderDialog } from "@/components/settings/DeleteFolderDialog";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { isMailboxNotSettledRefusal } from "@/components/ui/folder-role-refusal";
 import { useCreateMailbox } from "@/hooks/useCreateMailbox";
 import { useFolderLabelTranslator } from "@/hooks/useFolderLabelTranslator";

package/src/routes/settings/labels.tsx

@@ -8,6 +8,7 @@ import {
 	Banner,
 	Button,
 	ConfirmDialog,
+	ErrorState,
 	Input,
 	labelColorOptions,
 	Select,
@@ -17,7 +18,6 @@ import { useQuery } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { useState } from "react";
 import { LabelsList } from "@/components/settings/LabelsList";
-import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	useCreateLabel,
 	useDeleteLabel,

package/src/routes/settings/senders.tsx

@@ -20,6 +20,7 @@ import type {
 } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
+	ErrorState,
 	Input,
 	Kbd,
 	SenderFlagRow,
@@ -30,7 +31,6 @@ import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
 import { createFileRoute, useNavigate } from "@tanstack/react-router";
 import { Search, Star, X } from "lucide-react";
 import { useCallback, useEffect, useState } from "react";
-import { ErrorState } from "@/components/ui/ErrorState";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
 import { formatDate } from "@/lib/format";
 import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";

package/src/routes/settings/warnings.tsx

@@ -0,0 +1,36 @@
+import { SettingsShell } from "@remit/ui";
+import { createFileRoute, useNavigate } from "@tanstack/react-router";
+import { useState } from "react";
+import { WarningsPanel } from "@/components/settings/WarningsPanel";
+import { SETTINGS_ID_TO_PATH, SETTINGS_NAV_ITEMS } from "@/routes/settings";
+import { warningsHelp } from "./-shared/help-copy";
+
+export const Route = createFileRoute("/settings/warnings")({
+	component: WarningsSettings,
+});
+
+function WarningsSettings() {
+	const navigate = useNavigate();
+	const [helpOpen, setHelpOpen] = useState(true);
+
+	const handleSelectNav = (id: string) => {
+		const path = SETTINGS_ID_TO_PATH[id];
+		if (path) void navigate({ to: path });
+	};
+
+	return (
+		<SettingsShell
+			items={SETTINGS_NAV_ITEMS}
+			activeId="warnings"
+			title="Warnings"
+			description="Messages that failed to sync, and messages set aside."
+			help={warningsHelp}
+			helpOpen={helpOpen}
+			onToggleHelp={() => setHelpOpen((v) => !v)}
+			onSelect={handleSelectNav}
+			onBackToMail={() => void navigate({ to: "/mail" })}
+		>
+			<WarningsPanel />
+		</SettingsShell>
+	);
+}

package/src/routes/settings.tsx

@@ -20,6 +20,7 @@ import {
 	Users,
 } from "lucide-react";
 import { AdvancedNavIcon } from "@/components/settings/AdvancedNavIcon";
+import { WarningsNavIcon } from "@/components/settings/WarningsNavIcon";
 
 /* ------------------------------------------------------------------ */
 /* Nav items — single source of truth shared by all settings pages    */
@@ -57,6 +58,11 @@ export const SETTINGS_NAV_ITEMS: SettingsNavItem[] = [
 		label: "Appearance",
 		icon: <Palette className="size-4" />,
 	},
+	{
+		id: "warnings",
+		label: "Warnings",
+		icon: <WarningsNavIcon />,
+	},
 	{ id: "advanced", label: "Advanced", icon: <AdvancedNavIcon /> },
 ];
 
@@ -68,6 +74,7 @@ export const SETTINGS_ID_TO_PATH: Record<string, string> = {
 	labels: "/settings/labels",
 	calendars: "/settings/calendars",
 	appearance: "/settings/appearance",
+	warnings: "/settings/warnings",
 	advanced: "/settings/advanced",
 };
 

package/src/routing/wizard-history.test.ts

@@ -1,8 +1,5 @@
 import assert from "node:assert/strict";
-import { readFileSync } from "node:fs";
-import { dirname, resolve } from "node:path";
 import { describe, it } from "node:test";
-import { fileURLToPath } from "node:url";
 import {
 	backExits,
 	type MatchMode,
@@ -28,7 +25,7 @@ const VERBS: readonly Verb[] = [
 	"markRead",
 	"organize",
 ];
-const MODES: readonly MatchMode[] = ["selected", "similar", "properties"];
+const MODES: readonly MatchMode[] = ["selected", "properties"];
 const SCOPES: readonly (RuleScope | undefined)[] = [
 	undefined,
 	"once",
@@ -50,51 +47,10 @@ const answerSets = (): WizardAnswers[] => {
 	return sets;
 };
 
-const here = dirname(fileURLToPath(import.meta.url));
-const source = readFileSync(resolve(here, "wizard-history.ts"), "utf8");
-
 /** The steps up to and including the one an answer is given on. */
 const prefixThrough = (steps: readonly StepId[], step: StepId): StepId[] =>
 	steps.slice(0, steps.indexOf(step) + 1);
 
-/**
- * The re-root runs inside a router, so the rule is enforced by reading the
- * source — as `../components/mail/MessageList.selection.test.ts` does for its
- * own component-level rules. What it pins is where the decision comes from: a
- * step the app itself pushed must never be re-rooted, or the push that opens
- * the wizard from a verb (#483) duplicates the entry underneath it and the
- * first back after Cancel appears to do nothing.
- */
-describe("re-rooting a wizard that was loaded into", () => {
-	it("decides from what the first render held, not from a flag", () => {
-		assert.match(source, /useRef\(step !== undefined\)/);
-		assert.match(
-			source,
-			/if \(!loadedHoldingStep\.current\) return;\s*\n\s*loadedHoldingStep\.current = false;/,
-		);
-	});
-
-	// The root is the wizard-closed state, so it carries neither the step nor
-	// the affordance that opened it; otherwise closing the wizard leaves the
-	// entry marker behind in the address bar (#484).
-	it("puts the wizard back on a root that names no entry", () => {
-		assert.match(source, /wizard: undefined,\s*\n\s*wizardFrom: undefined,/);
-		assert.match(
-			source,
-			/wizard: openingStep,\s*\n\s*wizardFrom: openingEntry,/,
-		);
-	});
-
-	it("is never armed by a step the app pushed", () => {
-		const goToStep = source.slice(source.indexOf("const goToStep"));
-		assert.doesNotMatch(goToStep, /loadedHoldingStep/);
-	});
-
-	it("does not re-run when the step changes", () => {
-		assert.doesNotMatch(source, /\}, \[step, openingStep, navigate\]\)/);
-	});
-});
-
 describe("the wizard step in the URL", () => {
 	it("round-trips every step the wizard can reach", () => {
 		for (const answers of answerSets()) {

package/src/runtime-config.test.ts

@@ -24,3 +24,20 @@ describe("getRuntimeConfig tlsMode", () => {
 		assert.equal(getRuntimeConfig().tlsMode, "off");
 	});
 });
+
+describe("getRuntimeConfig updateMode", () => {
+	it("defaults to self when config.js sets nothing", () => {
+		globalThis.__REMIT_CONFIG__ = {};
+		assert.equal(getRuntimeConfig().updateMode, "self");
+	});
+
+	it("passes through managed", () => {
+		globalThis.__REMIT_CONFIG__ = { updateMode: "managed" };
+		assert.equal(getRuntimeConfig().updateMode, "managed");
+	});
+
+	it("falls back to self for a value config.js never declares", () => {
+		globalThis.__REMIT_CONFIG__ = { updateMode: "auto" };
+		assert.equal(getRuntimeConfig().updateMode, "self");
+	});
+});

package/src/runtime-config.ts

@@ -26,10 +26,19 @@ export interface RumConfig {
  */
 export type TlsMode = "internal" | "acme" | "tailscale" | "off";
 
+export type UpdateMode = "self" | "managed";
+
+const DEFAULT_ISSUES_URL = "https://github.com/remit-mail/reader/issues/new";
+
 const TLS_MODES: readonly TlsMode[] = ["internal", "acme", "tailscale", "off"];
 
-const isTlsMode = (value: unknown): value is TlsMode =>
-	typeof value === "string" && (TLS_MODES as readonly string[]).includes(value);
+const UPDATE_MODES: readonly UpdateMode[] = ["self", "managed"];
+
+const oneOf = <T extends string>(
+	values: readonly T[],
+	raw: unknown,
+	fallback: T,
+): T => values.find((value) => value === raw) ?? fallback;
 
 export interface RemitRuntimeConfig {
 	apiUrl: string;
@@ -40,6 +49,8 @@ export interface RemitRuntimeConfig {
 	mailboxPollIntervalSeconds?: string;
 	disableDevtools: boolean;
 	tlsMode: TlsMode;
+	issuesUrl: string;
+	updateMode: UpdateMode;
 }
 
 interface RawRuntimeConfig {
@@ -51,6 +62,8 @@ interface RawRuntimeConfig {
 	mailboxPollIntervalSeconds?: string | number;
 	disableDevtools?: boolean;
 	tlsMode?: string;
+	issuesUrl?: string;
+	updateMode?: string;
 }
 
 declare global {
@@ -84,6 +97,8 @@ export const getRuntimeConfig = (): RemitRuntimeConfig => {
 				? String(raw.mailboxPollIntervalSeconds)
 				: undefined,
 		disableDevtools: raw.disableDevtools ?? false,
-		tlsMode: isTlsMode(raw.tlsMode) ? raw.tlsMode : "off",
+		tlsMode: oneOf(TLS_MODES, raw.tlsMode, "off"),
+		issuesUrl: raw.issuesUrl ?? DEFAULT_ISSUES_URL,
+		updateMode: oneOf(UPDATE_MODES, raw.updateMode, "self"),
 	};
 };

package/src/shell/index.tsx

@@ -17,6 +17,7 @@ import {
 	handleQueryCacheError,
 } from "@/lib/query-error-handler";
 import { initRum } from "@/lib/rum-adapter";
+import { installStaleBuildReload } from "@/lib/stale-build";
 import { TelemetryContext } from "@/lib/telemetry-context";
 import { installThemeSync } from "@/lib/theme";
 import { createAppRouter } from "@/router";
@@ -69,6 +70,8 @@ export const mountApp = ({
 		},
 	});
 
+	installStaleBuildReload();
+
 	const router = createAppRouter(queryClient, telemetry);
 	telemetry.recordPageView(window.location.pathname);
 

package/src/test-support/fixtures.ts

@@ -104,6 +104,6 @@ export const makeConfig = (
 		updatedAt: 0,
 	},
 	accounts,
-	semanticSearchEnabled: true,
+	buildCommit: "dev",
 	...overrides,
 });

package/src/components/compose/draft-discard-banner.test.ts

@@ -1,76 +0,0 @@
-/**
- * Draft-discard must surface a banner on a soft failure.
- *
- * `ComposeForm.handleDiscard` closes the compose dialog optimistically, then
- * fires the delete mutation. Before #741 the delete had no `onError`, so a soft
- * 4xx (409/404 "the draft is already gone") closed the dialog as if it
- * succeeded — silent discard. The fix adds an `onError` that pushes a banner via
- * `buildMutationErrorBanner("Couldn't discard draft", …)`, mirroring the
- * outbox-delete pattern. A fatal 5xx still escalates globally; this pins the
- * non-fatal branch.
- *
- * Exercising the real mutation `onError` headlessly (no DOM) via the same
- * `MutationCache` wiring `ComposeForm` uses through `QueryClient`.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { MutationCache, QueryClient } from "@tanstack/react-query";
-import { ApiError } from "../../lib/api.js";
-import {
-	buildMutationErrorBanner,
-	type PushErrorInput,
-} from "../ui/error-banners.js";
-
-describe("draft discard surfaces a banner on a soft failure (#741)", () => {
-	const buildDiscardMutation = (
-		pushError: (input: PushErrorInput) => void,
-		fail: () => Promise<never>,
-	) => {
-		const client = new QueryClient({
-			mutationCache: new MutationCache(),
-		});
-		return client.getMutationCache().build(client, {
-			mutationFn: fail,
-			onError: (error: unknown) => {
-				pushError(
-					buildMutationErrorBanner(
-						"Couldn't discard draft",
-						"The draft wasn't discarded.",
-						error,
-					),
-				);
-			},
-		});
-	};
-
-	it("pushes a 'Couldn't discard draft' banner on a 409 already-gone", async () => {
-		const pushed: PushErrorInput[] = [];
-		const mutation = buildDiscardMutation(
-			(input) => pushed.push(input),
-			async () => {
-				throw new ApiError("Draft already deleted", 409);
-			},
-		);
-
-		await mutation.execute(undefined).catch(() => {});
-
-		assert.equal(pushed.length, 1);
-		assert.equal(pushed[0].title, "Couldn't discard draft");
-		assert.equal(pushed[0].detail, "Draft already deleted");
-	});
-
-	it("falls back to a human detail when the error carries no message", async () => {
-		const pushed: PushErrorInput[] = [];
-		const mutation = buildDiscardMutation(
-			(input) => pushed.push(input),
-			async () => {
-				throw {};
-			},
-		);
-
-		await mutation.execute(undefined).catch(() => {});
-
-		assert.equal(pushed[0].detail, "The draft wasn't discarded.");
-	});
-});

package/src/components/mail/ReadingPaneEmpty.render.test.ts

@@ -1,42 +0,0 @@
-/**
- * Render invariants for the shared reading-pane zero-state and the keyboard
- * hint bar (#785). Both ship as remit-ui components consumed by the live mail
- * routes. Uses `react-dom/server` so no jsdom is needed.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { KeyboardHintBar, ReadingPaneEmpty } from "@remit/ui";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-
-// See MessageToolbar.render.test.ts: the SSR test loader transpiles remit-ui
-// `.tsx` with the classic JSX runtime, which needs a global `React`.
-(globalThis as { React?: typeof React }).React = React;
-
-describe("ReadingPaneEmpty (#785)", () => {
-	it("renders the prompt and the j/k/Enter Kbd hints by default", () => {
-		const html = renderToString(createElement(ReadingPaneEmpty) as never);
-		assert.match(html, /Select a thread to read/);
-		assert.match(html, /<kbd[^>]*>j<\/kbd>/);
-		assert.match(html, /<kbd[^>]*>k<\/kbd>/);
-		assert.match(html, /<kbd[^>]*>Enter<\/kbd>/);
-	});
-
-	it("can hide the hint line on touch surfaces", () => {
-		const html = renderToString(
-			createElement(ReadingPaneEmpty, { showHints: false }) as never,
-		);
-		assert.equal(/<kbd/.test(html), false);
-	});
-});
-
-describe("KeyboardHintBar (#785)", () => {
-	it("renders the default hint set", () => {
-		const html = renderToString(createElement(KeyboardHintBar) as never);
-		assert.match(html, /navigate/);
-		assert.match(html, /mute/);
-		assert.match(html, /all shortcuts/);
-		assert.match(html, /<kbd[^>]*>j<\/kbd>/);
-	});
-});

package/src/components/mail/SpamRescue.render.test.ts

@@ -1,35 +0,0 @@
-/**
- * The rescue banner is rendered by SpamRescue above the spam list. These tests
- * cover the banner's rendering with a count sourced from the backend (via
- * useRescueCandidates), exercising the component's output in isolation without
- * app providers.
- */
-
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import { RescueBanner } from "@remit/ui";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-
-(globalThis as { React?: typeof React }).React = React;
-
-const noop = () => {};
-
-const renderBanner = (count: number): string =>
-	renderToString(createElement(RescueBanner, { count, onReview: noop }));
-
-describe("RescueBanner rendering", () => {
-	it("shows the candidate count for multiple messages", () => {
-		const html = renderBanner(2);
-		assert.match(html, /2 messages here/);
-	});
-
-	it("shows singular phrasing for a single message", () => {
-		const html = renderBanner(1);
-		assert.ok(html.includes("1"), "count should appear");
-	});
-
-	it("renders without throwing for zero count", () => {
-		assert.doesNotThrow(() => renderBanner(0));
-	});
-});