@remit/web-client 0.0.64 → 0.0.66

package/src/components/mail/organize/OrganizePanel.tsx

@@ -1,420 +0,0 @@
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import { Badge, Button, Input, Select } from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import { useMemo, useState } from "react";
-import { useCreateFilter } from "@/hooks/useFilters";
-import { useMoveMessages } from "@/hooks/useMoveMessages";
-import { useOrganizeJob } from "@/hooks/useOrganizeJob";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
-import { pickedDateToExpiresAt } from "@/lib/organize/filter-status";
-import {
-	commitButtonLabel,
-	commitDisabledReason,
-	scopeActionCount,
-	senderFallbackSummary,
-} from "@/lib/organize/organize-copy";
-import type {
-	OrganizeDraft,
-	OrganizeScope,
-} from "@/lib/organize/organize-model";
-import type { OrganizeMatchPredicate } from "@/lib/organize/sender-fallback";
-
-interface OrganizePanelProps {
-	accountId: string;
-	mailboxId: string;
-	selectedMessageIds: string[];
-	/**
-	 * The predicate the widen previewed — the semantic anchor, or the
-	 * sender-derived literal clauses when the vector pipeline is absent. Every
-	 * commit scope carries exactly this, so the previewed set equals the set the
-	 * scope acts on.
-	 */
-	matchPredicate: OrganizeMatchPredicate;
-	/** Similar messages the widen preview matched. */
-	matchedCount: number;
-	/**
-	 * Which scope is selected on open. Defaults to `all-like-these`; the
-	 * zero-match fallback and a "Something else" seed override it.
-	 */
-	initialScope?: OrganizeScope;
-	/**
-	 * Destination folder to pre-select — a "Something else" shortcut or a
-	 * plain-language input seeds this (issue #211).
-	 */
-	seedMailboxId?: string;
-	/**
-	 * The widen matched nothing, so the sentence organizes just the selection
-	 * rather than dead-ending. Changes the heading and defaults the scope to
-	 * `just-these`.
-	 */
-	fallback?: boolean;
-	/**
-	 * The server ran no semantic widen because this deployment ships no vector
-	 * pipeline. With senders to match on ({@link senders}) the widen fell back to
-	 * matching all mail from those senders; with none it organizes just the
-	 * selection. Either way the heading names the real reason, never "similar".
-	 */
-	semanticUnavailable?: boolean;
-	/**
-	 * Distinct sender addresses driving the sender fallback. Non-empty only when
-	 * {@link semanticUnavailable} and the fallback produced a literal match set;
-	 * named in the heading and folder line so the copy states the real semantics.
-	 */
-	senders?: string[];
-	onClose: () => void;
-}
-
-const SCOPE_OPTIONS: { id: OrganizeScope; label: string; caption: string }[] = [
-	{
-		id: "just-these",
-		label: "Just these",
-		caption: "the ones you selected",
-	},
-	{
-		id: "all-like-these",
-		label: "All like these",
-		caption: "including the similar ones found now",
-	},
-	{
-		id: "standing",
-		label: "These and new mail like this",
-		caption: "keeps working on future mail",
-	},
-	{
-		id: "temporary",
-		label: "Until a date",
-		caption: "stops on its own",
-	},
-];
-
-export function OrganizePanel({
-	accountId,
-	mailboxId,
-	selectedMessageIds,
-	matchPredicate,
-	matchedCount,
-	initialScope,
-	seedMailboxId,
-	fallback = false,
-	semanticUnavailable = false,
-	senders = [],
-	onClose,
-}: OrganizePanelProps) {
-	// The vector pipeline is absent but the selection has senders to match on:
-	// the widen fell back to sender matching, which produces a real widened set
-	// the commit scopes reach — unlike a missing or empty widen.
-	const senderFallback = semanticUnavailable && senders.length > 0;
-	// A missing widen and an empty widen both organize just the selection; only
-	// the heading distinguishes them. The sender fallback is a real widen.
-	const noWiden = (fallback || semanticUnavailable) && !senderFallback;
-	const [scope, setScope] = useState<OrganizeScope>(
-		initialScope ?? (noWiden ? "just-these" : "all-like-these"),
-	);
-	const [moveMailboxId, setMoveMailboxId] = useState<string>(
-		seedMailboxId ?? "",
-	);
-	const [name, setName] = useState("");
-	const [pickedDate, setPickedDate] = useState("");
-
-	const { data: mailboxesData } = useQuery({
-		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-		staleTime: Infinity,
-	});
-
-	const folderOptions = useMemo(() => {
-		const targets = buildMoveTargets(mailboxesData?.items ?? []);
-		return targets.map((mailbox) => ({
-			id: mailbox.mailboxId,
-			label: getMailboxDisplayName(mailbox.fullPath),
-		}));
-	}, [mailboxesData?.items]);
-
-	const draft: OrganizeDraft = useMemo(
-		() => ({
-			...matchPredicate,
-			moveMailboxId: moveMailboxId || undefined,
-			expiresAt:
-				scope === "temporary" ? pickedDateToExpiresAt(pickedDate) : undefined,
-		}),
-		[matchPredicate, moveMailboxId, scope, pickedDate],
-	);
-
-	const { moveMessages } = useMoveMessages({ mailboxId, accountId });
-	const organizeJob = useOrganizeJob(accountId);
-	const createFilter = useCreateFilter(accountId);
-
-	const selectionCount = selectedMessageIds.length;
-	const actionCount = scopeActionCount(scope, selectionCount, matchedCount);
-
-	const disabledReason = commitDisabledReason({
-		draft,
-		scope,
-		name,
-		pickedDate,
-	});
-
-	const handleCommit = () => {
-		if (disabledReason) return;
-		switch (scope) {
-			case "just-these":
-				if (moveMailboxId) moveMessages(selectedMessageIds, moveMailboxId);
-				onClose();
-				return;
-			case "all-like-these":
-				organizeJob.start(draft);
-				return;
-			case "standing":
-				createFilter.createFilter(draft, "standing", name.trim());
-				return;
-			case "temporary":
-				createFilter.createFilter(draft, "temporary", name.trim());
-				return;
-		}
-	};
-
-	if (organizeJob.isRunning || organizeJob.isDone) {
-		return (
-			<JobProgress
-				progress={organizeJob.progress}
-				isDone={organizeJob.isDone}
-				senderFallback={senderFallback}
-				onClose={onClose}
-			/>
-		);
-	}
-
-	if (createFilter.isSuccess) {
-		return (
-			<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-				<CheckCircle2 className="size-8 text-positive" />
-				<p className="text-sm font-medium text-fg">Filter saved</p>
-				<p className="max-w-xs text-xs text-fg-muted">
-					You can see it, and when it expires, under Settings › Filters.
-				</p>
-				<Button variant="primary" onClick={onClose} className="mt-2">
-					Done
-				</Button>
-			</div>
-		);
-	}
-
-	const needsName = scope === "standing" || scope === "temporary";
-
-	return (
-		<div className="flex min-h-0 flex-col">
-			<div className="border-b border-line px-5 py-3">
-				<h2 className="text-sm font-semibold text-fg">Organize</h2>
-				<p className="mt-0.5 text-xs text-fg-muted">
-					{senderFallback
-						? `${senderFallbackSummary(senders)} ${matchedCount} match${
-								matchedCount === 1 ? "" : "es"
-							}.`
-						: semanticUnavailable
-							? `Finding similar mail isn't available on this server — organizing just your ${selectionCount} selected.`
-							: fallback
-								? `No similar messages found — organizing just your ${selectionCount} selected.`
-								: `${matchedCount} similar message${matchedCount === 1 ? "" : "s"} found${
-										selectionCount > 0 ? ` from ${selectionCount} selected` : ""
-									}.`}
-				</p>
-			</div>
-
-			<div className="min-h-0 flex-1 space-y-5 overflow-y-auto px-5 py-4">
-				<section className="space-y-2 rounded-lg border border-line bg-surface-sunken p-3">
-					<p className="text-sm leading-relaxed text-fg-muted">
-						{scope === "standing" && (
-							<span className="font-semibold text-fg">Always keep </span>
-						)}
-						{scope === "standing" ? "" : "Keep "}
-						{scope === "just-these"
-							? "these"
-							: senderFallback
-								? "mail from these senders"
-								: "emails like these"}{" "}
-						in
-					</p>
-					<Select
-						aria-label="Destination folder"
-						value={moveMailboxId}
-						onChange={(e) => setMoveMailboxId(e.target.value)}
-					>
-						<option value="">Choose a folder…</option>
-						{folderOptions.map((option) => (
-							<option key={option.id} value={option.id}>
-								{option.label}
-							</option>
-						))}
-					</Select>
-
-					<div className="flex items-center gap-2 pt-1">
-						<Badge tone="neutral">label them…</Badge>
-						<span className="text-2xs text-fg-subtle">
-							Labeling isn't available yet — arrives with mail-labeling (RFC
-							031).
-						</span>
-					</div>
-				</section>
-
-				<section className="space-y-1.5">
-					{SCOPE_OPTIONS.map((option) => {
-						const active = scope === option.id;
-						const caption =
-							senderFallback && option.id === "all-like-these"
-								? "including others from these senders"
-								: option.caption;
-						return (
-							<button
-								key={option.id}
-								type="button"
-								onClick={() => setScope(option.id)}
-								className={`flex w-full items-start gap-3 rounded-lg border px-3 py-2.5 text-left transition-colors ${
-									active
-										? "border-accent-2 bg-accent-2-soft"
-										: "border-line bg-surface hover:bg-surface-sunken"
-								}`}
-							>
-								<span
-									className={`mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border ${
-										active
-											? "border-accent-2 bg-accent-2"
-											: "border-line bg-surface"
-									}`}
-								>
-									{active && (
-										<span className="size-1.5 rounded-full bg-white" />
-									)}
-								</span>
-								<span className="min-w-0">
-									<span
-										className={`block text-sm font-medium ${
-											active ? "text-accent-2" : "text-fg"
-										}`}
-									>
-										{option.label}
-									</span>
-									<span className="block text-xs text-fg-subtle">
-										{caption}
-									</span>
-								</span>
-							</button>
-						);
-					})}
-				</section>
-
-				{needsName && (
-					<section className="space-y-2">
-						<Input
-							value={name}
-							onChange={(e) => setName(e.target.value)}
-							placeholder="Name this filter (e.g. Travel)"
-							aria-label="Filter name"
-						/>
-						{scope === "temporary" && (
-							<label className="flex items-center gap-2 text-xs text-fg-muted">
-								Until
-								<input
-									type="date"
-									value={pickedDate}
-									onChange={(e) => setPickedDate(e.target.value)}
-									aria-label="Expiry date"
-									className="rounded-md border border-line bg-surface-sunken px-2 py-1 text-sm text-fg"
-								/>
-							</label>
-						)}
-					</section>
-				)}
-			</div>
-
-			<div className="space-y-2 border-t border-line px-5 py-3">
-				{disabledReason && (
-					// biome-ignore lint/a11y/useSemanticElements: <p> with role="status" keeps block layout; <output> is inline
-					<p className="text-xs text-fg-subtle" role="status">
-						{disabledReason}
-					</p>
-				)}
-				{createFilter.isError && (
-					<p className="text-xs text-danger" role="alert">
-						Couldn't save the filter. Please try again.
-					</p>
-				)}
-				<Button
-					variant="primary"
-					onClick={handleCommit}
-					disabled={
-						!!disabledReason || createFilter.isPending || organizeJob.isStarting
-					}
-					className="w-full"
-				>
-					{createFilter.isPending
-						? "Saving…"
-						: commitButtonLabel(scope, actionCount)}
-				</Button>
-				<Button variant="ghost" onClick={onClose} className="w-full">
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-function JobProgress({
-	progress,
-	isDone,
-	senderFallback,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	senderFallback: boolean;
-	onClose: () => void;
-}) {
-	const failed = progress.state === "Failed";
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			{!isDone ? (
-				<Loader2 className="size-8 animate-spin text-accent-2" />
-			) : failed ? (
-				<span className="text-sm font-semibold text-danger">
-					Organize failed
-				</span>
-			) : (
-				<CheckCircle2 className="size-8 text-positive" />
-			)}
-
-			{!isDone && (
-				<p className="text-sm font-medium text-fg">
-					{senderFallback
-						? "Organizing mail from these senders…"
-						: "Organizing similar mail…"}
-				</p>
-			)}
-
-			{isDone && !failed && (
-				<div className="text-sm text-fg">
-					<p className="font-medium">Done</p>
-					<p className="mt-1 text-xs text-fg-muted">
-						{progress.appliedCount} of {progress.matchedCount} moved
-						{progress.failedCount > 0
-							? ` · ${progress.failedCount} failed`
-							: ""}
-						.
-					</p>
-				</div>
-			)}
-
-			{isDone && failed && (
-				<p className="max-w-xs text-xs text-fg-muted">
-					{progress.errorMessage || "Something went wrong. Please try again."}
-				</p>
-			)}
-
-			{isDone && (
-				<Button variant="primary" onClick={onClose} className="mt-2">
-					Done
-				</Button>
-			)}
-		</div>
-	);
-}

