@remit/web-client 0.0.1

package/src/lib/format.ts

@@ -0,0 +1,198 @@
+/**
+ * Get the user's preferred locale from browser settings.
+ * Falls back to 'en-US' if unavailable.
+ */
+const getLocale = (): string => {
+	if (typeof navigator !== "undefined") {
+		return navigator.language || navigator.languages?.[0] || "en-US";
+	}
+	return "en-US";
+};
+
+/**
+ * Format a number according to user's locale.
+ */
+export const formatNumber = (
+	value: number,
+	options?: Intl.NumberFormatOptions,
+): string => {
+	return new Intl.NumberFormat(getLocale(), options).format(value);
+};
+
+/**
+ * Format a number as compact (1.2K, 3.4M, etc.)
+ */
+export const formatCompactNumber = (value: number): string => {
+	return formatNumber(value, { notation: "compact", compactDisplay: "short" });
+};
+
+const EPOCH_STRING = /^-?\d+$/;
+
+/**
+ * Coerce any accepted date input into a Date. An all-digit string is treated as
+ * an epoch (the Postgres read path serializes int64 columns as numeric strings);
+ * any other string goes through the normal Date parser.
+ */
+export const toDate = (value: Date | string | number): Date => {
+	if (value instanceof Date) return value;
+	if (typeof value === "number") return new Date(value);
+	if (typeof value === "string") {
+		const trimmed = value.trim();
+		if (EPOCH_STRING.test(trimmed)) return new Date(Number(trimmed));
+		return new Date(trimmed);
+	}
+	return new Date(Number.NaN);
+};
+
+const isValidDate = (date: Date): boolean => Number.isFinite(date.getTime());
+
+/**
+ * Format a date according to user's locale. A missing or unparseable date
+ * renders as an empty string instead of throwing — display must never crash the
+ * view over one bad row.
+ */
+export const formatDate = (
+	date: Date | string | number,
+	options?: Intl.DateTimeFormatOptions,
+): string => {
+	const d = toDate(date);
+	if (!isValidDate(d)) return "";
+	return new Intl.DateTimeFormat(getLocale(), options).format(d);
+};
+
+/**
+ * Format date with common presets.
+ */
+export const formatDatePreset = (
+	date: Date | string | number,
+	preset: "short" | "medium" | "long" | "full" | "time" | "datetime",
+): string => {
+	const presets: Record<typeof preset, Intl.DateTimeFormatOptions> = {
+		short: { month: "short", day: "numeric" },
+		medium: { month: "short", day: "numeric", year: "numeric" },
+		long: { month: "long", day: "numeric", year: "numeric" },
+		full: { weekday: "long", month: "long", day: "numeric", year: "numeric" },
+		time: { hour: "numeric", minute: "numeric" },
+		datetime: {
+			month: "short",
+			day: "numeric",
+			hour: "numeric",
+			minute: "numeric",
+		},
+	};
+	return formatDate(date, presets[preset]);
+};
+
+/**
+ * Format relative time (e.g., "2 hours ago", "in 3 days").
+ */
+export const formatRelativeTime = (date: Date | string | number): string => {
+	const d = toDate(date);
+	if (!isValidDate(d)) return "";
+	const rtf = new Intl.RelativeTimeFormat(getLocale(), { numeric: "auto" });
+	const now = Date.now();
+	const diff = d.getTime() - now;
+	const diffSeconds = Math.round(diff / 1000);
+	const diffMinutes = Math.round(diff / (1000 * 60));
+	const diffHours = Math.round(diff / (1000 * 60 * 60));
+	const diffDays = Math.round(diff / (1000 * 60 * 60 * 24));
+	const diffWeeks = Math.round(diff / (1000 * 60 * 60 * 24 * 7));
+
+	if (Math.abs(diffSeconds) < 60) {
+		return rtf.format(diffSeconds, "second");
+	}
+	if (Math.abs(diffMinutes) < 60) {
+		return rtf.format(diffMinutes, "minute");
+	}
+	if (Math.abs(diffHours) < 24) {
+		return rtf.format(diffHours, "hour");
+	}
+	if (Math.abs(diffDays) < 7) {
+		return rtf.format(diffDays, "day");
+	}
+	if (Math.abs(diffWeeks) < 4) {
+		return rtf.format(diffWeeks, "week");
+	}
+
+	return formatDatePreset(d, "medium");
+};
+
+/**
+ * Format email date intelligently based on age.
+ * - Today: "10:42" (time only)
+ * - Yesterday: "Yesterday"
+ * - This week: "Tuesday" (day name)
+ * - Older: "Jan 17" (or "Jan 17, 2023" if different year)
+ */
+export const formatEmailDate = (date: Date | string | number): string => {
+	const d = toDate(date);
+	if (!isValidDate(d)) return "";
+	const now = new Date();
+
+	const isToday = d.toDateString() === now.toDateString();
+
+	const yesterday = new Date(now);
+	yesterday.setDate(yesterday.getDate() - 1);
+	const isYesterday = d.toDateString() === yesterday.toDateString();
+
+	const sixDaysAgo = new Date(now);
+	sixDaysAgo.setDate(sixDaysAgo.getDate() - 6);
+	const isThisWeek = d >= sixDaysAgo && d < now;
+
+	const isThisYear = d.getFullYear() === now.getFullYear();
+
+	if (isToday) {
+		return formatDate(d, { hour: "numeric", minute: "numeric" });
+	}
+	if (isYesterday) {
+		return "Yesterday";
+	}
+	if (isThisWeek) {
+		return formatDate(d, { weekday: "long" });
+	}
+	if (isThisYear) {
+		return formatDate(d, { month: "short", day: "numeric" });
+	}
+	return formatDate(d, { month: "short", day: "numeric", year: "numeric" });
+};
+
+/**
+ * Format file size in human-readable format.
+ */
+export const formatFileSize = (bytes: number): string => {
+	const units = ["byte", "kilobyte", "megabyte", "gigabyte"] as const;
+	let unitIndex = 0;
+	let size = bytes;
+
+	while (size >= 1024 && unitIndex < units.length - 1) {
+		size /= 1024;
+		unitIndex++;
+	}
+
+	return formatNumber(size, {
+		style: "unit",
+		unit: units[unitIndex],
+		unitDisplay: "short",
+		maximumFractionDigits: 1,
+	});
+};
+
+/**
+ * Format a list of items (e.g., "Alice, Bob, and Carol").
+ */
+export const formatList = (
+	items: string[],
+	type: "conjunction" | "disjunction" = "conjunction",
+): string => {
+	return new Intl.ListFormat(getLocale(), {
+		style: "long",
+		type,
+	}).format(items);
+};
+
+/**
+ * Confirmation title for the move-to-Trash delete flow. Reflects that delete
+ * moves messages to Trash (not a permanent delete) and pluralizes on count.
+ */
+export const formatDeleteToTrashTitle = (count: number): string =>
+	count === 1 ? "Move 1 message to Trash?" : `Move ${count} messages to Trash?`;

