@remit/web-client 0.0.1

package/src/lib/search-tokens.test.ts

@@ -0,0 +1,218 @@
+import assert from "node:assert/strict";
+import { describe, it } from "node:test";
+import {
+	parseSearchTokens,
+	removeSearchToken,
+	searchTokenLabel,
+} from "./search-tokens.js";
+
+describe("parseSearchTokens", () => {
+	it("returns the query untouched when there are no tokens", () => {
+		const result = parseSearchTokens("parcel delivery confirmation");
+		assert.equal(result.freeText, "parcel delivery confirmation");
+		assert.deepEqual(result.tokens, []);
+	});
+
+	it("parses from:", () => {
+		const result = parseSearchTokens("invoice from:alice@example.com");
+		assert.equal(result.freeText, "invoice");
+		assert.deepEqual(result.tokens, [
+			{
+				type: "from",
+				raw: "from:alice@example.com",
+				value: "alice@example.com",
+			},
+		]);
+	});
+
+	it("parses has:attachment", () => {
+		const result = parseSearchTokens("receipts has:attachment");
+		assert.equal(result.freeText, "receipts");
+		assert.deepEqual(result.tokens, [
+			{ type: "hasAttachment", raw: "has:attachment" },
+		]);
+	});
+
+	it("parses is:unread case-insensitively", () => {
+		const result = parseSearchTokens("IS:UNREAD receipts");
+		assert.equal(result.freeText, "receipts");
+		assert.deepEqual(result.tokens, [{ type: "isUnread", raw: "IS:UNREAD" }]);
+	});
+
+	it("parses before: and after: as epoch seconds", () => {
+		const result = parseSearchTokens("after:2024-01-01 before:2024-02-01 tax");
+		assert.equal(result.freeText, "tax");
+		assert.deepEqual(result.tokens, [
+			{
+				type: "after",
+				raw: "after:2024-01-01",
+				value: "2024-01-01",
+				epochSeconds: Date.parse("2024-01-01T00:00:00Z") / 1000,
+			},
+			{
+				type: "before",
+				raw: "before:2024-02-01",
+				value: "2024-02-01",
+				epochSeconds: Date.parse("2024-02-01T00:00:00Z") / 1000,
+			},
+		]);
+	});
+
+	it("leaves a malformed date token in the free text", () => {
+		const result = parseSearchTokens("before:not-a-date tax");
+		assert.equal(result.freeText, "before:not-a-date tax");
+		assert.deepEqual(result.tokens, []);
+	});
+
+	it("leaves in:/account: as free text with no name index", () => {
+		const result = parseSearchTokens("in:archive account:work invoice");
+		assert.equal(result.freeText, "in:archive account:work invoice");
+		assert.deepEqual(result.tokens, []);
+	});
+
+	it("resolves in: against a supplied mailbox name index", () => {
+		const result = parseSearchTokens("in:archive invoice", {
+			mailboxesByName: new Map([["archive", "mailbox-1"]]),
+		});
+		assert.equal(result.freeText, "invoice");
+		assert.deepEqual(result.tokens, [
+			{
+				type: "in",
+				raw: "in:archive",
+				value: "archive",
+				mailboxId: "mailbox-1",
+			},
+		]);
+	});
+
+	it("resolves in: case-insensitively", () => {
+		const result = parseSearchTokens("IN:Archive invoice", {
+			mailboxesByName: new Map([["archive", "mailbox-1"]]),
+		});
+		assert.deepEqual(result.tokens, [
+			{
+				type: "in",
+				raw: "IN:Archive",
+				value: "Archive",
+				mailboxId: "mailbox-1",
+			},
+		]);
+	});
+
+	it("leaves in: as free text when the name isn't in the index", () => {
+		const result = parseSearchTokens("in:nonexistent invoice", {
+			mailboxesByName: new Map([["archive", "mailbox-1"]]),
+		});
+		assert.equal(result.freeText, "in:nonexistent invoice");
+		assert.deepEqual(result.tokens, []);
+	});
+
+	it("resolves account: against a supplied account name index", () => {
+		const result = parseSearchTokens("account:work invoice", {
+			accountsByName: new Map([["work", "account-1"]]),
+		});
+		assert.equal(result.freeText, "invoice");
+		assert.deepEqual(result.tokens, [
+			{
+				type: "account",
+				raw: "account:work",
+				value: "work",
+				accountId: "account-1",
+			},
+		]);
+	});
+
+	it("leaves account: as free text when the name isn't in the index", () => {
+		const result = parseSearchTokens("account:nonexistent invoice", {
+			accountsByName: new Map([["work", "account-1"]]),
+		});
+		assert.equal(result.freeText, "account:nonexistent invoice");
+		assert.deepEqual(result.tokens, []);
+	});
+
+	it("parses multiple tokens alongside free text", () => {
+		const result = parseSearchTokens(
+			"parcel from:dhl.com has:attachment is:unread",
+		);
+		assert.equal(result.freeText, "parcel");
+		assert.equal(result.tokens.length, 3);
+	});
+
+	it("ignores a bare 'from:' with no value", () => {
+		const result = parseSearchTokens("from:");
+		assert.equal(result.freeText, "from:");
+		assert.deepEqual(result.tokens, []);
+	});
+});
+
+describe("removeSearchToken", () => {
+	it("removes the token's raw text and collapses whitespace", () => {
+		const tokens = parseSearchTokens("parcel from:dhl.com delivery").tokens;
+		const next = removeSearchToken(
+			"parcel from:dhl.com delivery",
+			tokens[0] as NonNullable<(typeof tokens)[0]>,
+		);
+		assert.equal(next, "parcel delivery");
+	});
+
+	it("is a no-op when the token isn't present", () => {
+		const next = removeSearchToken("parcel delivery", {
+			type: "hasAttachment",
+			raw: "has:attachment",
+		});
+		assert.equal(next, "parcel delivery");
+	});
+});
+
+describe("searchTokenLabel", () => {
+	it("labels each token type in plain words", () => {
+		assert.equal(
+			searchTokenLabel({ type: "from", raw: "from:alice", value: "alice" }),
+			"From: alice",
+		);
+		assert.equal(
+			searchTokenLabel({ type: "hasAttachment", raw: "has:attachment" }),
+			"Has attachment",
+		);
+		assert.equal(
+			searchTokenLabel({ type: "isUnread", raw: "is:unread" }),
+			"Unread",
+		);
+		assert.equal(
+			searchTokenLabel({
+				type: "before",
+				raw: "before:2024-01-01",
+				value: "2024-01-01",
+				epochSeconds: 0,
+			}),
+			"Before 2024-01-01",
+		);
+		assert.equal(
+			searchTokenLabel({
+				type: "after",
+				raw: "after:2024-01-01",
+				value: "2024-01-01",
+				epochSeconds: 0,
+			}),
+			"After 2024-01-01",
+		);
+		assert.equal(
+			searchTokenLabel({
+				type: "in",
+				raw: "in:archive",
+				value: "archive",
+				mailboxId: "mailbox-1",
+			}),
+			"In: archive",
+		);
+		assert.equal(
+			searchTokenLabel({
+				type: "account",
+				raw: "account:work",
+				value: "work",
+				accountId: "account-1",
+			}),
+			"Account: work",
+		);
+	});
+});

