@remit/web-client 0.0.324 → 0.0.326

package/dist/src/lib/rum-adapter.js

@@ -0,0 +1,84 @@
+import { AwsRum } from "aws-rum-web";
+import { getRuntimeConfig } from "../runtime-config";
+import { noopTelemetry } from "./telemetry";
+const ID_TOKEN_PATTERN = /([?&](token|access_token|id_token|authorization)=[^&]*)|\/messages\/[a-z0-9_-]+/gi;
+function scrubIds(value) {
+    return value.replace(ID_TOKEN_PATTERN, "[redacted]");
+}
+function sanitizePath(path) {
+    const qIndex = path.indexOf("?");
+    const hIndex = path.indexOf("#");
+    const cutAt = qIndex === -1 && hIndex === -1
+        ? path.length
+        : qIndex === -1
+            ? hIndex
+            : hIndex === -1
+                ? qIndex
+                : Math.min(qIndex, hIndex);
+    return scrubIds(path.slice(0, cutAt));
+}
+function scrubErrorMessage(error) {
+    const scrubbed = scrubIds(error.message);
+    if (scrubbed === error.message) {
+        return error;
+    }
+    const next = new Error(scrubbed);
+    next.name = error.name;
+    next.stack = error.stack;
+    return next;
+}
+export function createRumTelemetry(rum) {
+    return {
+        recordPageView(path) {
+            rum.recordPageView(sanitizePath(path));
+        },
+        recordError(error, context) {
+            rum.recordError(scrubErrorMessage(error));
+            if (context) {
+                rum.recordEvent("telemetry.error_context", context);
+            }
+        },
+        recordEvent(name, attributes) {
+            rum.recordEvent(name, attributes ?? {});
+        },
+        recordTiming(name, durationMs, attributes) {
+            rum.recordEvent("telemetry.timing", {
+                ...attributes,
+                name,
+                durationMs: String(durationMs),
+            });
+        },
+    };
+}
+function toError(reason) {
+    if (reason instanceof Error) {
+        return reason;
+    }
+    return new Error(String(reason));
+}
+function installGlobalErrorHandlers(telemetry) {
+    window.addEventListener("error", (event) => {
+        telemetry.recordError(toError(event.error ?? event.message));
+    });
+    window.addEventListener("unhandledrejection", (event) => {
+        telemetry.recordError(toError(event.reason));
+    });
+}
+export function initRum() {
+    const { appMonitorId, identityPoolId, region } = getRuntimeConfig().rum;
+    if (!appMonitorId) {
+        return noopTelemetry;
+    }
+    const rum = new AwsRum(appMonitorId, "1.0.0", region, {
+        sessionSampleRate: 1,
+        identityPoolId,
+        endpoint: `https://dataplane.rum.${region}.amazonaws.com`,
+        telemetries: ["performance"],
+        disableAutoPageView: true,
+        allowCookies: false,
+        enableXRay: false,
+    });
+    const telemetry = createRumTelemetry(rum);
+    installGlobalErrorHandlers(telemetry);
+    return telemetry;
+}

package/dist/src/lib/search-conversion.d.ts

@@ -0,0 +1,17 @@
+import type { SearchConversion } from "@remit/ui";
+/**
+ * The active query as clauses, which is what the wizard's search entry opens on
+ * (#484). One conversion, computed once in `MailListHeader`, so the reason the
+ * make-this-a-filter affordance gives and the clauses the wizard seeds from
+ * cannot disagree.
+ *
+ * Its own context rather than a field on the list header chrome (#506): the
+ * conversion is derived from the query text, so it is a new object on every
+ * keystroke, and carrying it on the chrome meant the chrome was too — which
+ * re-rendered every row of the virtualized list for a character the list does
+ * not show. The wizard is the only reader, and it is mounted once.
+ *
+ * Absent when no query is up.
+ */
+export declare const SearchConversionContext: import("react").Context<SearchConversion | undefined>;
+export declare const useSearchConversion: () => SearchConversion | undefined;