package/src/lib/i18n.ts

@@ -0,0 +1,36 @@
+import i18n from "i18next";
+import LanguageDetector from "i18next-browser-languagedetector";
+import Backend from "i18next-http-backend";
+import { initReactI18next } from "react-i18next";
+
+i18n
+	.use(Backend)
+	.use(LanguageDetector)
+	.use(initReactI18next)
+	.init({
+		fallbackLng: "en",
+		supportedLngs: ["en", "nl", "de", "fr"],
+
+		ns: ["common", "mail", "settings", "errors"],
+		defaultNS: "common",
+
+		backend: {
+			loadPath: "/locales/{{lng}}/{{ns}}.json",
+		},
+
+		detection: {
+			order: ["navigator", "htmlTag"],
+			caches: [],
+		},
+
+		interpolation: {
+			escapeValue: false,
+		},
+
+		react: {
+			useSuspense: true,
+			bindI18n: "languageChanged loaded",
+		},
+	});
+
+export default i18n;

package/src/lib/intelligence-pref.test.ts

@@ -0,0 +1,57 @@
+import assert from "node:assert/strict";
+import { afterEach, beforeEach, describe, it } from "node:test";
+import {
+	readIntelligencePref,
+	writeIntelligencePref,
+} from "./intelligence-pref.js";
+
+const installMemoryStorage = (): void => {
+	const store = new Map<string, string>();
+	(globalThis as { localStorage?: Storage }).localStorage = {
+		getItem: (key: string) => store.get(key) ?? null,
+		setItem: (key: string, value: string) => {
+			store.set(key, value);
+		},
+		removeItem: (key: string) => {
+			store.delete(key);
+		},
+		clear: () => {
+			store.clear();
+		},
+		key: (index: number) => Array.from(store.keys())[index] ?? null,
+		get length() {
+			return store.size;
+		},
+	} as Storage;
+};
+
+describe("intelligence-pref (#782)", () => {
+	beforeEach(() => {
+		installMemoryStorage();
+	});
+
+	afterEach(() => {
+		(globalThis as { localStorage?: Storage }).localStorage = undefined;
+	});
+
+	it("defaults to open when nothing is stored", () => {
+		assert.equal(readIntelligencePref(), true);
+	});
+
+	it("honours a stored collapse", () => {
+		writeIntelligencePref(false);
+		assert.equal(readIntelligencePref(), false);
+	});
+
+	it("round-trips an explicit open", () => {
+		writeIntelligencePref(false);
+		writeIntelligencePref(true);
+		assert.equal(readIntelligencePref(), true);
+	});
+
+	it("falls back to open when storage is unavailable", () => {
+		(globalThis as { localStorage?: Storage }).localStorage = undefined;
+		assert.equal(readIntelligencePref(), true);
+		assert.doesNotThrow(() => writeIntelligencePref(false));
+	});
+});

