jcoffey-dev
54c256e69e
Right-clicking a sender, or any address in the message details, opens a menu offering to add that person to the address book - plus edit them when they are already known, write to them, or copy the address. "Add to contacts" opens the contact editor prefilled rather than saving silently, so the address book gets a real card that the user can complete, not a bare email address. contactFromAddress splits the display name into JSContact name components: "Ada Lovelace" into given and surname, "Lovelace, Ada" unpicked, a single word as the given name, and a name that is really just an address left off entirely. Addresses in the details block were joined into one string, so they are now rendered per address to be individually targetable. ContactEditor previously ignored a prefilled name on an unsaved card - it read name components only when the card had an id - so it now reads them either way.
94 lines
3.7 KiB
TypeScript
94 lines
3.7 KiB
TypeScript
import { useCallback, useState, type MouseEvent, type ReactNode } from "react";
|
|
import { Copy, Mail, Pencil, UserPlus } from "lucide-react";
|
|
import type { EmailAddress } from "@/jmap/types";
|
|
import { useContacts } from "@/store/contacts";
|
|
import { useCompose } from "@/store/compose";
|
|
import { contactFromAddress } from "@/lib/contacts";
|
|
import { formatAddress } from "@/lib/address";
|
|
import { MenuItem, MenuSep, Popover, type Anchor } from "@/ui/popover";
|
|
import { toast } from "@/ui/toast";
|
|
import { ContactEditor } from "../contacts/ContactEditor";
|
|
|
|
/**
|
|
* Right-click on anyone named in a message — sender, recipients, Reply-To — to
|
|
* add them to the address book. The contact editor opens prefilled rather than
|
|
* saving silently, so the address book gets a real card and not just a stray
|
|
* email address.
|
|
*/
|
|
export function useAddressMenu() {
|
|
const [menu, setMenu] = useState<{ anchor: Anchor; address: EmailAddress } | null>(null);
|
|
const [editing, setEditing] = useState<ReturnType<typeof contactFromAddress> | null>(null);
|
|
const contacts = useContacts();
|
|
const openCompose = useCompose((s) => s.open);
|
|
|
|
const open = useCallback((ev: MouseEvent, address: EmailAddress) => {
|
|
if (!address.email) return;
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
setMenu({ anchor: { x: ev.clientX, y: ev.clientY }, address });
|
|
// The books are needed the moment "Add to contacts" is chosen.
|
|
const st = useContacts.getState();
|
|
if (st.available && !st.loaded && !st.loading) void st.loadAll();
|
|
}, []);
|
|
|
|
const close = () => setMenu(null);
|
|
const known = menu ? contacts.lookupByEmail(menu.address.email) : undefined;
|
|
const books = Object.values(contacts.books);
|
|
const defaultBookId = (books.find((b) => b.isDefault) ?? books[0])?.id ?? null;
|
|
|
|
const node: ReactNode = (
|
|
<>
|
|
{menu && (
|
|
<Popover anchor={menu.anchor} onClose={close} width={230} ariaLabel={`Actions for ${menu.address.email}`}>
|
|
<div className="menu-title truncate">{formatAddress(menu.address)}</div>
|
|
{contacts.available && (
|
|
known ? (
|
|
<MenuItem icon={<Pencil size={16} />} label="Edit contact" onClick={() => { setEditing(known); close(); }} />
|
|
) : (
|
|
<MenuItem icon={<UserPlus size={16} />} label="Add to contacts" onClick={() => { setEditing(contactFromAddress(menu.address)); close(); }} />
|
|
)
|
|
)}
|
|
<MenuItem icon={<Mail size={16} />} label="New message to this address" onClick={() => { openCompose({ to: [menu.address] }); close(); }} />
|
|
<MenuSep />
|
|
<MenuItem
|
|
icon={<Copy size={16} />}
|
|
label="Copy email address"
|
|
onClick={() => {
|
|
void navigator.clipboard?.writeText(menu.address.email).then(
|
|
() => toast.show("Address copied"),
|
|
() => toast.error("Could not copy the address"),
|
|
);
|
|
close();
|
|
}}
|
|
/>
|
|
</Popover>
|
|
)}
|
|
{editing && (
|
|
<ContactEditor
|
|
card={editing}
|
|
defaultBookId={defaultBookId}
|
|
onClose={() => setEditing(null)}
|
|
onSaved={() => setEditing(null)}
|
|
/>
|
|
)}
|
|
</>
|
|
);
|
|
|
|
return { open, node };
|
|
}
|
|
|
|
/** Comma-separated addresses, each of them right-clickable. */
|
|
export function AddressList({ list, onContext, empty = "—" }: { list: EmailAddress[] | null | undefined; onContext: (ev: MouseEvent, a: EmailAddress) => void; empty?: string }) {
|
|
if (!list?.length) return <>{empty}</>;
|
|
return (
|
|
<>
|
|
{list.map((a, i) => (
|
|
<span key={`${a.email}-${i}`}>
|
|
{i > 0 && ", "}
|
|
<span className="addr" onContextMenu={(ev) => onContext(ev, a)} title="Right-click for options">{formatAddress(a)}</span>
|
|
</span>
|
|
))}
|
|
</>
|
|
);
|
|
}
|