@remit/web-client 0.0.86 → 0.0.88

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remit/web-client",
-  "version": "0.0.86",
+  "version": "0.0.88",
   "type": "module",
   "description": "Remit web client, published as composable primitives — the app shell, auth shells, and runtime config. A distributor imports what it composes and bundles it.",
   "exports": {

package/src/auth/BetterAuthShell.tsx

@@ -5,6 +5,7 @@ import {
 	Banner,
 	Button,
 	Input,
+	PasswordInput,
 } from "@remit/ui";
 import { type FormEvent, type ReactNode, useState } from "react";
 import { AppShellSkeleton } from "@/components/layout/AppShellSkeleton";
@@ -161,9 +162,8 @@ export const SignInForm = () => {
 						<label htmlFor="ba-password" className="text-fg-muted">
 							Password
 						</label>
-						<Input
+						<PasswordInput
 							id="ba-password"
-							type="password"
 							autoComplete={
 								activeMode === "signUp" ? "new-password" : "current-password"
 							}

package/src/components/compose/AddressField.tsx

@@ -1,10 +1,14 @@
 import { addressOperationsSearchAddressesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
 import type { RemitImapAddressResponse } from "@remit/api-http-client/types.gen.ts";
-import { AddressTag } from "@remit/ui";
+import {
+	AddressTag,
+	type Suggestion,
+	SuggestList,
+	useSuggestList,
+} from "@remit/ui";
 import { useQuery } from "@tanstack/react-query";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useMemo, useRef, useState } from "react";
 import { useDebouncedValue } from "@/hooks/useDebouncedValue";
-import { cn } from "@/lib/utils";
 
 export interface AddressEntry {
 	email: string;
@@ -18,12 +22,8 @@ interface AddressFieldProps {
 	placeholder?: string;
 }
 
-const formatSuggestion = (addr: RemitImapAddressResponse): string => {
-	if (addr.displayName) {
-		return `${addr.displayName} <${addr.normalizedEmail}>`;
-	}
-	return addr.normalizedEmail;
-};
+/** Beyond Enter, the keys that take the highlighted suggestion in a chips field. */
+const ACCEPT_KEYS = ["Tab", ","] as const;
 
 const isValidEmail = (value: string): boolean =>
 	/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.trim());
@@ -50,10 +50,7 @@ export const AddressField = ({
 	placeholder,
 }: AddressFieldProps) => {
 	const [inputValue, setInputValue] = useState("");
-	const [highlightedIndex, setHighlightedIndex] = useState(-1);
-	const [isOpen, setIsOpen] = useState(false);
 	const inputRef = useRef<HTMLInputElement>(null);
-	const listRef = useRef<HTMLUListElement>(null);
 
 	const debouncedQuery = useDebouncedValue(inputValue, 200);
 
@@ -66,21 +63,18 @@ export const AddressField = ({
 
 	const suggestions = suggestionsData?.items ?? [];
 	const existingEmails = new Set(addresses.map((a) => a.email.toLowerCase()));
-	const filteredSuggestions = suggestions.filter(
-		(s) => !existingEmails.has(s.normalizedEmail.toLowerCase()),
-	);
-
-	useEffect(() => {
-		setHighlightedIndex(-1);
-		setIsOpen(filteredSuggestions.length > 0 && inputValue.length >= 2);
-	}, [filteredSuggestions.length, inputValue.length]);
+	const filteredSuggestions =
+		inputValue.length >= 2
+			? suggestions.filter(
+					(s) => !existingEmails.has(s.normalizedEmail.toLowerCase()),
+				)
+			: [];
 
 	const addAddress = useCallback(
 		(entry: AddressEntry) => {
 			if (existingEmails.has(entry.email.toLowerCase())) return;
 			onChange([...addresses, entry]);
 			setInputValue("");
-			setIsOpen(false);
 		},
 		[addresses, existingEmails, onChange],
 	);
@@ -110,6 +104,24 @@ export const AddressField = ({
 		}
 	}, [inputValue, addAddress]);
 
+	// The open state, the highlight, and the arrow/Enter/Escape handling are the
+	// app's one typeahead behaviour, shared with the filter-rule value field.
+	const suggest = useSuggestList({
+		count: filteredSuggestions.length,
+		acceptKeys: ACCEPT_KEYS,
+		onAccept: (index) => selectSuggestion(filteredSuggestions[index]),
+	});
+
+	const options = useMemo<Suggestion[]>(
+		() =>
+			filteredSuggestions.map((suggestion) => ({
+				value: suggestion.normalizedEmail,
+				label: suggestion.displayName ?? suggestion.normalizedEmail,
+				...(suggestion.displayName ? { hint: suggestion.normalizedEmail } : {}),
+			})),
+		[filteredSuggestions],
+	);
+
 	const handleKeyDown = useCallback(
 		(e: React.KeyboardEvent<HTMLInputElement>) => {
 			if (e.key === "Backspace" && inputValue === "" && addresses.length > 0) {
@@ -117,48 +129,20 @@ export const AddressField = ({
 				return;
 			}
 
+			if (suggest.handleKeyDown(e)) return;
+
 			if (e.key === "Enter" || e.key === "Tab" || e.key === ",") {
-				if (highlightedIndex >= 0 && filteredSuggestions[highlightedIndex]) {
-					e.preventDefault();
-					selectSuggestion(filteredSuggestions[highlightedIndex]);
-					return;
-				}
 				if (inputValue.trim()) {
 					e.preventDefault();
 					commitInput();
 				}
-				return;
-			}
-
-			if (e.key === "ArrowDown" && isOpen) {
-				e.preventDefault();
-				setHighlightedIndex((prev) =>
-					prev < filteredSuggestions.length - 1 ? prev + 1 : 0,
-				);
-				return;
-			}
-
-			if (e.key === "ArrowUp" && isOpen) {
-				e.preventDefault();
-				setHighlightedIndex((prev) =>
-					prev > 0 ? prev - 1 : filteredSuggestions.length - 1,
-				);
-				return;
-			}
-
-			if (e.key === "Escape") {
-				setIsOpen(false);
-				setHighlightedIndex(-1);
 			}
 		},
 		[
 			inputValue,
 			addresses.length,
-			highlightedIndex,
-			filteredSuggestions,
-			isOpen,
 			removeAddress,
-			selectSuggestion,
+			suggest.handleKeyDown,
 			commitInput,
 		],
 	);
@@ -166,9 +150,9 @@ export const AddressField = ({
 	const handleBlur = useCallback(() => {
 		setTimeout(() => {
 			commitInput();
-			setIsOpen(false);
+			suggest.dismiss();
 		}, 150);
-	}, [commitInput]);
+	}, [commitInput, suggest.dismiss]);
 
 	return (
 		<div className="relative">
@@ -200,37 +184,36 @@ export const AddressField = ({
 						id={`address-field-${label}`}
 						type="text"
 						value={inputValue}
-						onChange={(e) => setInputValue(e.target.value)}
+						onChange={(e) => {
+							suggest.reopen();
+							setInputValue(e.target.value);
+						}}
 						onKeyDown={handleKeyDown}
 						onBlur={handleBlur}
 						placeholder={addresses.length === 0 ? placeholder : ""}
 						className="flex-1 min-w-[120px] bg-transparent outline-none text-sm py-0.5"
+						autoComplete="off"
+						{...suggest.comboboxProps}
 					/>
 				</div>
 			</div>
 
-			{isOpen && filteredSuggestions.length > 0 && (
-				<ul
-					ref={listRef}
-					className="absolute left-12 right-0 mt-1 bg-surface border border-line rounded-md shadow-lg z-50 max-h-[200px] overflow-auto"
-				>
-					{filteredSuggestions.map((suggestion, index) => (
-						<li
-							key={suggestion.addressId}
-							className={cn(
-								"px-3 py-2 text-sm cursor-pointer transition-colors",
-								index === highlightedIndex && "bg-accent-2-soft",
-							)}
-							onMouseDown={(e) => {
-								e.preventDefault();
-								selectSuggestion(suggestion);
-							}}
-							onMouseEnter={() => setHighlightedIndex(index)}
-						>
-							{formatSuggestion(suggestion)}
-						</li>
-					))}
-				</ul>
+			{suggest.open && (
+				<SuggestList
+					id={suggest.listId}
+					suggestions={options}
+					activeIndex={suggest.activeIndex}
+					optionId={suggest.optionId}
+					onPick={(option) => {
+						const picked = filteredSuggestions.find(
+							(suggestion) => suggestion.normalizedEmail === option.value,
+						);
+						if (picked) selectSuggestion(picked);
+					}}
+					onHighlight={suggest.setActiveIndex}
+					label={`${label} suggestions`}
+					className="absolute left-12 right-0 z-50 mt-1 max-h-[200px] shadow-lg"
+				/>
 			)}
 		</div>
 	);

package/src/components/mail/AutoMovedIndicator.tsx

@@ -8,15 +8,15 @@ interface AutoMovedIndicatorProps {
 	threadId: string;
 	mailboxId: string;
 	autoMoved: RemitImapAutoMovedInfo | undefined;
-	/** `md` (reading view) adds the inline actions (Undo, and the Manage-filter link for a filter move); `sm` (list row) shows the icon + label. */
-	size?: "sm" | "md";
 }
 
 /**
- * Renders the "auto-moved by Remit" badge only while the move is still in
- * effect (current mailbox matches the verdict's implied destination) — see
- * `useAutoMovedBadge`. Mount this only when `autoMoved` is present on the row
- * (callers gate with `thread.autoMoved &&`) so rows without a move never pay
+ * Renders the "auto-moved by Remit" badge on the open message only while the
+ * move is still in effect (current mailbox matches the verdict's implied
+ * destination) — see `useAutoMovedBadge`. Mailbox list rows deliberately do not
+ * show it: there the move is noise, and here it carries the Undo and
+ * Manage-filter actions. Mount this only when `autoMoved` is present (callers
+ * gate with `threadMessage.autoMoved &&`) so messages without a move never pay
  * for the Inbox/Junk mailbox lookups.
  */
 export function AutoMovedIndicator({
@@ -25,7 +25,6 @@ export function AutoMovedIndicator({
 	threadId,
 	mailboxId,
 	autoMoved,
-	size = "sm",
 }: AutoMovedIndicatorProps) {
 	const badge = useAutoMovedBadge({
 		accountId,
@@ -40,10 +39,9 @@ export function AutoMovedIndicator({
 	return (
 		<AutoMovedBadge
 			label={badge.label}
-			size={size}
 			onUndo={badge.onUndo}
 			undoLabel={badge.isUndoing ? "Undoing…" : "Undo"}
-			filtersHref={size === "md" ? badge.filtersHref : undefined}
+			filtersHref={badge.filtersHref}
 		/>
 	);
 }

package/src/components/mail/BriefPane.tsx

@@ -33,6 +33,7 @@ import { ConversationView } from "@/components/mail/ConversationView";
 import { DailyBrief } from "@/components/mail/DailyBrief";
 import { IntelligencePane } from "@/components/mail/IntelligencePane";
 import { MessageToolbar } from "@/components/mail/MessageToolbar";
+import type { OpenMessageOptions } from "@/components/mail/ThreadListInteraction";
 import { useDeleteMessages } from "@/hooks/useDeleteMessages";
 import { useToggleReadFor } from "@/hooks/useMarkAsRead";
 import { type ThreadActions, useThreadActions } from "@/hooks/useThreadActions";
@@ -56,7 +57,7 @@ interface BriefPaneContextValue {
 	selectedThread: RemitImapThreadMessageResponse | undefined;
 	/** The conversation to open — the loaded thread, or a tapped "Related" hit. */
 	conversation: ConversationTarget | undefined;
-	onSelectMessage: (id: string) => void;
+	onSelectMessage: (id: string, options?: OpenMessageOptions) => void;
 	onSelectSearchResult: (result: SearchResult) => void;
 	onCloseThread: () => void;
 	/**
@@ -120,7 +121,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 	);
 
 	const handleSelectMessage = useCallback(
-		(id: string) => {
+		(id: string, options?: OpenMessageOptions) => {
 			navigate({
 				to: "/mail",
 				search: (prev) => ({
@@ -129,6 +130,7 @@ function BriefPaneProvider({ selectedMessageId, children }: BriefPaneProps) {
 					selectedThreadId: undefined,
 					selectedMailboxId: undefined,
 				}),
+				replace: options?.replace,
 			});
 		},
 		[navigate],

package/src/components/mail/DailyBrief.selection.test.ts

@@ -0,0 +1,49 @@
+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";
+
+/**
+ * The brief raises two selection surfaces — the desktop toolbar and the touch
+ * sheet — and they offer the same verbs. Select-all was wired into the sheet
+ * only, so the same list could be selected whole on a phone and not on a
+ * desktop (#453).
+ *
+ * As with `MessageList.selection.test.ts`, `DailyBrief` weaves routing, the
+ * cursor and several data hooks together, so the rule is enforced by reading
+ * the source. `resolveBriefSelectionScope` carries the decisions that can be
+ * unit-tested on their own.
+ */
+
+const here = dirname(fileURLToPath(import.meta.url));
+const source = readFileSync(resolve(here, "DailyBrief.tsx"), "utf8");
+
+const chromeBody = (): string => {
+	const start = source.indexOf("function BriefSelectionChrome(");
+	assert.notEqual(start, -1, "BriefSelectionChrome is defined");
+	const next = source.indexOf("\nfunction ", start + 1);
+	return source.slice(start, next === -1 ? undefined : next);
+};
+
+describe("the brief's select-all", () => {
+	it("reaches the desktop toolbar and the touch sheet from one derivation", () => {
+		const body = chromeBody();
+		const derivations = body.match(/const selectAll = useMemo\(/g) ?? [];
+		assert.equal(
+			derivations.length,
+			1,
+			"one select-all, so the two surfaces cannot drift",
+		);
+		const wired = body.match(/selectAll=\{selectAll\}/g) ?? [];
+		assert.equal(
+			wired.length,
+			2,
+			"both SelectionToolbar and SelectionSheet take it",
+		);
+	});
+
+	it("is offered only when there are rows to select", () => {
+		assert.match(chromeBody(), /orderedIds\.length > 0/);
+	});
+});