package/src/lib/intelligence-pref.ts

@@ -0,0 +1,25 @@
+/**
+ * Persistence for the intelligence-pane open/closed preference (#782).
+ *
+ * The pane opens with the thread by default; a manual collapse sticks across
+ * sessions. Storage failures (private mode / quota) fall back to the default
+ * (open) rather than crashing.
+ */
+
+export const INTELLIGENCE_PREF_KEY = "remit:intelligence-open";
+
+export function readIntelligencePref(): boolean {
+	try {
+		return localStorage.getItem(INTELLIGENCE_PREF_KEY) !== "closed";
+	} catch {
+		return true;
+	}
+}
+
+export function writeIntelligencePref(open: boolean): void {
+	try {
+		localStorage.setItem(INTELLIGENCE_PREF_KEY, open ? "open" : "closed");
+	} catch {
+		// Storage unavailable — the in-memory default stands.
+	}
+}

package/src/lib/keymap-dispatch.test.ts

@@ -0,0 +1,178 @@
+import assert from "node:assert";
+import { describe, test } from "node:test";
+import {
+	dispatchKey,
+	type KeyStroke,
+	type SequencePrefix,
+} from "./keymap-dispatch.ts";
+
+const stroke = (partial: Partial<KeyStroke> & { key: string }): KeyStroke => ({
+	shiftKey: false,
+	metaKey: false,
+	ctrlKey: false,
+	altKey: false,
+	inEditable: false,
+	...partial,
+});
+
+const run = (
+	s: Partial<KeyStroke> & { key: string },
+	prefix: SequencePrefix = null,
+) => dispatchKey(stroke(s), prefix);
+
+describe("dispatchKey — plain bindings", () => {
+	const cases: Array<[string, string]> = [
+		["j", "focusNext"],
+		["k", "focusPrevious"],
+		["Enter", "openFocused"],
+		["u", "toggleRead"],
+		["x", "toggleSelect"],
+		["r", "reply"],
+		["a", "replyAll"],
+		["f", "forward"],
+		["#", "delete"],
+		["s", "toggleStar"],
+		["m", "muteSender"],
+		["b", "blockSender"],
+		["v", "vipSender"],
+		["!", "markJunk"],
+		["i", "toggleIntelligence"],
+		["d", "toggleDensity"],
+		["/", "focusSearch"],
+		["c", "compose"],
+		["?", "help"],
+	];
+
+	for (const [key, action] of cases) {
+		test(`'${key}' → ${action}`, () => {
+			const result = run({ key });
+			assert.strictEqual(result.action, action);
+			assert.strictEqual(result.nextPrefix, null);
+		});
+	}
+
+	test("uppercase letters match case-insensitively", () => {
+		assert.strictEqual(run({ key: "R", shiftKey: true }).action, null);
+		assert.strictEqual(run({ key: "R" }).action, "reply");
+	});
+
+	test("unknown key maps to nothing", () => {
+		assert.strictEqual(run({ key: "q" }).action, null);
+	});
+});
+
+describe("dispatchKey — input suppression", () => {
+	test("plain keys are inert in an editable surface", () => {
+		assert.strictEqual(run({ key: "j", inEditable: true }).action, null);
+		assert.strictEqual(run({ key: "e", inEditable: true }).action, null);
+		assert.strictEqual(run({ key: "c", inEditable: true }).action, null);
+	});
+
+	test("Esc is inert in an editable surface (field owns its own Esc)", () => {
+		// The layer must NOT emit `back` for Esc-while-typing: that would
+		// double-fire with SearchBar's own Esc (clear query AND close thread).
+		const result = run({ key: "Escape", inEditable: true });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.preventDefault, false);
+	});
+
+	test("Esc in an input clears a pending g prefix", () => {
+		const result = run({ key: "Escape", inEditable: true }, "g");
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.nextPrefix, null);
+	});
+
+	test("any key in an editable surface clears a pending g prefix", () => {
+		// You can't be mid-`g`-sequence while typing in a field; entering an
+		// editable surface drops any stale prefix so it can't leak back out.
+		const result = run({ key: "x", inEditable: true }, "g");
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.nextPrefix, null);
+	});
+});
+
+describe("dispatchKey — modifiers", () => {
+	test("⌘N / Ctrl+N → compose", () => {
+		assert.strictEqual(run({ key: "n", metaKey: true }).action, "compose");
+		assert.strictEqual(run({ key: "n", ctrlKey: true }).action, "compose");
+	});
+
+	test("other meta combos are left to the browser", () => {
+		assert.strictEqual(run({ key: "a", metaKey: true }).action, null);
+		assert.strictEqual(run({ key: "c", metaKey: true }).action, null);
+	});
+
+	test("Shift+J / Shift+K extend the selection", () => {
+		assert.strictEqual(
+			run({ key: "j", shiftKey: true }).action,
+			"extendSelectDown",
+		);
+		assert.strictEqual(
+			run({ key: "k", shiftKey: true }).action,
+			"extendSelectUp",
+		);
+	});
+
+	test("Shift on a letter verb suppresses it (no Shift+R reply)", () => {
+		assert.strictEqual(run({ key: "r", shiftKey: true }).action, null);
+		assert.strictEqual(run({ key: "e", shiftKey: true }).action, null);
+	});
+
+	test("Shift on a shifted-punctuation binding still fires (#, !, ?)", () => {
+		assert.strictEqual(run({ key: "#", shiftKey: true }).action, "delete");
+		assert.strictEqual(run({ key: "!", shiftKey: true }).action, "markJunk");
+		assert.strictEqual(run({ key: "?", shiftKey: true }).action, "help");
+	});
+});
+
+describe("dispatchKey — g … sequences", () => {
+	test("g arms the prefix without an action", () => {
+		const result = run({ key: "g" });
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.nextPrefix, "g");
+		assert.strictEqual(result.preventDefault, true);
+	});
+
+	const seq: Array<[string, string]> = [
+		["b", "goBrief"],
+		["i", "goInbox"],
+		["s", "goSent"],
+		["f", "goFlagged"],
+		[",", "goSettings"],
+	];
+	for (const [key, action] of seq) {
+		test(`g then '${key}' → ${action}`, () => {
+			const result = run({ key }, "g");
+			assert.strictEqual(result.action, action);
+			assert.strictEqual(result.nextPrefix, null);
+		});
+	}
+
+	test("g then an unmapped key cancels the prefix and is inert", () => {
+		const result = run({ key: "q" }, "g");
+		assert.strictEqual(result.action, null);
+		assert.strictEqual(result.nextPrefix, null);
+	});
+
+	test("Shift+G does not arm the prefix", () => {
+		assert.strictEqual(run({ key: "g", shiftKey: true }).nextPrefix, null);
+	});
+
+	test("after a sequence resolves, the next key is a plain binding again", () => {
+		const first = run({ key: "g" });
+		assert.strictEqual(first.nextPrefix, "g");
+		const second = run({ key: "j" }, first.nextPrefix);
+		// 'j' is not a go-to key → cancels, inert.
+		assert.strictEqual(second.action, null);
+		const third = run({ key: "j" }, second.nextPrefix);
+		assert.strictEqual(third.action, "focusNext");
+	});
+});
+
+describe("dispatchKey — escape", () => {
+	test("Esc maps to back and clears any prefix", () => {
+		const result = run({ key: "Escape" }, "g");
+		assert.strictEqual(result.action, "back");
+		assert.strictEqual(result.nextPrefix, null);
+	});
+});

