@remit/web-client 0.0.321 → 0.0.323

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.ts

@@ -26,6 +26,8 @@ export interface RumConfig {
  */
 export type TlsMode = "internal" | "acme" | "tailscale" | "off";
 
+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 =>
@@ -40,6 +42,7 @@ export interface RemitRuntimeConfig {
 	mailboxPollIntervalSeconds?: string;
 	disableDevtools: boolean;
 	tlsMode: TlsMode;
+	issuesUrl: string;
 }
 
 interface RawRuntimeConfig {
@@ -51,6 +54,7 @@ interface RawRuntimeConfig {
 	mailboxPollIntervalSeconds?: string | number;
 	disableDevtools?: boolean;
 	tlsMode?: string;
+	issuesUrl?: string;
 }
 
 declare global {
@@ -85,5 +89,6 @@ export const getRuntimeConfig = (): RemitRuntimeConfig => {
 				: undefined,
 		disableDevtools: raw.disableDevtools ?? false,
 		tlsMode: isTlsMode(raw.tlsMode) ? raw.tlsMode : "off",
+		issuesUrl: raw.issuesUrl ?? DEFAULT_ISSUES_URL,
 	};
 };

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

package/src/components/mail/intelligence-semantic-off.render.test.ts

@@ -1,111 +0,0 @@
-/**
- * "Similar messages" on an instance with semantic search off (#1068).
- *
- * Off is a deployment setting, and the client learns it from the config read
- * every surface already makes. Before this the section rendered nothing at all,
- * which reads as a sender nothing resembles — the one thing an operator who
- * has not turned semantic search on cannot tell from the truth.
- *
- * Drives the real chain: `useIntelligenceData` reads `GET /config`, the state
- * resolver turns `semanticSearchEnabled: false` into the off state, and the
- * real `IntelligencePanel` renders it. Both halves are asserted — the copy the
- * operator acts on, and that no semantic query is sent at all.
- */
-
-import assert from "node:assert/strict";
-import { afterEach, describe, it } from "node:test";
-import { IntelligencePanel } from "@remit/ui";
-import { createElement } from "react";
-import { useIntelligenceData } from "@/hooks/useIntelligenceData";
-import { createDomHarness, type DomHarness } from "@/test-support/dom";
-import {
-	makeAccount,
-	makeConfig,
-	makeThreadMessage,
-} from "@/test-support/fixtures";
-import { type HttpMock, mockFetch } from "@/test-support/http";
-import { resolveSimilarState } from "./IntelligencePane";
-
-const thread = makeThreadMessage({ messageId: "msg-1" });
-
-const SimilarHarness = () => {
-	const {
-		data,
-		isSimilarLoading,
-		similarError,
-		similarErrorIsFatal,
-		semanticEnabled,
-	} = useIntelligenceData(thread, "mbx-inbox");
-	if (!data) return null;
-	return createElement(IntelligencePanel, {
-		data,
-		similarState: resolveSimilarState({
-			similarError,
-			similarErrorIsFatal,
-			isSimilarLoading,
-			semanticEnabled,
-		}),
-	});
-};
-
-const respond =
-	(semanticSearchEnabled: boolean) => (call: { path: string }) => {
-		if (call.path.endsWith("/config")) {
-			return makeConfig([makeAccount({ accountId: "acc-1" })], {
-				semanticSearchEnabled,
-			});
-		}
-		if (call.path.endsWith("/addresses/search")) return { items: [] };
-		return { items: [] };
-	};
-
-let harness: DomHarness | undefined;
-let http: HttpMock;
-
-afterEach(() => {
-	harness?.close();
-	harness = undefined;
-	http.restore();
-});
-
-describe("the Similar messages section on an instance with semantic search off", () => {
-	it("states the setting, what turning it on buys, and the command", async () => {
-		http = mockFetch(respond(false));
-		harness = createDomHarness();
-		harness.renderApp(createElement(SimilarHarness));
-
-		await harness.waitFor(
-			() => harness?.text().includes("Semantic search is off") === true,
-		);
-
-		const text = harness.text();
-		assert.match(text, /Semantic search is off on this instance/);
-		assert.match(text, /Organize/);
-		assert.match(text, /filters/);
-		assert.match(text, /remit semantic on/);
-	});
-
-	it("sends no semantic query, because an empty answer is the same as no match", async () => {
-		http = mockFetch(respond(false));
-		harness = createDomHarness();
-		harness.renderApp(createElement(SimilarHarness));
-
-		await harness.waitFor(
-			() => harness?.text().includes("Semantic search is off") === true,
-		);
-		await harness.wait(30);
-		await harness.flush();
-
-		assert.deepEqual(http.to("/search/semantic"), []);
-	});
-
-	it("says none of it while the instance has semantic search on", async () => {
-		http = mockFetch(respond(true));
-		harness = createDomHarness();
-		harness.renderApp(createElement(SimilarHarness));
-
-		await harness.waitFor(() => http.to("/search/semantic").length > 0);
-
-		assert.doesNotMatch(harness.text(), /Semantic search is off/);
-	});
-});