package/src/lib/search-tokens.ts

@@ -0,0 +1,133 @@
+/**
+ * Filter-token parser for the mail search field (#428). Recognizes a fixed set
+ * of `word:value` tokens typed inline with the free-text query and turns them
+ * into removable chips. Only tokens the search APIs can actually honor are
+ * recognized — everything else is left untouched as ordinary free-text words.
+ *
+ * `in:<mailbox>` and `account:<name>` resolve against a name index the caller
+ * supplies via `SearchTokenContext` (built from the loaded mailboxes/accounts —
+ * see `lib/search-token-index.ts`). An unresolvable name (no index, or no
+ * match in it) is left as free text rather than becoming a chip for a filter
+ * that can't actually apply.
+ *
+ * Pure functions only: no React, no fetch — the name index is injected, not
+ * fetched here. `MailListHeader` renders the chips and the callers that issue
+ * search requests (`MailboxPane`, `DailyBrief`, `FlaggedList`,
+ * `useSemanticSearch`) apply the parsed tokens to the params each engine's API
+ * actually supports.
+ */
+
+export type SearchToken =
+	| { type: "from"; raw: string; value: string }
+	| { type: "hasAttachment"; raw: string }
+	| { type: "isUnread"; raw: string }
+	| { type: "before"; raw: string; value: string; epochSeconds: number }
+	| { type: "after"; raw: string; value: string; epochSeconds: number }
+	| { type: "in"; raw: string; value: string; mailboxId: string }
+	| { type: "account"; raw: string; value: string; accountId: string };
+
+export interface ParsedSearchQuery {
+	/** The query text with every recognized token removed, whitespace collapsed. */
+	freeText: string;
+	tokens: SearchToken[];
+}
+
+/** Name lookups for resolving `in:`/`account:` tokens; see module doc. */
+export interface SearchTokenContext {
+	/** Mailbox name (fullPath or its last segment, lower-cased) -> mailboxId. */
+	mailboxesByName?: ReadonlyMap<string, string>;
+	/** Account name (email or its local-part, lower-cased) -> accountId. */
+	accountsByName?: ReadonlyMap<string, string>;
+}
+
+const DATE_PATTERN = /^\d{4}-\d{2}-\d{2}$/;
+
+function parseDateToken(
+	type: "before" | "after",
+	raw: string,
+	value: string,
+): SearchToken | undefined {
+	if (!DATE_PATTERN.test(value)) return undefined;
+	const epochMs = Date.parse(`${value}T00:00:00Z`);
+	if (Number.isNaN(epochMs)) return undefined;
+	return { type, raw, value, epochSeconds: Math.floor(epochMs / 1000) };
+}
+
+function parseWord(
+	word: string,
+	context: SearchTokenContext,
+): SearchToken | undefined {
+	const lower = word.toLowerCase();
+	if (lower.startsWith("from:") && word.length > 5) {
+		return { type: "from", raw: word, value: word.slice(5) };
+	}
+	if (lower === "has:attachment") {
+		return { type: "hasAttachment", raw: word };
+	}
+	if (lower === "is:unread") {
+		return { type: "isUnread", raw: word };
+	}
+	if (lower.startsWith("before:") && word.length > 7) {
+		return parseDateToken("before", word, word.slice(7));
+	}
+	if (lower.startsWith("after:") && word.length > 6) {
+		return parseDateToken("after", word, word.slice(6));
+	}
+	if (lower.startsWith("in:") && word.length > 3) {
+		const value = word.slice(3);
+		const mailboxId = context.mailboxesByName?.get(value.toLowerCase());
+		if (!mailboxId) return undefined;
+		return { type: "in", raw: word, value, mailboxId };
+	}
+	if (lower.startsWith("account:") && word.length > 8) {
+		const value = word.slice(8);
+		const accountId = context.accountsByName?.get(value.toLowerCase());
+		if (!accountId) return undefined;
+		return { type: "account", raw: word, value, accountId };
+	}
+	return undefined;
+}
+
+/** Split a query into recognized filter tokens and the remaining free text. */
+export function parseSearchTokens(
+	query: string,
+	context: SearchTokenContext = {},
+): ParsedSearchQuery {
+	const words = query.split(/\s+/).filter((w) => w.length > 0);
+	const tokens: SearchToken[] = [];
+	const freeWords: string[] = [];
+	for (const word of words) {
+		const token = parseWord(word, context);
+		if (token) tokens.push(token);
+		else freeWords.push(word);
+	}
+	return { freeText: freeWords.join(" "), tokens };
+}
+
+/** Remove one parsed token's raw text from the original query string. */
+export function removeSearchToken(query: string, token: SearchToken): string {
+	return query
+		.split(/\s+/)
+		.filter((w) => w.length > 0 && w !== token.raw)
+		.join(" ");
+}
+
+/** Human label for the removable chip. */
+export function searchTokenLabel(token: SearchToken): string {
+	switch (token.type) {
+		case "from":
+			return `From: ${token.value}`;
+		case "hasAttachment":
+			return "Has attachment";
+		case "isUnread":
+			return "Unread";
+		case "before":
+			return `Before ${token.value}`;
+		case "after":
+			return `After ${token.value}`;
+		case "in":
+			return `In: ${token.value}`;
+		case "account":
+			return `Account: ${token.value}`;
+	}
+}

