jcoffey-dev
483aac849a
Requested in #233. The `g` shortcuts cover the handful of folders every account has -- inbox, sent, drafts -- and nothing reaches the dozens a Sieve rule fills, which is where somebody with a real folder tree spends their time. `g o` opens the picker, you type part of a name, and you are there. The picker is the one the move action already uses, with one difference that only shows up on shared mail: it selected folders by `mayAddItems`, which is right for a destination and wrong for a place to go. A shared folder you may read but not file into is somewhere you can visit. The right is now a parameter, named for what it is asking rather than for which caller wants it. Hosted in AppShell rather than in the mail view, because the `g` shortcuts are global and the mail view is not mounted to hear about it -- pressing this from the calendar should still take you to a folder, and now does. `o` on its own opens a conversation and does not clash: a pending prefix is tried before a bare key. That was already true and nothing said so, so there are now five tests for the sequence machinery -- including that an abandoned prefix costs the prefix and not the keystroke after it, which is the nicer behaviour of the two and was undocumented. Checked in a browser against the mock: opened from the calendar, filtered to a nested folder, landed on it, and `o` still opened a conversation afterwards. Closes #233.
75 lines
3.2 KiB
TypeScript
75 lines
3.2 KiB
TypeScript
import { useMemo, useState } from "react";
|
|
import { Folder, Inbox } from "lucide-react";
|
|
import { useMail } from "@/store/mail";
|
|
import { Dialog } from "@/ui/dialog";
|
|
import type { Id, Mailbox } from "@/jmap/types";
|
|
import { t } from "@/lib/i18n";
|
|
import { mailboxDisplayPath } from "@/lib/mailboxName";
|
|
|
|
/**
|
|
* @param need which right a folder has to grant to be worth offering.
|
|
* `mayAddItems` for a move — a folder you cannot file into is not a
|
|
* destination — and `mayReadItems` for going somewhere, since a shared
|
|
* folder you may read but not write to is still somewhere you can go. The
|
|
* distinction only shows up on shared mail, which is exactly where getting
|
|
* it wrong would be invisible to whoever wrote the code.
|
|
*/
|
|
export function MailboxPicker({ title, onClose, onPick, exclude, need = "mayAddItems" }: { title: string; onClose: () => void; onPick: (id: Id) => void; exclude?: Id[]; need?: "mayAddItems" | "mayReadItems" }) {
|
|
const mailboxes = useMail((s) => s.mailboxes);
|
|
const mailboxPath = useMail((s) => s.mailboxPath);
|
|
const [q, setQ] = useState("");
|
|
const [active, setActive] = useState(0);
|
|
const list = useMemo(() => {
|
|
const all = Object.values(mailboxes)
|
|
.filter((m) => !exclude?.includes(m.id) && m.myRights[need])
|
|
.map((m) => ({ m, path: mailboxDisplayPath(m, mailboxes) }))
|
|
.sort((a, b) => (a.m.role === "inbox" ? -1 : b.m.role === "inbox" ? 1 : a.path.localeCompare(b.path)));
|
|
const ql = q.trim().toLowerCase();
|
|
return ql ? all.filter((x) => x.path.toLowerCase().includes(ql)) : all;
|
|
}, [mailboxes, mailboxPath, q, exclude]);
|
|
|
|
return (
|
|
<Dialog open onClose={onClose} title={title} size="sm">
|
|
<input
|
|
className="input"
|
|
autoFocus
|
|
placeholder={t("Type a folder name…")}
|
|
value={q}
|
|
onChange={(e) => {
|
|
setQ(e.target.value);
|
|
setActive(0);
|
|
}}
|
|
onKeyDown={(e) => {
|
|
if (e.key === "ArrowDown") {
|
|
e.preventDefault();
|
|
setActive((a) => Math.min(list.length - 1, a + 1));
|
|
} else if (e.key === "ArrowUp") {
|
|
e.preventDefault();
|
|
setActive((a) => Math.max(0, a - 1));
|
|
} else if (e.key === "Enter") {
|
|
e.preventDefault();
|
|
const m = list[active]?.m;
|
|
if (m) onPick(m.id);
|
|
}
|
|
}}
|
|
/>
|
|
<div style={{ maxHeight: 360, overflowY: "auto", marginTop: 8 }} role="listbox">
|
|
{list.map(({ m, path }, i) => (
|
|
<PickerRow key={m.id} m={m} path={path} active={i === active} onClick={() => onPick(m.id)} onHover={() => setActive(i)} />
|
|
))}
|
|
{!list.length && <div className="empty" style={{ padding: 24 }}>{t("No matching folders")}</div>}
|
|
</div>
|
|
</Dialog>
|
|
);
|
|
}
|
|
|
|
function PickerRow({ m, path, active, onClick, onHover }: { m: Mailbox; path: string; active: boolean; onClick: () => void; onHover: () => void }) {
|
|
return (
|
|
<button className={`menu-item ${active ? "active" : ""}`} onClick={onClick} onMouseEnter={onHover} role="option" aria-selected={active}>
|
|
{m.role === "inbox" ? <Inbox size={16} /> : <Folder size={16} />}
|
|
<span className="grow truncate">{path}</span>
|
|
<span className="menu-kbd">{m.totalEmails}</span>
|
|
</button>
|
|
);
|
|
}
|