package/dist/src/lib/search-conversion.js

@@ -0,0 +1,17 @@
+import { createContext, useContext } from "react";
+/**
+ * The active query as clauses, which is what the wizard's search entry opens on
+ * (#484). One conversion, computed once in `MailListHeader`, so the reason the
+ * make-this-a-filter affordance gives and the clauses the wizard seeds from
+ * cannot disagree.
+ *
+ * Its own context rather than a field on the list header chrome (#506): the
+ * conversion is derived from the query text, so it is a new object on every
+ * keystroke, and carrying it on the chrome meant the chrome was too — which
+ * re-rendered every row of the virtualized list for a character the list does
+ * not show. The wizard is the only reader, and it is mounted once.
+ *
+ * Absent when no query is up.
+ */
+export const SearchConversionContext = createContext(undefined);
+export const useSearchConversion = () => useContext(SearchConversionContext);

package/dist/src/lib/search-params.d.ts

@@ -0,0 +1,23 @@
+/**
+ * How the address bar spells the query string.
+ *
+ * The router's own serializer writes one param per key, so a list of values
+ * comes out as a JSON blob — `?calendarId=%5B%22cal_a%22%2C%22cal_b%22%5D`. A
+ * list of values is what a query string has always been able to say, and
+ * saying it the ordinary way is what makes a link hand-writable, readable in a
+ * log, and usable by anything that is not this router. The router's own reader
+ * already collects repeated params into an array, so only the writing side was
+ * missing.
+ *
+ * Every other value keeps the spelling the router already gives it, including
+ * the quoting that text reading as JSON needs: the reader JSON-parses whatever
+ * it can, so `?q=true` would come back the boolean unless the string went in
+ * quoted.
+ */
+/**
+ * A query string, with a list written as the repeated params it is.
+ *
+ * `undefined` is absent rather than empty: a fact the view has nothing to say
+ * about does not belong in the address at all.
+ */
+export declare function stringifySearch(search: Record<string, unknown>): string;

package/dist/src/lib/search-params.js