package/src/lib/telemetry-context.tsx

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+import type { Telemetry } from "./telemetry";
+import { noopTelemetry } from "./telemetry";
+
+export const TelemetryContext = createContext<Telemetry>(noopTelemetry);
+
+export function useTelemetry(): Telemetry {
+	return useContext(TelemetryContext);
+}

package/src/lib/telemetry.ts

@@ -0,0 +1,17 @@
+export interface Telemetry {
+	recordPageView(path: string): void;
+	recordError(error: Error, context?: Record<string, string>): void;
+	recordEvent(name: string, attributes?: Record<string, string>): void;
+	recordTiming(
+		name: string,
+		durationMs: number,
+		attributes?: Record<string, string>,
+	): void;
+}
+
+export const noopTelemetry: Telemetry = {
+	recordPageView: () => undefined,
+	recordError: () => undefined,
+	recordEvent: () => undefined,
+	recordTiming: () => undefined,
+};

package/src/lib/theme-preference.ts

@@ -0,0 +1,46 @@
+/**
+ * User theme preference — persistent, immediate-apply.
+ *
+ * "system" (default) follows the OS prefers-color-scheme media query.
+ * "light" / "dark" override it and survive page reloads via localStorage.
+ */
+
+export type ThemePreference = "system" | "light" | "dark";
+
+const STORAGE_KEY = "remit.theme";
+const DARK_CLASS = "dark";
+
+/** Read the stored preference; defaults to "system" if not set. */
+export function getThemePreference(): ThemePreference {
+	if (typeof localStorage === "undefined") return "system";
+	return (
+		(localStorage.getItem(STORAGE_KEY) as ThemePreference | null) ?? "system"
+	);
+}
+
+/** Apply a preference to <html> immediately, without persisting. */
+export function applyPreference(pref: ThemePreference): void {
+	if (typeof document === "undefined") return;
+	const isDark =
+		pref === "dark" ||
+		(pref === "system" &&
+			typeof window !== "undefined" &&
+			typeof window.matchMedia === "function" &&
+			window.matchMedia("(prefers-color-scheme: dark)").matches);
+	document.documentElement.classList.toggle(DARK_CLASS, isDark);
+}
+
+/**
+ * Persist the preference and apply it immediately.
+ * Passing "system" removes the key so the default kicks in.
+ */
+export function setThemePreference(pref: ThemePreference): void {
+	if (typeof localStorage !== "undefined") {
+		if (pref === "system") {
+			localStorage.removeItem(STORAGE_KEY);
+		} else {
+			localStorage.setItem(STORAGE_KEY, pref);
+		}
+	}
+	applyPreference(pref);
+}

