@rapidmx/web-client 0.2.0

package/apps/www/settings/filters/[uid].tsx

@@ -0,0 +1,155 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Folder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import {
+    MailFilterAction,
+    MailFilterConditions,
+    MailFilterRule,
+    getMailFilterRule,
+    updateMailFilterRule,
+} from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import RuleBuilder, { RuleBuilderValue } from "../../../shared/components/rules/RuleBuilder.js";
+import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "./_mailFilterRuleConfig.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export type MailFilterDetailPageProps = Omit<SettingsShellProps, "active"> & { params: { uid: string } };
+
+export default function MailFilterDetailPage(props: MailFilterDetailPageProps) {
+    return (
+        <SettingsShell {...props} active="filters">
+            <MailFilterDetailContent uid={props.params.uid} />
+        </SettingsShell>
+    );
+}
+
+function MailFilterDetailContent({ uid }: { uid: string }) {
+    const { mailboxUid } = useSettingsShell();
+    const [original, setOriginal] = useState<MailFilterRule | null>(null);
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState<RuleBuilderValue<MailFilterConditions, MailFilterAction> | null>(null);
+    const [folders, setFolders] = useState<Folder[] | null>(null);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [saved, setSaved] = useState(false);
+
+    useEffect(() => {
+        // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same
+        // established non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+        listFolders(mailboxUid!).then(setFolders).catch(() => setFolders([]));
+    }, [mailboxUid]);
+
+    useEffect(() => {
+        setLoading(true);
+        setError(null);
+        getMailFilterRule(uid)
+            .then((loaded) => {
+                setOriginal(loaded);
+                if (loaded) {
+                    setName(loaded.name);
+                    setRule({
+                        enabled: loaded.enabled,
+                        sequence: loaded.sequence,
+                        stopProcessingRules: loaded.stopProcessingRules,
+                        conditions: loaded.conditions,
+                        actions: loaded.actions,
+                    });
+                }
+            })
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load this mail filter."))
+            .finally(() => setLoading(false));
+    }, [uid]);
+
+    // Only ever invoked from the form below, which itself only renders once `original`/`rule` are
+    // loaded (the early returns above cover every other state) — the non-null assertions reflect that
+    // real invariant, matching `TransportRuleDetailContent.handleSubmit`'s identical pattern.
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        setSaved(false);
+        try {
+            const updated = await updateMailFilterRule({
+                uid: original!.uid,
+                version: original!.version,
+                name: name.trim(),
+                ...rule!,
+            });
+            setOriginal(updated);
+            setSaved(true);
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not save this mail filter.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    if (loading || folders === null) {
+        return <p className="p-6 text-sm text-text-muted">Loading&hellip;</p>;
+    }
+    if (error && !original) {
+        return (
+            <div className="p-6">
+                <Alert>{error}</Alert>
+            </div>
+        );
+    }
+    if (!original || !rule) {
+        return (
+            <div className="p-6">
+                <Alert>Mail filter not found.</Alert>
+            </div>
+        );
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <a href={`/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid!)}`} className="text-sm text-primary-dark hover:underline">
+                    &larr; All mail filters
+                </a>
+                <h1 className="text-lg font-bold tracking-tight mt-1 mb-5">{original.name}</h1>
+
+                {error && <Alert>{error}</Alert>}
+                {saved && !error && <div className="mb-4 text-sm text-success font-medium">Saved.</div>}
+
+                <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                    <div className="bg-surface border border-border rounded-md p-6">
+                        <FormField label="Name" htmlFor="name">
+                            <input id="name" type="text" className={INPUT_CLASS} value={name} onChange={(e) => setName(e.target.value)} />
+                        </FormField>
+                    </div>
+
+                    <RuleBuilder
+                        value={rule}
+                        onChange={setRule}
+                        conditionFields={MAIL_FILTER_CONDITION_FIELDS}
+                        actionTypes={buildMailFilterActionTypes(folders)}
+                    />
+
+                    <div>
+                        <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                            Save changes
+                        </Button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/filters/_mailFilterRuleConfig.tsx

@@ -0,0 +1,102 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React from "react";
+import { Folder, FolderType } from "@rapidmx/react-shared/mail/mailApi.js";
+import { MailFilterAction } from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
+import { ActionTypeDef, ConditionFieldDef } from "../../../shared/components/rules/RuleBuilder.js";
+
+const FIELD_INPUT_CLASS =
+    "w-full text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+/** Folder types a mail filter can't meaningfully move/copy a message into — a mailbox's single
+ * well-known `calendar`/`contacts`/`tasks`/`notes` folder holds a different entity type entirely, not
+ * messages. */
+const NON_MAIL_FOLDER_TYPES = new Set<FolderType>(["calendar", "contacts", "tasks", "notes"]);
+
+export const MAIL_FILTER_CONDITION_FIELDS: ConditionFieldDef[] = [
+    { key: "fromContains", label: "From contains", kind: "list" },
+    { key: "subjectContains", label: "Subject contains", kind: "list" },
+    { key: "bodyContains", label: "Body contains", kind: "list" },
+    { key: "toCcContains", label: "Any To/Cc recipient equals", kind: "list" },
+    { key: "hasAttachment", label: "Has an attachment", kind: "boolean" },
+    {
+        key: "importance",
+        label: "Importance",
+        kind: "select",
+        options: [
+            { value: "low", label: "Low" },
+            { value: "normal", label: "Normal" },
+            { value: "high", label: "High" },
+        ],
+    },
+];
+
+/**
+ * Builds the mail-filter action-type registry for `RuleBuilder`, closing over `folders` so the
+ * move/copy-to-folder actions can render a real folder picker. `RuleBuilder`'s own `render()` contract
+ * is synchronous, so this resolves `folders` once up front (the caller already loads them for the page
+ * itself) rather than each action row fetching independently.
+ */
+export function buildMailFilterActionTypes(folders: Folder[]): ActionTypeDef<MailFilterAction>[] {
+    const destinationFolders = folders.filter((f) => !NON_MAIL_FOLDER_TYPES.has(f.type));
+
+    const folderSelect = (action: MailFilterAction, onChange: (next: MailFilterAction) => void) => (
+        <select
+            aria-label="Destination folder"
+            className={FIELD_INPUT_CLASS}
+            value={action.folderUid ?? ""}
+            onChange={(e) => onChange({ ...action, folderUid: e.target.value })}
+        >
+            <option value="">Choose a folder&hellip;</option>
+            {destinationFolders.map((folder) => (
+                <option key={folder.uid} value={folder.uid}>
+                    {folder.name}
+                </option>
+            ))}
+        </select>
+    );
+
+    return [
+        {
+            value: "move_to_folder",
+            label: "Move to folder",
+            createDefault: () => ({ type: "move_to_folder", folderUid: "" }),
+            render: folderSelect,
+        },
+        {
+            value: "copy_to_folder",
+            label: "Copy to folder",
+            createDefault: () => ({ type: "copy_to_folder", folderUid: "" }),
+            render: folderSelect,
+        },
+        {
+            value: "delete",
+            label: "Delete the message",
+            createDefault: () => ({ type: "delete" }),
+            render: () => null,
+        },
+        {
+            value: "mark_as_read",
+            label: "Mark as read",
+            createDefault: () => ({ type: "mark_as_read" }),
+            render: () => null,
+        },
+        {
+            value: "forward",
+            label: "Forward to",
+            createDefault: () => ({ type: "forward", forwardTo: "" }),
+            render: (action, onChange) => (
+                <input
+                    type="email"
+                    aria-label="Forward to address"
+                    className={FIELD_INPUT_CLASS}
+                    placeholder="assistant@example.com"
+                    value={action.forwardTo ?? ""}
+                    onChange={(e) => onChange({ ...action, forwardTo: e.target.value })}
+                />
+            ),
+        },
+    ];
+}

package/apps/www/settings/filters/index.tsx

@@ -0,0 +1,99 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { MailFilterRule, listMailFilterRules } from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export type SettingsFiltersPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsFiltersPage(props: SettingsFiltersPageProps) {
+    return (
+        <SettingsShell {...props} active="filters">
+            <FiltersContent />
+        </SettingsShell>
+    );
+}
+
+function FiltersContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [rules, setRules] = useState<MailFilterRule[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listMailFilterRules(mailboxUid!)
+            .then(setRules)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load mail filters."))
+            .finally(() => setLoading(false));
+    }, [mailboxUid]);
+
+    const sorted = [...rules].sort((a, b) => a.sequence - b.sequence);
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <div className="flex items-center justify-between mb-5">
+                    <h1 className="text-lg font-bold tracking-tight">Mail Filters</h1>
+                    <a href={`/settings/filters/new?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
+                        <Button type="button" className="!w-auto">
+                            + New filter
+                        </Button>
+                    </a>
+                </div>
+                <p className="text-sm text-text-muted mb-4">
+                    Applied in order once a message is verdicted safe to deliver, before it reaches your Inbox.
+                </p>
+
+                {error && <Alert>{error}</Alert>}
+
+                {loading ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : sorted.length === 0 ? (
+                    <p className="text-sm text-text-muted">No mail filters yet.</p>
+                ) : (
+                    <div className="overflow-x-auto">
+                        <table className="w-full text-sm border-collapse">
+                            <thead>
+                                <tr>
+                                    {["Sequence", "Name", "Enabled", "Actions", ""].map((h) => (
+                                        <th
+                                            key={h}
+                                            className="text-left text-xs uppercase tracking-wide text-text-muted py-2 px-2.5 border-b border-border"
+                                        >
+                                            {h}
+                                        </th>
+                                    ))}
+                                </tr>
+                            </thead>
+                            <tbody>
+                                {sorted.map((rule) => (
+                                    <tr key={rule.uid}>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{rule.sequence}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{rule.name}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{rule.enabled ? "Yes" : "No"}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border">{rule.actions.length}</td>
+                                        <td className="py-2.5 px-2.5 border-b border-border text-right">
+                                            <a
+                                                href={`/settings/filters/${encodeURIComponent(rule.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`}
+                                                className="text-primary-dark hover:underline font-medium"
+                                            >
+                                                View
+                                            </a>
+                                        </td>
+                                    </tr>
+                                ))}
+                            </tbody>
+                        </table>
+                    </div>
+                )}
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/filters/new/index.tsx

@@ -0,0 +1,126 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { Folder, listFolders } from "@rapidmx/react-shared/mail/mailApi.js";
+import {
+    MailFilterAction,
+    MailFilterConditions,
+    createMailFilterRule,
+} from "@rapidmx/react-shared/mail/mailFilterRulesApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../../shared/components/settings/layout/SettingsShell.js";
+import RuleBuilder, { RuleBuilderValue } from "../../../../shared/components/rules/RuleBuilder.js";
+import { MAIL_FILTER_CONDITION_FIELDS, buildMailFilterActionTypes } from "../_mailFilterRuleConfig.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+import FormField from "@rapidmx/react-shared/components/forms/FormField.js";
+
+const INPUT_CLASS =
+    "w-full text-sm py-2.5 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary";
+
+export type NewMailFilterPageProps = Omit<SettingsShellProps, "active">;
+
+export default function NewMailFilterPage(props: NewMailFilterPageProps) {
+    return (
+        <SettingsShell {...props} active="filters">
+            <NewMailFilterForm />
+        </SettingsShell>
+    );
+}
+
+function NewMailFilterForm() {
+    const { mailboxUid } = useSettingsShell();
+    const [folders, setFolders] = useState<Folder[] | null>(null);
+    const [folderError, setFolderError] = useState<string | null>(null);
+    const [name, setName] = useState("");
+    const [rule, setRule] = useState<RuleBuilderValue<MailFilterConditions, MailFilterAction>>({
+        enabled: true,
+        sequence: 0,
+        stopProcessingRules: false,
+        conditions: {},
+        actions: [],
+    });
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+
+    // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same established
+    // non-null pattern as `apps/www/settings/auto-reply/index.tsx`.
+    useEffect(() => {
+        listFolders(mailboxUid!)
+            .then(setFolders)
+            .catch((err) => setFolderError(err instanceof ApiRequestError ? err.message : "Could not load this mailbox's folders."));
+    }, [mailboxUid]);
+
+    async function handleSubmit(e: FormEvent) {
+        e.preventDefault();
+        setError(null);
+
+        if (!name.trim()) {
+            setError("A name is required.");
+            return;
+        }
+
+        setSaving(true);
+        try {
+            const created = await createMailFilterRule({ mailboxUid: mailboxUid!, name: name.trim(), ...rule });
+            window.location.href = `/settings/filters/${encodeURIComponent(created.uid)}?mailboxUid=${encodeURIComponent(mailboxUid!)}`;
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not create the mail filter.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-3xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">New mail filter</h1>
+                <p className="text-sm text-text-muted mb-5">
+                    Applied in order once a message is verdicted safe to deliver, before it reaches your Inbox.
+                </p>
+
+                {error && <Alert>{error}</Alert>}
+                {folderError && <Alert>{folderError}</Alert>}
+
+                {folders === null ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : (
+                    <form onSubmit={handleSubmit} className="flex flex-col gap-5">
+                        <div className="bg-surface border border-border rounded-md p-6">
+                            <FormField label="Name" htmlFor="name">
+                                <input
+                                    id="name"
+                                    type="text"
+                                    className={INPUT_CLASS}
+                                    value={name}
+                                    onChange={(e) => setName(e.target.value)}
+                                    placeholder="File newsletters"
+                                />
+                            </FormField>
+                        </div>
+
+                        <RuleBuilder
+                            value={rule}
+                            onChange={setRule}
+                            conditionFields={MAIL_FILTER_CONDITION_FIELDS}
+                            actionTypes={buildMailFilterActionTypes(folders)}
+                        />
+
+                        <div className="flex gap-3">
+                            <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                                Create filter
+                            </Button>
+                            <a href={`/settings/filters?mailboxUid=${encodeURIComponent(mailboxUid!)}`}>
+                                <Button type="button" variant="secondary" className="!w-auto">
+                                    Cancel
+                                </Button>
+                            </a>
+                        </div>
+                    </form>
+                )}
+            </div>
+        </div>
+    );
+}

package/apps/www/settings/focused-inbox/index.tsx

@@ -0,0 +1,148 @@
+///////////////////////////////////////////////////////////////////////////////
+// Copyright (C) 2026 Jean-Philippe Steinmetz
+// SPDX-License-Identifier: MPL-2.0
+///////////////////////////////////////////////////////////////////////////////
+import React, { FormEvent, useEffect, useState } from "react";
+import { ApiRequestError } from "@rapidmx/react-shared/util/api.js";
+import { MessageClassification } from "@rapidmx/react-shared/mail/mailApi.js";
+import {
+    FocusedInboxOverride,
+    createFocusedInboxOverride,
+    deleteFocusedInboxOverride,
+    listFocusedInboxOverrides,
+} from "@rapidmx/react-shared/mail/focusedInboxOverridesApi.js";
+import SettingsShell, { SettingsShellProps, useSettingsShell } from "../../../shared/components/settings/layout/SettingsShell.js";
+import Alert from "@rapidmx/react-shared/components/feedback/Alert.js";
+import Button from "@rapidmx/react-shared/components/buttons/Button.js";
+
+export type SettingsFocusedInboxPageProps = Omit<SettingsShellProps, "active">;
+
+export default function SettingsFocusedInboxPage(props: SettingsFocusedInboxPageProps) {
+    return (
+        <SettingsShell {...props} active="focused-inbox">
+            <FocusedInboxContent />
+        </SettingsShell>
+    );
+}
+
+function FocusedInboxContent() {
+    const { mailboxUid } = useSettingsShell();
+    const [overrides, setOverrides] = useState<FocusedInboxOverride[]>([]);
+    const [loading, setLoading] = useState(true);
+    const [error, setError] = useState<string | null>(null);
+    const [saving, setSaving] = useState(false);
+    const [newSender, setNewSender] = useState("");
+    const [newClassifyAs, setNewClassifyAs] = useState<MessageClassification>("other");
+
+    function reload() {
+        setLoading(true);
+        setError(null);
+        // `SettingsShell` only ever renders its children once `mailboxUid` has resolved — same
+        // established non-null pattern as `apps/www/settings/filters/index.tsx`.
+        listFocusedInboxOverrides(mailboxUid!)
+            .then(setOverrides)
+            .catch((err) => setError(err instanceof ApiRequestError ? err.message : "Could not load your Focused Inbox rules."))
+            .finally(() => setLoading(false));
+    }
+
+    useEffect(reload, [mailboxUid]);
+
+    async function handleAdd(e: FormEvent) {
+        e.preventDefault();
+        const senderAddress = newSender.trim();
+        if (!senderAddress) {
+            return;
+        }
+        setSaving(true);
+        setError(null);
+        try {
+            await createFocusedInboxOverride({ mailboxUid: mailboxUid!, senderAddress, classifyAs: newClassifyAs });
+            setNewSender("");
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not add this rule.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    async function handleRemove(override: FocusedInboxOverride) {
+        setSaving(true);
+        setError(null);
+        try {
+            await deleteFocusedInboxOverride(override.uid, override.version);
+            reload();
+        } catch (err) {
+            setError(err instanceof ApiRequestError ? err.message : "Could not remove this rule.");
+        } finally {
+            setSaving(false);
+        }
+    }
+
+    return (
+        <div className="flex-1 min-w-0 overflow-y-auto p-6">
+            <div className="max-w-xl">
+                <h1 className="text-lg font-bold tracking-tight mb-1">Focused Inbox</h1>
+                <p className="text-sm text-text-muted mb-4">
+                    Mail from a sender listed here always goes to the matching half of your Inbox, overriding
+                    the automatic Focused/Other classification. Add one directly, or use &ldquo;Always for this
+                    sender&rdquo; when moving a message.
+                </p>
+
+                {error && <Alert>{error}</Alert>}
+
+                {loading ? (
+                    <p className="text-sm text-text-muted">Loading&hellip;</p>
+                ) : (
+                    <ul className="flex flex-col gap-2 mb-4">
+                        {overrides.length === 0 && <li className="text-sm text-text-muted">No rules yet.</li>}
+                        {overrides.map((override) => (
+                            <li
+                                key={override.uid}
+                                className="flex items-center justify-between gap-3 py-2 px-3 border border-border rounded-sm"
+                            >
+                                <div>
+                                    <div className="text-sm font-medium">{override.senderAddress}</div>
+                                    <div className="text-xs text-text-muted">
+                                        Always {override.classifyAs === "other" ? "Other" : "Focused"}
+                                    </div>
+                                </div>
+                                <button
+                                    type="button"
+                                    onClick={() => handleRemove(override)}
+                                    disabled={saving}
+                                    className="text-sm text-danger hover:underline disabled:opacity-55"
+                                >
+                                    Remove
+                                </button>
+                            </li>
+                        ))}
+                    </ul>
+                )}
+
+                <form onSubmit={handleAdd} className="flex gap-2">
+                    <input
+                        type="text"
+                        aria-label="Sender address"
+                        value={newSender}
+                        onChange={(e) => setNewSender(e.target.value)}
+                        placeholder="sender@example.com"
+                        className="flex-1 text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
+                    />
+                    <select
+                        aria-label="Classify as"
+                        value={newClassifyAs}
+                        onChange={(e) => setNewClassifyAs(e.target.value as MessageClassification)}
+                        className="text-sm py-2 px-3 border border-border rounded-sm bg-surface text-text focus:outline-none focus:border-primary"
+                    >
+                        <option value="other">Other</option>
+                        <option value="focused">Focused</option>
+                    </select>
+                    <Button type="submit" loading={saving} disabled={saving} className="!w-auto">
+                        Add
+                    </Button>
+                </form>
+            </div>
+        </div>
+    );
+}