package/src/lib/organize/organize-copy.test.ts

@@ -1,134 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import {
-	commitButtonLabel,
-	commitDisabledReason,
-	formatSenderList,
-	scopeActionCount,
-	senderFallbackSummary,
-} from "./organize-copy";
-import type { OrganizeDraft } from "./organize-model";
-
-const draft = (overrides: Partial<OrganizeDraft> = {}): OrganizeDraft => ({
-	matchOperator: "And",
-	literalClauses: [],
-	...overrides,
-});
-
-describe("commitDisabledReason", () => {
-	it("blocks with a labeling explanation when no folder is chosen", () => {
-		const reason = commitDisabledReason({
-			draft: draft(),
-			scope: "just-these",
-			name: "",
-			pickedDate: "",
-		});
-		assert.match(reason ?? "", /Pick a folder/);
-	});
-
-	it("requires a name for a standing filter", () => {
-		const reason = commitDisabledReason({
-			draft: draft({ moveMailboxId: "mbx-1" }),
-			scope: "standing",
-			name: "  ",
-			pickedDate: "",
-		});
-		assert.match(reason ?? "", /Name this filter/);
-	});
-
-	it("requires a date for a temporary filter", () => {
-		const reason = commitDisabledReason({
-			draft: draft({ moveMailboxId: "mbx-1" }),
-			scope: "temporary",
-			name: "Trip",
-			pickedDate: "",
-		});
-		assert.match(reason ?? "", /Pick the date/);
-	});
-
-	it("is undefined when a move target is set for a one-time scope", () => {
-		assert.equal(
-			commitDisabledReason({
-				draft: draft({ moveMailboxId: "mbx-1" }),
-				scope: "all-like-these",
-				name: "",
-				pickedDate: "",
-			}),
-			undefined,
-		);
-	});
-
-	it("is undefined for a fully-specified temporary filter", () => {
-		assert.equal(
-			commitDisabledReason({
-				draft: draft({ moveMailboxId: "mbx-1" }),
-				scope: "temporary",
-				name: "Trip",
-				pickedDate: "2026-07-16",
-			}),
-			undefined,
-		);
-	});
-});
-
-describe("commitButtonLabel", () => {
-	it("pluralizes the one-time labels", () => {
-		assert.equal(commitButtonLabel("just-these", 1), "Move 1 message");
-		assert.equal(
-			commitButtonLabel("all-like-these", 48),
-			"Organize 48 messages",
-		);
-	});
-
-	it("uses standing copy for the persisted scopes", () => {
-		assert.equal(commitButtonLabel("standing", 48), "Always do this");
-		assert.equal(commitButtonLabel("temporary", 48), "Do this until then");
-	});
-});
-
-describe("scopeActionCount", () => {
-	it("uses the selection for just-these and the match set otherwise", () => {
-		assert.equal(scopeActionCount("just-these", 3, 48), 3);
-		assert.equal(scopeActionCount("all-like-these", 3, 48), 48);
-		assert.equal(scopeActionCount("standing", 3, 48), 48);
-	});
-});
-
-describe("formatSenderList", () => {
-	it("names a single sender bare", () => {
-		assert.equal(formatSenderList(["npm@github.com"]), "npm@github.com");
-	});
-
-	it("joins a couple with 'and'", () => {
-		assert.equal(
-			formatSenderList(["a@x.com", "b@y.com"]),
-			"a@x.com and b@y.com",
-		);
-	});
-
-	it("lists up to three in full", () => {
-		assert.equal(
-			formatSenderList(["a@x.com", "b@y.com", "c@z.com"]),
-			"a@x.com, b@y.com and c@z.com",
-		);
-	});
-
-	it("truncates past three, summing the rest", () => {
-		assert.equal(
-			formatSenderList(["a@x.com", "b@y.com", "c@z.com", "d@w.com"]),
-			"a@x.com, b@y.com, c@z.com and 1 other",
-		);
-		assert.equal(
-			formatSenderList(["a@x.com", "b@y.com", "c@z.com", "d@w.com", "e@v.com"]),
-			"a@x.com, b@y.com, c@z.com and 2 others",
-		);
-	});
-});
-
-describe("senderFallbackSummary", () => {
-	it("states it is matching all mail from the senders, never 'similar'", () => {
-		const summary = senderFallbackSummary(["npm@github.com"]);
-		assert.match(summary, /isn't available on this server/);
-		assert.match(summary, /matching all mail from npm@github\.com instead/);
-	});
-});

package/src/lib/organize/organize-copy.ts

@@ -1,90 +0,0 @@
-import type { OrganizeScope } from "./organize-model";
-import { hasCommittableAction, type OrganizeDraft } from "./organize-model";
-
-export interface CommitContext {
-	draft: OrganizeDraft;
-	scope: OrganizeScope;
-	/** The filter name, required for the two standing scopes. */
-	name: string;
-	/** The raw picked date (`YYYY-MM-DD`), required for the temporary scope. */
-	pickedDate: string;
-}
-
-/**
- * Why the commit button is disabled, or `undefined` when it is actionable.
- * Never disable a control without saying why (ux.md), so the caller renders
- * this string next to the button.
- */
-export const commitDisabledReason = ({
-	draft,
-	scope,
-	name,
-	pickedDate,
-}: CommitContext): string | undefined => {
-	if (!hasCommittableAction(draft)) {
-		return "Pick a folder to move these into — labeling isn't available yet.";
-	}
-	if ((scope === "standing" || scope === "temporary") && name.trim() === "") {
-		return "Name this filter so you can find it later.";
-	}
-	if (scope === "temporary" && pickedDate === "") {
-		return "Pick the date this should stop on.";
-	}
-	return undefined;
-};
-
-/** The commit button label for each scope. */
-export const commitButtonLabel = (
-	scope: OrganizeScope,
-	matchedTotal: number,
-): string => {
-	switch (scope) {
-		case "just-these":
-			return `Move ${matchedTotal} message${matchedTotal === 1 ? "" : "s"}`;
-		case "all-like-these":
-			return `Organize ${matchedTotal} message${matchedTotal === 1 ? "" : "s"}`;
-		case "standing":
-			return "Always do this";
-		case "temporary":
-			return "Do this until then";
-	}
-};
-
-/**
- * The count a scope acts on: the current selection for "just these", the
- * widened match set for every scope that reaches similar mail.
- */
-export const scopeActionCount = (
-	scope: OrganizeScope,
-	selectionCount: number,
-	matchedCount: number,
-): number => (scope === "just-these" ? selectionCount : matchedCount);
-
-/** How many sender addresses are named before the rest are summed as "N others". */
-const MAX_SENDERS_SHOWN = 3;
-
-/**
- * The sender addresses read out in prose: all of them when there are a few, or
- * the first {@link MAX_SENDERS_SHOWN} and a count of the rest so a long selection
- * stays legible in the sheet.
- */
-export const formatSenderList = (senders: readonly string[]): string => {
-	if (senders.length === 0) return "these senders";
-	if (senders.length === 1) return senders[0];
-	if (senders.length <= MAX_SENDERS_SHOWN) {
-		return `${senders.slice(0, -1).join(", ")} and ${senders[senders.length - 1]}`;
-	}
-	const shown = senders.slice(0, MAX_SENDERS_SHOWN);
-	const rest = senders.length - MAX_SENDERS_SHOWN;
-	return `${shown.join(", ")} and ${rest} other${rest === 1 ? "" : "s"}`;
-};
-
-/**
- * The heading when the widen fell back to sender matching (no vector pipeline on
- * this server). States the actual semantics — matching every mail from these
- * senders — and never claims semantic similarity.
- */
-export const senderFallbackSummary = (senders: readonly string[]): string =>
-	`Similar-mail matching isn't available on this server — matching all mail from ${formatSenderList(
-		senders,
-	)} instead.`;