@remit/web-client 0.0.92 → 0.0.94

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

@@ -1,136 +0,0 @@
-import { mailboxOperationsListMailboxesOptions } from "@remit/api-http-client/@tanstack/react-query.gen.ts";
-import {
-	buildSearchRule,
-	type FilterRule,
-	FilterRuleEditor,
-	type FolderOption,
-	type SearchConversion,
-	SearchConversionNoticeView,
-} from "@remit/ui";
-import { useQuery } from "@tanstack/react-query";
-import { useMemo, useState } from "react";
-import { useCreateFilter } from "@/hooks/useFilters";
-import { useOrganizeJob } from "@/hooks/useOrganizeJob";
-import { useRuleEditorState } from "@/hooks/useRuleEditorState";
-import { useRulePreview } from "@/hooks/useRulePreview";
-import { getMailboxDisplayName } from "@/lib/folder-roles";
-import { buildMoveTargets } from "@/lib/move-targets";
-import {
-	rulePredicate,
-	ruleToDraft,
-	SUPPORTED_CLAUSE_FIELDS,
-} from "@/lib/organize/rule-model";
-import {
-	CommitError,
-	FilterSaved,
-	JobProgress,
-	SavingState,
-} from "./rule-editor-states";
-
-interface SearchFilterEditorProps {
-	/** The account the filter is created for (an `account:` facet, else the active account). */
-	accountId: string;
-	/** The converted search — its clauses seed the rule, its drops seed the notice. */
-	conversion: SearchConversion;
-	/**
-	 * The converted literal predicate's live count, seeding the editor without a
-	 * re-fetch. Absent when the predicate is one the vector-free matcher refuses —
-	 * a `HasWords` clause from the search's free text — in which case the count
-	 * region says so and the one-time apply is held; saving it as a standing rule
-	 * still works, since the index-time matcher does read message bodies.
-	 */
-	seedCount?: number;
-	onClose: () => void;
-}
-
-/**
- * The filter-from-search surface as the chip editor (RFC 038 D5). The current
- * search's literal terms and facets arrive already converted to clauses; this
- * opens the shared rule editor pre-filled on them, over the same preview/apply
- * endpoints as Organize. The conversion notice states what the search carried
- * that the filter cannot — a folder scope, non-clause facets, semantic reach.
- *
- * A search-derived rule has no message anchor, so the semantic widen chip is not
- * offered here (its loss, where the deployment could have served it, is the
- * notice's job). The commit gate is the same: the count on screen is the literal
- * set a commit acts on.
- */
-export function SearchFilterEditor({
-	accountId,
-	conversion,
-	seedCount,
-	onClose,
-}: SearchFilterEditorProps) {
-	const [initialRule] = useState<FilterRule>(() => buildSearchRule(conversion));
-	const { rule, handlers } = useRuleEditorState({ initialRule });
-
-	const { data: mailboxesData } = useQuery({
-		...mailboxOperationsListMailboxesOptions({ path: { accountId } }),
-		staleTime: Number.POSITIVE_INFINITY,
-	});
-
-	const folders: FolderOption[] = useMemo(
-		() =>
-			buildMoveTargets(mailboxesData?.items ?? []).map((mailbox) => ({
-				id: mailbox.mailboxId,
-				label: getMailboxDisplayName(mailbox.fullPath),
-			})),
-		[mailboxesData?.items],
-	);
-
-	const preview = useRulePreview(accountId, rulePredicate(rule), seedCount);
-
-	const organizeJob = useOrganizeJob(accountId);
-	const createFilter = useCreateFilter(accountId);
-
-	const commit = () => {
-		const draft = ruleToDraft(rule);
-		if (rule.scope === "once") {
-			organizeJob.start(draft);
-			return;
-		}
-		createFilter.createFilter(
-			draft,
-			rule.scope === "standing" ? "standing" : "temporary",
-			(rule.name ?? "").trim(),
-		);
-	};
-
-	if (organizeJob.isStarting || organizeJob.isRunning || organizeJob.isDone) {
-		return (
-			<JobProgress
-				progress={organizeJob.progress}
-				isDone={organizeJob.isDone}
-				runningLabel="Organizing your mail…"
-				onClose={onClose}
-			/>
-		);
-	}
-
-	if (createFilter.isPending) return <SavingState />;
-	if (createFilter.isSuccess) return <FilterSaved onClose={onClose} />;
-	if (createFilter.isError)
-		return <CommitError onRetry={createFilter.reset} onClose={onClose} />;
-
-	return (
-		<FilterRuleEditor
-			rule={rule}
-			folders={folders}
-			preview={preview}
-			notice={
-				<SearchConversionNoticeView
-					notice={{
-						scopedOutFolder: conversion.scopedOut?.label,
-						droppedFacets: conversion.droppedFacets.map((facet) => facet.label),
-						droppedSemantic: conversion.droppedSemantic,
-					}}
-				/>
-			}
-			semanticAvailable={false}
-			clauseFields={SUPPORTED_CLAUSE_FIELDS}
-			{...handlers}
-			onCommit={commit}
-			onCancel={onClose}
-		/>
-	);
-}