package/src/lib/theme.ts

@@ -0,0 +1,33 @@
+import { applyPreference, getThemePreference } from "./theme-preference.js";
+
+/**
+ * installThemeSync — call once at app startup (before first paint).
+ *
+ * Reads the stored preference (see theme-preference.ts) and applies it.
+ * The matchMedia listener stays attached for the whole session and re-reads
+ * the *live* preference on each OS change: while "system" it follows the OS,
+ * while "light"/"dark" it is a no-op. This means switching System → explicit
+ * → System within one session resumes OS-following immediately, with no
+ * reload required (the listener is never detached).
+ */
+export const installThemeSync = (): void => {
+	if (typeof window === "undefined") return;
+
+	applyPreference(getThemePreference());
+
+	if (typeof window.matchMedia !== "function") return;
+
+	const media = window.matchMedia("(prefers-color-scheme: dark)");
+	const handler = (): void => {
+		// applyPreference only reacts to the OS when the live preference is
+		// "system"; an explicit light/dark choice makes this a no-op.
+		applyPreference(getThemePreference());
+	};
+
+	if (typeof media.addEventListener === "function") {
+		media.addEventListener("change", handler);
+	} else {
+		// Safari <14 fallback
+		media.addListener(handler);
+	}
+};

package/src/lib/utils.ts

@@ -0,0 +1,4 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export const cn = (...inputs: ClassValue[]) => twMerge(clsx(inputs));

package/src/main.tsx

@@ -0,0 +1,10 @@
+// Default distributor entry: composes the app shell with the combined auth
+// provider (Cognito + better-auth, selected at runtime by `config.js`). This is
+// what `@remit/web-client-dist` ships — one artifact for every deployment. A
+// single-provider deployment writes its own entry against the primitives and
+// omits the shell it does not use; see `harness/` for the reference build.
+import "./auth/cognito/cognito.css";
+import { combinedAuthProvider } from "./auth/combined-provider";
+import { mountApp } from "./shell";
+
+mountApp({ authProvider: combinedAuthProvider });