package/src/lib/keymap-dispatch.ts

@@ -0,0 +1,187 @@
+import type { TriageAction } from "./keymap.js";
+
+/**
+ * Pure dispatch core for the global triage keyboard layer (#429).
+ *
+ * The React hook (`useTriageKeyboard`) owns DOM wiring and the handler table;
+ * this module owns the *decision* — given a normalized keystroke and the
+ * current sequence-prefix state, which {@link TriageAction} (if any) fires, and
+ * what the next sequence-prefix state is. Keeping it pure makes the routing,
+ * input suppression and `g`-prefix sequencing unit-testable without JSDOM.
+ */
+
+/** The subset of a KeyboardEvent the dispatcher reads. */
+export interface KeyStroke {
+	key: string;
+	shiftKey: boolean;
+	metaKey: boolean;
+	ctrlKey: boolean;
+	altKey: boolean;
+	/** Whether the event originated inside an editable surface. */
+	inEditable: boolean;
+}
+
+/** Pending sequence-prefix state. `"g"` means a `g` was pressed recently. */
+export type SequencePrefix = null | "g";
+
+export interface DispatchResult {
+	/** The action to run, or null when the stroke maps to nothing actionable. */
+	action: TriageAction | null;
+	/** The sequence-prefix state to carry into the next stroke. */
+	nextPrefix: SequencePrefix;
+	/** Whether the host should preventDefault on this stroke. */
+	preventDefault: boolean;
+}
+
+const NONE: DispatchResult = {
+	action: null,
+	nextPrefix: null,
+	preventDefault: false,
+};
+
+/**
+ * Second key of a `g …` go-to sequence → action. Keys are lowercased; `,`
+ * stays as-is.
+ */
+const GO_TO_SEQUENCE: Record<string, TriageAction> = {
+	b: "goBrief",
+	i: "goInbox",
+	s: "goSent",
+	f: "goFlagged",
+	",": "goSettings",
+};
+
+/**
+ * Plain single-key bindings (no meta, no `g` prefix). `shift` here means the
+ * binding *requires* shift; absence means shift must be absent.
+ */
+interface PlainBinding {
+	action: TriageAction;
+	requireShift?: boolean;
+}
+
+/**
+ * Lowercased key → binding. `event.key` is lowercased before lookup, so the
+ * shifted variants (`#`, `!`, `?`) are matched by their produced character, and
+ * letter keys ignore caps. Shift-j/k extend selection and are handled before
+ * this table.
+ */
+const PLAIN_BINDINGS: Record<string, PlainBinding> = {
+	j: { action: "focusNext" },
+	k: { action: "focusPrevious" },
+	enter: { action: "openFocused" },
+	u: { action: "toggleRead" },
+	x: { action: "toggleSelect" },
+	r: { action: "reply" },
+	a: { action: "replyAll" },
+	f: { action: "forward" },
+	"#": { action: "delete" },
+	s: { action: "toggleStar" },
+	m: { action: "muteSender" },
+	b: { action: "blockSender" },
+	v: { action: "vipSender" },
+	"!": { action: "markJunk" },
+	i: { action: "toggleIntelligence" },
+	d: { action: "toggleDensity" },
+	"/": { action: "focusSearch" },
+	c: { action: "compose" },
+	"?": { action: "help" },
+};
+
+/**
+ * Resolve a keystroke into an action and the next sequence-prefix state. Pure:
+ * no DOM, no side effects.
+ *
+ * Rules:
+ * - In an editable surface only `Esc` fires (clears any pending prefix).
+ * - `⌘N` / `Ctrl+N` → compose (the only meta combo we own).
+ * - A pending `g` prefix consumes the next key as a go-to sequence; an
+ *   unmatched second key cancels the prefix and is otherwise inert.
+ * - `g` (no modifiers) arms the prefix.
+ * - `Shift+J` / `Shift+K` extend the selection.
+ * - Otherwise a plain single-key binding fires.
+ * - Any non-Esc keystroke clears a stale prefix.
+ */
+export function dispatchKey(
+	stroke: KeyStroke,
+	prefix: SequencePrefix,
+): DispatchResult {
+	const lower = stroke.key.toLowerCase();
+	const meta = stroke.metaKey || stroke.ctrlKey;
+
+	// Editable surfaces: the layer is fully inert. Even Esc is left to the
+	// focused field's own handler (SearchBar clears the query / blurs on Esc);
+	// emitting `back` here would double-fire — clearing search AND closing the
+	// open thread on one keypress. We still clear any pending `g` prefix so a
+	// stray sequence can't leak across a focus change into the field.
+	if (stroke.inEditable) {
+		return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
+	}
+
+	// ⌘N / Ctrl+N → compose. Checked before the prefix/plain tables so the
+	// browser's "new window" is the only thing we intercept among meta combos.
+	if (meta && lower === "n") {
+		return { action: "compose", nextPrefix: null, preventDefault: true };
+	}
+
+	// Any other meta/ctrl combo is left to the browser/OS.
+	if (meta) return { ...NONE, nextPrefix: prefix === "g" ? null : prefix };
+
+	// Esc: back/close. Always clears the prefix.
+	if (lower === "escape") {
+		return { action: "back", nextPrefix: null, preventDefault: false };
+	}
+
+	// Resolve a pending `g …` sequence.
+	if (prefix === "g") {
+		const seqKey = lower === "," ? "," : lower;
+		const action = GO_TO_SEQUENCE[seqKey] ?? null;
+		// Consume the second key whether or not it matched; the prefix resets.
+		return { action, nextPrefix: null, preventDefault: action !== null };
+	}
+
+	// Arm the `g` prefix (no shift, no modifiers).
+	if (lower === "g" && !stroke.shiftKey) {
+		return { action: null, nextPrefix: "g", preventDefault: true };
+	}
+
+	// Shift+J / Shift+K extend the selection.
+	if (stroke.shiftKey && (lower === "j" || lower === "k")) {
+		return {
+			action: lower === "j" ? "extendSelectDown" : "extendSelectUp",
+			nextPrefix: null,
+			preventDefault: true,
+		};
+	}
+
+	// Plain single-key bindings.
+	const binding = PLAIN_BINDINGS[lower];
+	if (binding) {
+		const needsShift = binding.requireShift === true;
+		// `?`, `#`, `!` are produced with Shift on most layouts; their entries
+		// are keyed by the produced character so we don't gate on shift here.
+		// Plain letter bindings must NOT fire when shift is held (e.g. Shift+R).
+		const isPunctuation = lower.length === 1 && !/[a-z0-9]/.test(lower);
+		if (!needsShift && stroke.shiftKey && !isPunctuation) {
+			return NONE;
+		}
+		return { action: binding.action, nextPrefix: null, preventDefault: true };
+	}
+
+	return NONE;
+}
+
+/**
+ * Whether a DOM event target is an editable surface (input/textarea/select/
+ * contenteditable). Exposed so the hook and tests share one definition.
+ */
+export function isEditableTarget(target: EventTarget | null): boolean {
+	if (!(target instanceof HTMLElement)) return false;
+	const tag = target.tagName;
+	return (
+		tag === "INPUT" ||
+		tag === "TEXTAREA" ||
+		tag === "SELECT" ||
+		target.isContentEditable
+	);
+}