package/src/components/mail/organize/SomethingElsePanel.render.test.ts

@@ -1,54 +0,0 @@
-import assert from "node:assert/strict";
-import { describe, it } from "node:test";
-import React, { createElement } from "react";
-import { renderToString } from "react-dom/server";
-import type { OrganizeSeed } from "@/lib/organize/mobile-organize-flow";
-import { type FolderOption, SomethingElsePanel } from "./SomethingElsePanel";
-
-// The node test loader transpiles remit-ui's `.tsx` with the classic JSX
-// runtime, which references a global `React`. Vite uses the automatic runtime,
-// so this shim only exists for the SSR test harness.
-(globalThis as { React?: typeof React }).React = React;
-
-const FOLDERS: FolderOption[] = [
-	{ id: "mbx-inbox", label: "Inbox" },
-	{ id: "mbx-archive", label: "Archive" },
-	{ id: "mbx-junk", label: "Spam" },
-];
-
-const render = (
-	folderOptions: FolderOption[] = FOLDERS,
-	junkMailboxId?: string,
-) =>
-	renderToString(
-		createElement(SomethingElsePanel, {
-			folderOptions,
-			junkMailboxId,
-			onSeed: (_seed: OrganizeSeed) => undefined,
-		}) as never,
-	);
-
-describe("SomethingElsePanel", () => {
-	it("shows the plain-language prompt and input", () => {
-		const html = render();
-		assert.match(html, /What should Remit do\?/);
-		assert.match(html, /Tell Remit what to do/);
-	});
-
-	it("derives shortcuts from the account's real folders", () => {
-		const html = render();
-		assert.match(html, /Always keep in Inbox/);
-		assert.match(html, /File in Archive/);
-	});
-
-	it("offers the appointed Junk mailbox by its own label", () => {
-		const html = render(FOLDERS, "mbx-junk");
-		assert.match(html, /Move to Spam/);
-	});
-
-	it("offers no folder shortcuts when the account has none", () => {
-		const html = render([]);
-		assert.doesNotMatch(html, /Always keep in Inbox/);
-		assert.doesNotMatch(html, /File in Archive/);
-	});
-});

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

