@remit/web-client 0.0.137 → 0.0.139

package/src/components/mail/ThreadListInteraction.tsx

@@ -16,7 +16,12 @@
  * are not rendered: focus stops moving, the highlight disappears, and the next
  * verb acts on a message the user cannot see.
  */
-import { SelectionTopBar, useListCursor, type Verb } from "@remit/ui";
+import {
+	ConfirmDialog,
+	SelectionTopBar,
+	useListCursor,
+	type Verb,
+} from "@remit/ui";
 import {
 	createContext,
 	type ReactNode,
@@ -28,7 +33,6 @@ import {
 	useRef,
 	useState,
 } from "react";
-import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { useFollowFocusOpen } from "@/hooks/useFollowFocusOpen";
 import { useIsDesktop } from "@/hooks/useMediaQuery";
 import type { TriageContextUpdate } from "@/hooks/useTriageLayer";

package/src/components/settings/AccountFormPanel.tsx

@@ -8,6 +8,7 @@ import {
 import type { RemitImapAccountResponse } from "@remit/api-http-client/types.gen.ts";
 import {
 	Button,
+	ComposeLanguageSetting,
 	Input,
 	PasswordInput,
 	Select,
@@ -19,6 +20,7 @@ import { Check, Loader2, X } from "lucide-react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+import { useComposeLanguages } from "../../hooks/useComposeLanguages";
 import { useSignature } from "../../hooks/useSignature";
 import {
 	getPresetById,
@@ -319,6 +321,25 @@ export const AccountFormPanel = ({
 	} = useSignature(account?.accountId);
 	const [signatureText, setSignatureText] = useState(signature.plainText);
 
+	const {
+		languages,
+		setLanguages,
+		isSaving: isLanguagesSaving,
+	} = useComposeLanguages(account?.accountId);
+
+	const languagesSection = (
+		<section>
+			<h3 className="text-2xs font-semibold text-fg-subtle uppercase tracking-wider mb-3">
+				Writing languages
+			</h3>
+			<ComposeLanguageSetting
+				value={languages}
+				onChange={setLanguages}
+				busy={isLanguagesSaving}
+			/>
+		</section>
+	);
+
 	useEffect(() => {
 		setSignatureText(signature.plainText);
 	}, [signature.plainText]);
@@ -475,6 +496,7 @@ export const AccountFormPanel = ({
 							</div>
 						</section>
 					)}
+					{isEditing && languagesSection}
 				</div>
 			</SlidePanel>
 		);
@@ -940,6 +962,7 @@ export const AccountFormPanel = ({
 						</div>
 					</section>
 				)}
+				{isEditing && languagesSection}
 			</form>
 		</SlidePanel>
 	);

package/src/components/settings/label-delete-confirm.stories.tsx

@@ -1,5 +1,5 @@
+import { ConfirmDialog } from "@remit/ui";
 import type { Meta, StoryObj } from "@storybook/react-vite";
-import { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { deleteLabelConfirmCopy } from "@/lib/organize/label-delete-copy";
 
 /**

package/src/hooks/useComposeLanguages.ts

@@ -0,0 +1,69 @@
+import {
+	accountDetailOperationsUpdateAccountMutation,
+	configOperationsGetConfigOptions,
+	configOperationsGetConfigQueryKey,
+} from "@remit/api-http-client/@tanstack/react-query.gen.ts";
+import { defaultComposeLanguages } from "@remit/ui";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { useCallback, useMemo } from "react";
+import { useErrorBanners } from "@/components/ui/ErrorBannerProvider";
+import { buildMutationErrorBanner } from "@/components/ui/error-banners";
+
+/**
+ * The account's writing languages: the menu the composer's language chip
+ * offers, and the set detection is allowed to choose inside. Absent on the
+ * server means the user has never been here, and the browser's own ordered
+ * answer stands in.
+ */
+export const useComposeLanguages = (accountId?: string) => {
+	const queryClient = useQueryClient();
+	const { pushError } = useErrorBanners();
+
+	const { data: config } = useQuery({
+		...configOperationsGetConfigOptions(),
+		staleTime: Infinity,
+	});
+
+	const configured = config?.accounts.find(
+		(account) => account.accountId === accountId,
+	)?.composeLanguages;
+
+	const languages = useMemo<string[]>(
+		() =>
+			configured && configured.length > 0
+				? [...configured]
+				: defaultComposeLanguages(navigator.languages),
+		[configured],
+	);
+
+	const mutation = useMutation({
+		...accountDetailOperationsUpdateAccountMutation(),
+		onSuccess: () => {
+			queryClient.invalidateQueries({
+				queryKey: configOperationsGetConfigQueryKey(),
+			});
+		},
+		onError: (error) => {
+			pushError(
+				buildMutationErrorBanner(
+					"Couldn't save languages",
+					"The writing languages weren't saved.",
+					error,
+				),
+			);
+		},
+	});
+
+	const setLanguages = useCallback(
+		(next: string[]) => {
+			if (!accountId) return;
+			mutation.mutate({
+				path: { accountId },
+				body: { composeLanguages: next },
+			});
+		},
+		[accountId, mutation],
+	);
+
+	return { languages, setLanguages, isSaving: mutation.isPending };
+};

package/src/routes/settings/labels.tsx

@@ -7,6 +7,7 @@ import type {
 import {
 	Banner,
 	Button,
+	ConfirmDialog,
 	Input,
 	labelColorOptions,
 	Select,
@@ -16,7 +17,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 { ConfirmDialog } from "@/components/ui/ConfirmDialog";
 import { ErrorState } from "@/components/ui/ErrorState";
 import {
 	useCreateLabel,

package/src/components/compose/ComposeBody.stories.tsx

@@ -1,274 +0,0 @@
-import type { RichTextValue } from "@remit/ui/rich-text";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { useState } from "react";
-import { expect, fn, userEvent, within } from "storybook/test";
-import { ComposeBody, type ConversionFailure } from "./ComposeBody";
-
-const RICH_DOCUMENT = [
-	"<h2>Quarterly numbers</h2>",
-	"<p>Revenue is <strong>up</strong> on the quarter.</p>",
-	"<table><thead><tr><th>Region</th><th>Total</th></tr></thead>",
-	"<tbody><tr><td>EMEA</td><td>412</td></tr></tbody></table>",
-].join("");
-
-const PLAIN_PARAGRAPHS =
-	"<p>Thanks — that works.</p><p></p><p>See you then.</p>";
-
-const UNDERLINED = "<p>Please <u>read this</u> before Friday.</p>";
-
-const PLAIN_MARKDOWN = [
-	"## Quarterly numbers",
-	"",
-	"| Region | Total |",
-	"| --- | --- |",
-	"| EMEA | 412 |",
-].join("\n");
-
-const Harness = ({
-	initialHtml = "",
-	initialText = "",
-	startIn = "rich",
-	onConversionError = () => undefined,
-	conversions,
-}: {
-	initialHtml?: string;
-	initialText?: string;
-	startIn?: "rich" | "plain";
-	onConversionError?: (failure: ConversionFailure) => void;
-	conversions?: {
-		toPlain: (value: RichTextValue) => string;
-		toRich: (text: string) => string;
-	};
-}) => {
-	const [mode, setMode] = useState<"rich" | "plain">(startIn);
-	return (
-		<div className="flex h-[460px] w-[680px] flex-col overflow-auto rounded-md border border-line bg-canvas">
-			<ComposeBody
-				mode={mode}
-				onModeChange={setMode}
-				initialHtml={initialHtml}
-				initialText={initialText}
-				onChange={() => undefined}
-				onConversionError={onConversionError}
-				conversions={conversions}
-			/>
-		</div>
-	);
-};
-
-/**
- * The mode switch as the compose window runs it: the toolbar control, the one
- * warning it raises, and the two surfaces it swaps between. The live
- * `ComposeForm` adds the recipients, the autosave and the send around this.
- */
-const meta: Meta<typeof Harness> = {
-	title: "Screens/WebClient/ComposeModes",
-	component: Harness,
-	parameters: { layout: "centered" },
-};
-export default meta;
-
-type Story = StoryObj<typeof Harness>;
-
-const toggleOf = (canvasElement: HTMLElement): HTMLElement => {
-	const toggle = canvasElement.querySelector<HTMLElement>(
-		"[data-testid=compose-mode-toggle]",
-	);
-	if (!toggle) throw new Error("the mode toggle is not mounted");
-	return toggle;
-};
-
-const plainSurface = (canvasElement: HTMLElement): HTMLTextAreaElement | null =>
-	canvasElement.querySelector<HTMLTextAreaElement>(
-		"[data-testid=compose-body-plain]",
-	);
-
-export const RichDocument: Story = {
-	name: "Rich, with formatting",
-	args: { initialHtml: RICH_DOCUMENT },
-};
-
-export const PlainDraft: Story = {
-	name: "Plain, reopened from Markdown",
-	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
-};
-
-/**
- * Cancel changes nothing: the mode stays rich, the document is untouched, and
- * focus comes back to the control that was pressed. `aria-pressed` never flips
- * optimistically.
- */
-export const WarningCancelled: Story = {
-	name: "The warning, cancelled",
-	args: { initialHtml: RICH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		const toggle = toggleOf(canvasElement);
-		await userEvent.click(toggle);
-
-		const dialog = within(document.body).getByRole("dialog");
-		await expect(dialog).toHaveTextContent("Switch to plain text?");
-		await expect(dialog).toHaveTextContent(
-			"Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it.",
-		);
-		await expect(toggle).toHaveAttribute("aria-pressed", "false");
-
-		await userEvent.click(
-			within(dialog).getByRole("button", { name: "Cancel" }),
-		);
-
-		await expect(plainSurface(canvasElement)).toBeNull();
-		await expect(
-			canvasElement.querySelector("[data-testid=compose-body] table"),
-		).not.toBeNull();
-		await expect(toggleOf(canvasElement)).toHaveFocus();
-	},
-};
-
-export const WarningConfirmed: Story = {
-	name: "The warning, confirmed",
-	args: { initialHtml: RICH_DOCUMENT },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-		await userEvent.click(
-			within(within(document.body).getByRole("dialog")).getByRole("button", {
-				name: "Switch to plain text",
-			}),
-		);
-
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface did not arrive");
-		await expect(textarea.value).toContain("## Quarterly numbers");
-		await expect(textarea.value).toContain("**up**");
-		await expect(textarea.value).toContain("| EMEA | 412 |");
-
-		// The formatting buttons leave with the rich surface.
-		await expect(
-			canvasElement.querySelector("[aria-label='Bold (Ctrl+B)']"),
-		).toBeNull();
-		await expect(toggleOf(canvasElement)).toHaveAttribute(
-			"aria-pressed",
-			"true",
-		);
-		await expect(textarea).toHaveFocus();
-		await expect(textarea.selectionStart).toBe(textarea.value.length);
-	},
-};
-
-/** Nothing but paragraphs and a blank line: switching changes nothing, so nothing is asked. */
-export const PlainProseSwitchesSilently: Story = {
-	name: "Plain paragraphs switch without asking",
-	args: { initialHtml: PLAIN_PARAGRAPHS },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).queryByRole("dialog")).toBeNull();
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface did not arrive");
-		await expect(textarea.value).toContain("Thanks");
-		await expect(textarea.value).toContain("See you then.");
-	},
-};
-
-/**
- * An underlined word exports identical to its own characters, so a comparison
- * of the two strings would switch in silence and destroy it. The rule reads the
- * document instead.
- */
-export const UnderlineStillWarns: Story = {
-	name: "An underline alone still warns",
-	args: { initialHtml: UNDERLINED },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).getByRole("dialog")).toHaveTextContent(
-			"Switch to plain text?",
-		);
-	},
-};
-
-export const PlainToRich: Story = {
-	name: "Markdown back to rich, without asking",
-	args: { startIn: "plain", initialText: PLAIN_MARKDOWN },
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(within(document.body).queryByRole("dialog")).toBeNull();
-		const editable = canvasElement.querySelector("[data-testid=compose-body]");
-		if (!editable) throw new Error("the rich surface did not arrive");
-		await expect(editable.querySelector("h2")).not.toBeNull();
-		await expect(editable.querySelector("table td")).not.toBeNull();
-	},
-};
-
-/** Switching an ordinary note to rich must not reflow it. */
-export const PlainProseToRich: Story = {
-	name: "Prose with no Markdown in it",
-	args: {
-		startIn: "plain",
-		initialText: "Thanks — that works.\n\nI'll send the deck tomorrow.",
-	},
-	play: async ({ canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		const editable = canvasElement.querySelector("[data-testid=compose-body]");
-		if (!editable) throw new Error("the rich surface did not arrive");
-		await expect(editable.querySelectorAll("p").length).toBe(2);
-		await expect(editable.textContent).toContain("Thanks — that works.");
-		await expect(editable.textContent).toContain(
-			"I'll send the deck tomorrow.",
-		);
-	},
-};
-
-/**
- * A conversion that would blank a written message does not happen: autosave
- * would persist the empty body a moment later and the draft would be gone with
- * nothing said.
- */
-export const ConversionCameBackEmpty: Story = {
-	name: "A conversion that came back empty",
-	args: {
-		startIn: "plain",
-		initialText: "Everything I wrote this morning.",
-		onConversionError: fn(),
-		conversions: {
-			toPlain: (value) => value.text,
-			toRich: () => "",
-		},
-	},
-	play: async ({ args, canvasElement }) => {
-		await userEvent.click(toggleOf(canvasElement));
-
-		await expect(args.onConversionError).toHaveBeenCalledWith({
-			outcome: "blocked",
-			title: "Couldn't switch to rich text",
-			detail: "The conversion came back empty, so your message is unchanged.",
-		});
-		const textarea = plainSurface(canvasElement);
-		if (!textarea) throw new Error("the plain surface left");
-		await expect(textarea.value).toBe("Everything I wrote this morning.");
-		await expect(toggleOf(canvasElement)).toHaveAttribute(
-			"aria-pressed",
-			"true",
-		);
-	},
-};
-
-/** One Shift+Tab out of the body reaches the toggle, and Enter acts. */
-export const ReachableFromTheBody: Story = {
-	name: "Shift+Tab from the body reaches it",
-	args: { initialHtml: PLAIN_PARAGRAPHS },
-	play: async ({ canvasElement }) => {
-		const editable = canvasElement.querySelector<HTMLElement>(
-			"[data-testid=compose-body]",
-		);
-		if (!editable) throw new Error("the rich surface is not mounted");
-
-		await userEvent.click(editable);
-		await userEvent.tab({ shift: true });
-		await expect(toggleOf(canvasElement)).toHaveFocus();
-
-		await userEvent.keyboard("{Enter}");
-		await expect(plainSurface(canvasElement)).not.toBeNull();
-	},
-};

package/src/components/compose/ComposeBody.tsx

@@ -1,170 +0,0 @@
-import {
-	type ComposeBodyMode,
-	ComposeModeToggle,
-	markdownToHtml,
-	PlainTextEditor,
-	RichTextEditor,
-	type RichTextValue,
-} from "@remit/ui/rich-text";
-import { useRef, useState } from "react";
-import { ConfirmDialog } from "../ui/ConfirmDialog";
-import { conversionOutcome, switchNeedsWarning } from "./compose-mode";
-
-export interface ConversionFailure {
-	title: string;
-	detail: string;
-}
-
-/**
- * The two directions of the mode switch, injectable so a story can drive the
- * conversion that comes back empty — the branch that keeps autosave from
- * persisting a blanked draft, and the one case no real document produces on
- * demand.
- */
-export interface ComposeConversions {
-	toPlain: (value: RichTextValue) => string;
-	toRich: (text: string) => string;
-}
-
-export const DEFAULT_COMPOSE_CONVERSIONS: ComposeConversions = {
-	toPlain: (value) => value.text,
-	toRich: (text) => markdownToHtml(text),
-};
-
-const textOf = (html: string): string =>
-	new DOMParser().parseFromString(html, "text/html").body.textContent ?? "";
-
-const plainValue = (text: string): RichTextValue => ({
-	html: "",
-	text,
-	formatting: [],
-});
-
-interface ComposeBodyProps {
-	mode: ComposeBodyMode;
-	onModeChange: (mode: ComposeBodyMode) => void;
-	initialHtml: string;
-	initialText: string;
-	onChange: (value: RichTextValue) => void;
-	onSubmit?: () => void;
-	autoFocus?: boolean;
-	onConversionError: (failure: ConversionFailure) => void;
-	conversions?: ComposeConversions;
-}
-
-/**
- * The compose writing surface and the control that swaps it. Rich text is the
- * WYSIWYG document; plain text is a textarea whose content is the Markdown that
- * will be sent verbatim. The conversion runs over an in-memory document, so the
- * surface swaps in the same frame the choice is made.
- */
-export const ComposeBody = ({
-	mode,
-	onModeChange,
-	initialHtml,
-	initialText,
-	onChange,
-	onSubmit,
-	autoFocus = false,
-	onConversionError,
-	conversions = DEFAULT_COMPOSE_CONVERSIONS,
-}: ComposeBodyProps) => {
-	const [richHtml, setRichHtml] = useState(initialHtml);
-	const [richGeneration, setRichGeneration] = useState(0);
-	const [plainText, setPlainText] = useState(initialText);
-	const [confirming, setConfirming] = useState(false);
-	// The caret does not survive a conversion: a rich selection is a node path
-	// and Markdown is a character offset. The surface that arrives takes focus
-	// with the caret at the end; the toggle keeps it when the mode did not change.
-	const [focusSwitchedSurface, setFocusSwitchedSurface] = useState(false);
-	const richValue = useRef<RichTextValue>({
-		html: initialHtml,
-		text: initialText,
-		formatting: [],
-	});
-
-	const handleRichChange = (value: RichTextValue) => {
-		richValue.current = value;
-		onChange(value);
-	};
-
-	const handlePlainChange = (text: string) => {
-		setPlainText(text);
-		onChange(plainValue(text));
-	};
-
-	const switchToPlain = () => {
-		const value = richValue.current;
-		const converted = conversions.toPlain(value);
-		const decision = conversionOutcome("plain", textOf(value.html), converted);
-		if (decision.outcome === "blocked") {
-			onConversionError(decision);
-			return;
-		}
-		setPlainText(converted);
-		setFocusSwitchedSurface(true);
-		onChange(plainValue(converted));
-		onModeChange("plain");
-	};
-
-	const switchToRich = () => {
-		const converted = conversions.toRich(plainText);
-		const decision = conversionOutcome("rich", plainText, textOf(converted));
-		if (decision.outcome === "blocked") {
-			onConversionError(decision);
-			return;
-		}
-		setRichHtml(converted);
-		setRichGeneration((generation) => generation + 1);
-		setFocusSwitchedSurface(true);
-		onModeChange("rich");
-	};
-
-	const handleToggle = () => {
-		if (mode === "plain") {
-			switchToRich();
-			return;
-		}
-		if (switchNeedsWarning("plain", richValue.current.formatting)) {
-			setConfirming(true);
-			return;
-		}
-		switchToPlain();
-	};
-
-	const toggle = <ComposeModeToggle mode={mode} onToggle={handleToggle} />;
-
-	return (
-		<>
-			{mode === "plain" ? (
-				<PlainTextEditor
-					value={plainText}
-					onChange={handlePlainChange}
-					onSubmit={onSubmit}
-					autoFocus={focusSwitchedSurface}
-					trailing={toggle}
-				/>
-			) : (
-				<RichTextEditor
-					key={richGeneration}
-					initialHtml={richHtml}
-					onChange={handleRichChange}
-					onSubmit={onSubmit}
-					autoFocus={autoFocus || focusSwitchedSurface}
-					trailing={toggle}
-				/>
-			)}
-			<ConfirmDialog
-				isOpen={confirming}
-				title="Switch to plain text?"
-				description="Formatting becomes Markdown. Bold keeps its asterisks, a table becomes rows of pipes, and that text is what the recipient gets. No formatted version is sent alongside it."
-				confirmLabel="Switch to plain text"
-				onConfirm={() => {
-					setConfirming(false);
-					switchToPlain();
-				}}
-				onCancel={() => setConfirming(false)}
-			/>
-		</>
-	);
-};

package/src/components/compose/SubjectField.tsx

@@ -1,19 +0,0 @@
-interface SubjectFieldProps {
-	value: string;
-	onChange: (value: string) => void;
-}
-
-export const SubjectField = ({ value, onChange }: SubjectFieldProps) => (
-	<div className="flex items-start gap-2">
-		{/* biome-ignore lint/a11y/noLabelWithoutControl: label is visually adjacent to the sibling input; static id risks duplicates */}
-		<label className="text-sm text-fg-muted shrink-0 w-12 pt-1.5">Subj:</label>
-		<input
-			type="text"
-			value={value}
-			onChange={(e) => onChange(e.target.value)}
-			className="flex-1 px-2 py-1.5 border rounded-md bg-canvas text-sm"
-			placeholder="Subject"
-			data-subject-field
-		/>
-	</div>
-);