@@ -0,0 +1,58 @@
+/**
+ * How the address bar spells the query string.
+ *
+ * The router's own serializer writes one param per key, so a list of values
+ * comes out as a JSON blob — `?calendarId=%5B%22cal_a%22%2C%22cal_b%22%5D`. A
+ * list of values is what a query string has always been able to say, and
+ * saying it the ordinary way is what makes a link hand-writable, readable in a
+ * log, and usable by anything that is not this router. The router's own reader
+ * already collects repeated params into an array, so only the writing side was
+ * missing.
+ *
+ * Every other value keeps the spelling the router already gives it, including
+ * the quoting that text reading as JSON needs: the reader JSON-parses whatever
+ * it can, so `?q=true` would come back the boolean unless the string went in
+ * quoted.
+ */
+/**
+ * Whether reading this text back would produce something other than the text.
+ *
+ * Decided by shape rather than by parsing it, because a block try/catch is not
+ * available and an over-quoted string still reads back as itself — the reader
+ * unquotes it — where an under-quoted one comes back the wrong type.
+ */
+const readsAsJson = (value) => value === "true" ||
+    value === "false" ||
+    value === "null" ||
+    /^["[{]/.test(value) ||
+    (value !== "" && Number.isFinite(Number(value)));
+/** The router's own value spelling. */
+function stringifyValue(value) {
+    if (typeof value === "object" && value !== null)
+        return JSON.stringify(value);
+    if (typeof value === "string")
+        return readsAsJson(value) ? JSON.stringify(value) : value;
+    return String(value);
+}
+/**
+ * A query string, with a list written as the repeated params it is.
+ *
+ * `undefined` is absent rather than empty: a fact the view has nothing to say
+ * about does not belong in the address at all.
+ */
+export function stringifySearch(search) {
+    const params = new URLSearchParams();
+    for (const key of Object.keys(search)) {
+        const value = search[key];
+        if (value === undefined)
+            continue;
+        if (Array.isArray(value)) {
+            for (const entry of value)
+                params.append(key, stringifyValue(entry));
+            continue;
+        }
+        params.set(key, stringifyValue(value));
+    }
+    const written = params.toString();
+    return written === "" ? "" : `?${written}`;
+}

package/dist/src/lib/search-query.d.ts

@@ -0,0 +1 @@
+export declare const normalizeSearchQuery: (query: string) => string;

package/dist/src/lib/search-query.js

@@ -0,0 +1,10 @@
+// Pre-query normalizer for the mail search bar. We keep the user's typed
+// casing visible in the input and the "results for X" header, but the value
+// sent to the backend (and used as the React Query cache key) is folded to
+// lowercase so equivalent searches collide on the same cache entry and the
+// server-side comparison is case-insensitive.
+//
+// `toLocaleLowerCase` (no locale arg) uses the host locale, which handles
+// Unicode edge cases that ASCII `toLowerCase` mishandles — most notably the
+// Turkish dotless I (`I` → `ı` / `İ` → `i`).
+export const normalizeSearchQuery = (query) => query.trim().toLocaleLowerCase();

package/dist/src/lib/search-result.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Map the row shapes the app carries onto the kit `SearchResult` the search
+ * results render: the per-mailbox `RemitImapThreadMessageResponse` and the
+ * brief/flagged `ThreadRowData`.
+ */
+import type { RemitImapThreadMessageResponse } from "@remit/api-http-client/types.gen.ts";
+import type { SearchResult, ThreadRowData } from "@remit/ui";
+import { type ResultFolderIndex } from "./result-folder.js";
+export declare function threadToSearchResult(thread: RemitImapThreadMessageResponse, folders?: ResultFolderIndex): SearchResult;
+export declare function rowToSearchResult(row: ThreadRowData, folders?: ResultFolderIndex): SearchResult;

package/dist/src/lib/search-result.js

@@ -0,0 +1,34 @@
+import { formatEmailDate } from "./format.js";
+import { resolveResultFolder, } from "./result-folder.js";
+export function threadToSearchResult(thread, folders) {
+    const { folder } = resolveResultFolder(folders, [thread.mailboxId]);
+    return {
+        id: thread.messageId,
+        sender: thread.fromName ?? thread.fromEmail ?? "Unknown",
+        ...(thread.fromEmail ? { senderEmail: thread.fromEmail } : {}),
+        subject: thread.subject ?? "(No subject)",
+        snippet: thread.snippet ?? "",
+        date: formatEmailDate(thread.sentDate),
+        unread: !thread.isRead,
+        flagged: thread.hasStars === true,
+        threadId: thread.threadId,
+        mailboxId: thread.mailboxId,
+        ...(folder ? { folder } : {}),
+    };
+}
+export function rowToSearchResult(row, folders) {
+    const { folder } = resolveResultFolder(folders, row.mailboxId ? [row.mailboxId] : []);
+    return {
+        id: row.id,
+        sender: row.fromName,
+        ...(row.fromEmail ? { senderEmail: row.fromEmail } : {}),
+        subject: row.subject,
+        snippet: row.snippet,
+        date: row.timeLabel,
+        unread: !row.isRead,
+        flagged: row.starred === true,
+        ...(row.threadId ? { threadId: row.threadId } : {}),
+        ...(row.mailboxId ? { mailboxId: row.mailboxId } : {}),
+        ...(folder ? { folder } : {}),
+    };
+}

package/dist/src/lib/search-scope.d.ts

@@ -0,0 +1,94 @@
+/**
+ * The search scope is the route.
+ *
+ * Search is the app's search: one field in the top bar, and by default it
+ * covers everything. Navigating the sidebar narrows it, and the narrowing is
+ * shown as one chip in the field — `in:spam` while viewing Spam. The chip is
+ * derived from the active route, not parsed out of the typed text: the route
+ * decides which pane is mounted and which mail that pane reads, and the chip is
+ * that decision made visible. Navigating elsewhere replaces the chip because the
+ * route changed.
+ *
+ * Removing the chip means "search everything", which is the daily brief — the
+ * cross-account view whose scope is nothing. So removal is a navigation to
+ * `/mail/brief` carrying the query, not an edit of the query text.
+ *
+ * There is exactly one scope, and it is this one. A typed `in:` term is a
+ * second, competing answer to "which mailbox", so it is recognized only where
+ * there is no route scope to compete with — see `isScopedRoute` and
+ * `useSearchTokenContext`. Every engine parses the query through that one
+ * context, so a scoped view cannot show a chip for a term it is ignoring.
+ *
+ * Pure functions only. `useSearchScope` binds these to the router.
+ */
+import type { FolderRole, SearchScope as ResultsScope } from "@remit/ui";
+import type { BrowsedList } from "./mail-route";
+/**
+ * Chip id of the scope chip. The top bar owns exactly one, so a fixed id is
+ * enough of a removal handle.
+ */
+export declare const SEARCH_SCOPE_CHIP_ID = "search-scope";
+export interface SearchScope {
+    id: string;
+    /** What the chip reads, e.g. `in:spam`. */
+    label: string;
+}
+/**
+ * What the field can say about its own scope.
+ *
+ * `pending` is the mailbox route before its name has loaded: the list under the
+ * bar is already one mailbox, so the field must not claim to search everything,
+ * but there is no name yet to put in a chip. It is a real third state, not a
+ * flavour of `global`.
+ */
+export type SearchScopeState = {
+    kind: "global";
+} | {
+    kind: "pending";
+} | {
+    kind: "scoped";
+    chip: SearchScope;
+};
+/**
+ * Render a mailbox name as an `in:` term. Lower-cased so it reads like the
+ * operator it mimics, and quoted when the name has whitespace so the chip
+ * stays one legible term.
+ */
+export declare function scopeLabelForMailboxName(name: string): string;
+/**
+ * True on the routes whose pane reads one mailbox or one virtual collection.
+ * These carry a scope; the daily brief (and any route not recognized here) does
+ * not.
+ */
+export declare function isScopedRoute(browsed: BrowsedList): boolean;
+/**
+ * The mailbox id carried by a mailbox route, or `undefined` on any other route.
+ */
+export declare function routeMailboxId(browsed: BrowsedList): string | undefined;
+/**
+ * The scope of the active route.
+ *
+ * `mailboxName` is the sidebar's own label for the mailbox route (resolved by
+ * `useCurrentMailboxName`). Until it resolves the scope is `pending`: no chip,
+ * because a chip reading a raw uuid is worse than none, but not `global`
+ * either, because the list underneath is already narrowed.
+ */
+export declare function searchScopeForRoute(browsed: BrowsedList, mailboxName?: string | null): SearchScopeState;
+/**
+ * The route's scope as the results list understands it.
+ *
+ * `is:starred` is a collection, not a folder: it spans every folder a star can
+ * be set in, so its rows carry provenance, and it is the user's own hand-picked
+ * mail, so a starred spam message is shown rather than held back. Only a search
+ * confined to a folder drops spam.
+ *
+ * The bar's third state, `pending`, is a mailbox route whose name has not
+ * loaded. It maps to `folder` with no role yet, because the list underneath is
+ * already one mailbox; calling it global for that one frame would flash folder
+ * labels and a spam offer and then retract them.
+ *
+ * `role` is the appointed role of the mailbox the route is on, which is what
+ * makes a search scoped to Spam show its rows instead of dropping them. A
+ * folder nobody appointed carries no role.
+ */
+export declare function resultsScopeForRoute(browsed: BrowsedList, state: SearchScopeState, role?: FolderRole): ResultsScope;

package/dist/src/lib/search-scope.js

@@ -0,0 +1,86 @@
+/**
+ * Chip id of the scope chip. The top bar owns exactly one, so a fixed id is
+ * enough of a removal handle.
+ */
+export const SEARCH_SCOPE_CHIP_ID = "search-scope";
+/**
+ * Render a mailbox name as an `in:` term. Lower-cased so it reads like the
+ * operator it mimics, and quoted when the name has whitespace so the chip
+ * stays one legible term.
+ */
+export function scopeLabelForMailboxName(name) {
+    const collapsed = name.trim().replace(/\s+/g, " ").toLowerCase();
+    return /\s/.test(collapsed) ? `in:"${collapsed}"` : `in:${collapsed}`;
+}
+/**
+ * True on the routes whose pane reads one mailbox or one virtual collection.
+ * These carry a scope; the daily brief (and any route not recognized here) does
+ * not.
+ */
+export function isScopedRoute(browsed) {
+    return browsed.list !== undefined && browsed.list !== "brief";
+}
+/**
+ * The mailbox id carried by a mailbox route, or `undefined` on any other route.
+ */
+export function routeMailboxId(browsed) {
+    return browsed.list === "mailbox" ? browsed.mailboxId : undefined;
+}
+/**
+ * The scope of the active route.
+ *
+ * `mailboxName` is the sidebar's own label for the mailbox route (resolved by
+ * `useCurrentMailboxName`). Until it resolves the scope is `pending`: no chip,
+ * because a chip reading a raw uuid is worse than none, but not `global`
+ * either, because the list underneath is already narrowed.
+ */
+export function searchScopeForRoute(browsed, mailboxName) {
+    if (browsed.list === "flagged") {
+        return {
+            kind: "scoped",
+            chip: { id: SEARCH_SCOPE_CHIP_ID, label: "is:starred" },
+        };
+    }
+    if (browsed.list === "outbox") {
+        return {
+            kind: "scoped",
+            chip: { id: SEARCH_SCOPE_CHIP_ID, label: "in:outbox" },
+        };
+    }
+    if (browsed.list === "mailbox") {
+        if (!mailboxName)
+            return { kind: "pending" };
+        return {
+            kind: "scoped",
+            chip: {
+                id: SEARCH_SCOPE_CHIP_ID,
+                label: scopeLabelForMailboxName(mailboxName),
+            },
+        };
+    }
+    return { kind: "global" };
+}
+/**
+ * The route's scope as the results list understands it.
+ *
+ * `is:starred` is a collection, not a folder: it spans every folder a star can
+ * be set in, so its rows carry provenance, and it is the user's own hand-picked
+ * mail, so a starred spam message is shown rather than held back. Only a search
+ * confined to a folder drops spam.
+ *
+ * The bar's third state, `pending`, is a mailbox route whose name has not
+ * loaded. It maps to `folder` with no role yet, because the list underneath is
+ * already one mailbox; calling it global for that one frame would flash folder
+ * labels and a spam offer and then retract them.
+ *
+ * `role` is the appointed role of the mailbox the route is on, which is what
+ * makes a search scoped to Spam show its rows instead of dropping them. A
+ * folder nobody appointed carries no role.
+ */
+export function resultsScopeForRoute(browsed, state, role) {
+    if (state.kind === "global")
+        return { kind: "global" };
+    if (browsed.list === "flagged")
+        return { kind: "collection" };
+    return { kind: "folder", ...(role ? { role } : {}) };
+}

package/dist/src/lib/search-suggestions.d.ts

@@ -0,0 +1,98 @@
+/**
+ * What to offer while a search query is being typed (#428 follow-up).
+ *
+ * The search box takes a vocabulary of `name:value` tokens (`lib/search-tokens.ts`)
+ * that nothing on screen announces, so the tokens are only useful to someone who
+ * already knows they exist. This turns the query and the caret into the list of
+ * completions for the term under the caret: token names while a bare word is
+ * being typed, that token's values once its name is committed.
+ *
+ * Pure functions over data passed in. Values that need looking up — folders,
+ * accounts, contacts — are supplied by the caller; `searchSuggestionRequest`
+ * says which lookup the current caret position needs, so a hook can fetch
+ * exactly that and nothing per keystroke. The address lookup for `from:` is the
+ * one the compose recipient field already uses
+ * (`addressOperationsSearchAddresses`); no new endpoint exists for this.
+ *
+ * The offer is a shortcut and never a constraint: nothing here rejects or
+ * rewrites what was typed, and a term with no matches leaves the plain text box
+ * it always was.
+ */
+import type { Suggestion } from "@remit/ui";
+import { type SearchTokenName, type SearchTokenValueSource } from "./search-tokens.js";
+/** How many suggestions the list shows at most. */
+export declare const SEARCH_SUGGESTION_LIMIT = 8;
+/** The term the caret sits in, and where it sits in the query. */
+export interface ActiveSearchTerm {
+    /** Index of the term's first character. */
+    start: number;
+    /** Index just past the term's last character. */
+    end: number;
+    /** The term exactly as typed. Empty when the caret is on whitespace. */
+    raw: string;
+    /** The token name typed before the colon, lower-cased. Absent for a bare word. */
+    name?: string;
+    /** What has been typed of the value, unquoted. Absent for a bare word. */
+    value?: string;
+}
+/**
+ * The term the caret is in. A caret on whitespace (or in an empty box) is an
+ * empty term at that position, so the caller still gets the vocabulary offered
+ * rather than nothing — whether to show it there is the UI's call.
+ */
+export declare function activeSearchTerm(query: string, cursor: number): ActiveSearchTerm;
+/** What the caret position needs offered: a token name, or one token's values. */
+export interface SearchSuggestionRequest {
+    kind: "token" | "value";
+    /** The token whose values are wanted, for a `value` request. */
+    token?: SearchTokenName;
+    /** Where those values come from, for a `value` request. */
+    source?: SearchTokenValueSource;
+    /** What has been typed of the name or the value. */
+    query: string;
+}
+/**
+ * The lookup the caret position calls for, so a hook fetches folders, accounts,
+ * or addresses only where they can be offered. `undefined` when the term is an
+ * unknown `foo:bar` — a token the vocabulary does not carry has no completions,
+ * and the term stays free text.
+ */
+export declare function searchSuggestionRequest(query: string, cursor: number): SearchSuggestionRequest | undefined;
+/** A value the caller looked up, ready to be offered for one token. */
+export interface SearchSuggestionValue {
+    value: string;
+    /** What the row reads. Defaults to the value. */
+    label?: string;
+    /** Secondary text — the address behind a display name, say. */
+    hint?: string;
+}
+/** The looked-up values available for the tokens that take them. */
+export interface SearchSuggestionData {
+    /** Folder names, for `in:`. */
+    mailboxes?: readonly SearchSuggestionValue[];
+    /** Account names, for `account:`. */
+    accounts?: readonly SearchSuggestionValue[];
+    /** Known addresses, for `from:` — the address search's results. */
+    contacts?: readonly SearchSuggestionValue[];
+}
+/**
+ * The completions for the term under the caret. An unknown token name offers
+ * nothing: `foo:bar` is free text, and a list of guesses would suggest otherwise.
+ */
+export declare function buildSearchSuggestions(query: string, cursor: number, data?: SearchSuggestionData): Suggestion[];
+/** A query and where the caret lands in it, after a suggestion is applied. */
+export interface AppliedSearchSuggestion {
+    query: string;
+    cursor: number;
+}
+/**
+ * Replace the term under the caret with the suggestion. A completed token gets a
+ * trailing space — the term is finished, the next one starts — while a bare
+ * `name:` does not, because the value still has to be typed.
+ */
+export declare function applySearchSuggestion(query: string, cursor: number, suggestion: Suggestion): AppliedSearchSuggestion;
+/** A contact as the address search returns it, as a suggestion value. */
+export declare const contactSuggestionValue: (address: {
+    normalizedEmail: string;
+    displayName?: string | null;
+}) => SearchSuggestionValue;