@@ -1,159 +0,0 @@
-import { Button, Input } from "@remit/ui";
-import { ArrowUp } from "lucide-react";
-import { useMemo, useState } from "react";
-import type { OrganizeSeed } from "@/lib/organize/mobile-organize-flow";
-
-export interface FolderOption {
-	id: string;
-	label: string;
-}
-
-interface SomethingElsePanelProps {
-	/** The account's move destinations, the same set the sentence's folder picker uses. */
-	folderOptions: FolderOption[];
-	/** The appointed Junk mailbox, offered as a shortcut when present. */
-	junkMailboxId?: string;
-	/** Chosen shortcut or parsed input — seeds the organize sentence's folder/scope. */
-	onSeed: (seed: OrganizeSeed) => void;
-}
-
-interface Shortcut {
-	id: string;
-	label: string;
-	seed: OrganizeSeed;
-}
-
-const findFolder = (
-	folderOptions: FolderOption[],
-	label: string,
-): FolderOption | undefined =>
-	folderOptions.find((folder) => folder.label.toLowerCase() === label);
-
-/**
- * Shortcuts are derived from the account's real folders — there is no
- * suggestion endpoint, so the panel offers the moves it can actually commit:
- * keep it in the Inbox as a standing rule, file it in Archive, or send it to
- * the appointed Junk mailbox. Each seeds the organize sentence; the user still
- * confirms the scope.
- */
-const buildShortcuts = (
-	folderOptions: FolderOption[],
-	junkMailboxId: string | undefined,
-): Shortcut[] => {
-	const shortcuts: Shortcut[] = [];
-	const inbox = findFolder(folderOptions, "inbox");
-	if (inbox) {
-		shortcuts.push({
-			id: "keep-inbox",
-			label: "Always keep in Inbox",
-			seed: { moveMailboxId: inbox.id, scope: "standing" },
-		});
-	}
-	const archive = findFolder(folderOptions, "archive");
-	if (archive) {
-		shortcuts.push({
-			id: "file-archive",
-			label: "File in Archive",
-			seed: { moveMailboxId: archive.id },
-		});
-	}
-	const junk = junkMailboxId
-		? folderOptions.find((folder) => folder.id === junkMailboxId)
-		: undefined;
-	if (junk) {
-		shortcuts.push({
-			id: "move-junk",
-			label: `Move to ${junk.label}`,
-			seed: { moveMailboxId: junk.id },
-		});
-	}
-	return shortcuts;
-};
-
-/**
- * Reads a plain-language instruction into a seed without an NLP endpoint: it
- * matches the typed words against the account's own folder names and reads an
- * "always"/"keep" phrasing as the standing scope. Whatever it can't resolve to
- * a folder still opens the sentence, where the picker is one tap away — never a
- * dead end.
- */
-const parseInstruction = (
-	text: string,
-	folderOptions: FolderOption[],
-): OrganizeSeed => {
-	const lower = text.toLowerCase();
-	const folder = folderOptions.find((option) =>
-		lower.includes(option.label.toLowerCase()),
-	);
-	const standing = /\b(always|keep|future|from now)\b/.test(lower);
-	return {
-		moveMailboxId: folder?.id,
-		scope: standing ? "standing" : undefined,
-	};
-};
-
-/**
- * The "Something else" fallback (issue #211): smart shortcuts plus a
- * plain-language input, both of which seed the organize sentence's folder and
- * scope. Presentational — the flow owns the folder data and what a seed does.
- */
-export function SomethingElsePanel({
-	folderOptions,
-	junkMailboxId,
-	onSeed,
-}: SomethingElsePanelProps) {
-	const [text, setText] = useState("");
-	const shortcuts = useMemo(
-		() => buildShortcuts(folderOptions, junkMailboxId),
-		[folderOptions, junkMailboxId],
-	);
-
-	const submit = () => {
-		const trimmed = text.trim();
-		if (!trimmed) return;
-		onSeed(parseInstruction(trimmed, folderOptions));
-	};
-
-	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">What should Remit do?</h2>
-				<p className="mt-0.5 text-xs text-fg-muted">
-					Pick a shortcut or say it in your own words.
-				</p>
-			</div>
-
-			<div className="min-h-0 flex-1 space-y-2 overflow-y-auto px-5 py-4">
-				{shortcuts.map((shortcut) => (
-					<Button
-						key={shortcut.id}
-						variant="secondary"
-						onClick={() => onSeed(shortcut.seed)}
-						className="h-12 w-full justify-start px-4"
-					>
-						{shortcut.label}
-					</Button>
-				))}
-			</div>
-
-			<div className="flex items-center gap-2 border-t border-line px-5 py-3">
-				<Input
-					value={text}
-					onChange={(event) => setText(event.target.value)}
-					onKeyDown={(event) => event.key === "Enter" && submit()}
-					placeholder="Tell Remit what to do…"
-					aria-label="Tell Remit what to do"
-					className="flex-1"
-				/>
-				<Button
-					variant="primary"
-					aria-label="Send"
-					onClick={submit}
-					disabled={!text.trim()}
-					icon={<ArrowUp className="size-4" />}
-					className="size-9 shrink-0 px-0"
-				/>
-			</div>
-		</div>
-	);
-}

package/src/components/mail/organize/rule-editor-states.stories.tsx

@@ -1,147 +0,0 @@
-import { BottomSheet } from "@remit/ui";
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import type { ReactNode } from "react";
-import {
-	BackApplyError,
-	CommitError,
-	FilterSaved,
-	JobProgress,
-	SavingState,
-} from "./rule-editor-states";
-
-/**
- * `Flows/Smart Organize/Rule editor states` — the non-editing states the rule
- * editor lands in after a commit, rendered from the real components the Organize
- * surface mounts. Creating a standing filter now runs the retroactive back-apply,
- * so a standing save flows Saving → back-apply in flight → done, the same job
- * states the one-time apply reaches. Every state here is what ships, so the flow
- * cannot drift from the story.
- */
-
-function SheetStage({ children }: { children: ReactNode }) {
-	return (
-		<div className="relative mx-auto h-dvh w-full shrink-0 overflow-hidden bg-surface sm:my-6 sm:h-[520px] sm:w-[390px] sm:rounded-[2rem] sm:border sm:border-line sm:shadow-sm">
-			<BottomSheet open onClose={() => undefined}>
-				{children}
-			</BottomSheet>
-		</div>
-	);
-}
-
-const meta: Meta = {
-	title: "Flows/Smart Organize/Rule editor states",
-	parameters: { layout: "fullscreen" },
-};
-export default meta;
-
-type Story = StoryObj;
-
-/** Saving the filter — held while the create request is in flight. */
-export const Saving: Story = {
-	render: () => (
-		<SheetStage>
-			<SavingState />
-		</SheetStage>
-	),
-};
-
-/**
- * The back-apply running after a standing filter is created — the pass that
- * reaches the mail already in the mailbox, not only the mail that arrives next.
- */
-export const BackApplyInFlight: Story = {
-	name: "Back-apply in flight",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Running",
-					matchedCount: 24,
-					appliedCount: 0,
-					failedCount: 0,
-					errorMessage: "",
-				}}
-				isDone={false}
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/** The back-apply finished — the count moved is stated plainly. */
-export const BackApplyDone: Story = {
-	name: "Back-apply done",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Complete",
-					matchedCount: 24,
-					appliedCount: 24,
-					failedCount: 0,
-					errorMessage: "",
-				}}
-				isDone
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/** The back-apply failed — the rule is still saved, the move is what did not run. */
-export const BackApplyFailed: Story = {
-	name: "Back-apply failed",
-	render: () => (
-		<SheetStage>
-			<JobProgress
-				progress={{
-					state: "Failed",
-					matchedCount: 24,
-					appliedCount: 6,
-					failedCount: 18,
-					errorMessage: "Could not reach the mail server. Please try again.",
-				}}
-				isDone
-				runningLabel="Organizing mail from these senders…"
-				onClose={() => undefined}
-			/>
-		</SheetStage>
-	),
-};
-
-/**
- * The filter saved, but the back-apply's own request never got off the ground
- * (a 5xx or dropped connection on start). The rule is live for new mail; moving
- * the existing mail is what failed, and it is offered again — never swallowed
- * behind a plain "saved".
- */
-export const BackApplyStartFailed: Story = {
-	name: "Back-apply start failed",
-	render: () => (
-		<SheetStage>
-			<BackApplyError onRetry={() => undefined} onClose={() => undefined} />
-		</SheetStage>
-	),
-};
-
-/** The filter saved with nothing to back-apply — the plain confirmation. */
-export const FilterSavedState: Story = {
-	name: "Filter saved",
-	render: () => (
-		<SheetStage>
-			<FilterSaved onClose={() => undefined} />
-		</SheetStage>
-	),
-};
-
-/** The create failed — retry or dismiss. */
-export const CommitFailed: Story = {
-	name: "Commit failed",
-	render: () => (
-		<SheetStage>
-			<CommitError onRetry={() => undefined} onClose={() => undefined} />
-		</SheetStage>
-	),
-};

package/src/components/mail/organize/rule-editor-states.tsx

@@ -1,139 +0,0 @@
-import { Button } from "@remit/ui";
-import { CheckCircle2, Loader2 } from "lucide-react";
-import type { useOrganizeJob } from "@/hooks/useOrganizeJob";
-
-/**
- * The non-editing states a filter-rule editor lands in after commit, shared by
- * the Organize and filter-from-search surfaces so a back-apply job, a saved
- * standing rule, and a commit failure read identically wherever the rule was
- * authored (RFC 038 D1).
- */
-
-export function JobProgress({
-	progress,
-	isDone,
-	runningLabel,
-	onClose,
-}: {
-	progress: ReturnType<typeof useOrganizeJob>["progress"];
-	isDone: boolean;
-	/** In-flight copy — the caller names what it is organizing. */
-	runningLabel: string;
-	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">{runningLabel}</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>
-	);
-}
-
-export function SavingState() {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-10 text-center">
-			<Loader2 className="size-8 animate-spin text-accent-2" />
-			<p className="text-sm font-medium text-fg">Saving rule…</p>
-		</div>
-	);
-}
-
-export function FilterSaved({ onClose }: { onClose: () => void }) {
-	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>
-	);
-}
-
-export function BackApplyError({
-	onRetry,
-	onClose,
-}: {
-	onRetry: () => void;
-	onClose: () => void;
-}) {
-	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">Rule saved</p>
-			<p className="max-w-xs text-xs text-fg-muted">
-				New mail follows it automatically. Moving the mail already in your
-				mailbox didn't run — try again?
-			</p>
-			<div className="mt-2 flex gap-2">
-				<Button variant="primary" onClick={onRetry}>
-					Move existing mail
-				</Button>
-				<Button variant="ghost" onClick={onClose}>
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}
-
-export function CommitError({
-	onRetry,
-	onClose,
-}: {
-	onRetry: () => void;
-	onClose: () => void;
-}) {
-	return (
-		<div className="flex flex-col items-center gap-3 px-5 py-8 text-center">
-			<p className="text-sm font-medium text-danger">Couldn't save the rule</p>
-			<p className="max-w-xs text-xs text-fg-muted">Please try again.</p>
-			<div className="mt-2 flex gap-2">
-				<Button variant="primary" onClick={onRetry}>
-					Try again
-				</Button>
-				<Button variant="ghost" onClick={onClose}>
-					Not now
-				</Button>
-			</div>
-		</div>
-	);
-}