"use client" import { Button } from "macbetter/button" import { Command, CommandEmpty, CommandGroup, CommandGroupLabel, CommandInput, CommandItem, CommandItemIcon, CommandList, CommandPalette, CommandPaletteContent, } from "macbetter/command-palette" import { ContextMenu, ContextMenuContent, ContextMenuTrigger } from "macbetter/context-menu" import { Dialog, DialogBody, DialogClose, DialogContent, DialogFooter, DialogHeader, DialogTitle, } from "macbetter/dialog" import { List, ListRow, ListRowAccessory, ListRowTitle, ListRowValue, ListSection, } from "macbetter/list" import { Listbox, ListboxItem } from "macbetter/listbox" import { Menu, MenuContent, MenuItem, MenuItemIcon, MenuTrigger } from "macbetter/menu" import { NavigationBar, NavigationBarBackButton, NavigationBarTrailing, NavigationStack, } from "macbetter/navigation-bar" import { SearchField } from "macbetter/search-field" import { Sidebar, SidebarItem, SidebarSection } from "macbetter/sidebar" import { SplitView, SplitViewDivider, SplitViewPane } from "macbetter/split-view" import { toast } from "macbetter/toast" import { Toolbar, ToolbarButton, ToolbarGroup, ToolbarSearchField, ToolbarSpacer, ToolbarTitle, ToolbarToggle, } from "macbetter/toolbar" import { Window, WindowBody, WindowSidebar, WindowTitlebar, WindowTrafficLights } from "macbetter/window" import { ArchiveIcon, ChevronDownIcon, ChevronUpIcon, FlagIcon, FolderInputIcon, ListFilterIcon, MailIcon, OctagonXIcon, ReplyAllIcon, ReplyIcon, ForwardIcon, SquarePenIcon, Trash2Icon, } from "lucide-react" import * as React from "react" import { ScreenSheet } from "../screen-sheet" import { ExampleShell, MacFrame, Pad, Phone, useStage } from "../shell" import { favorites, folders, inMailbox, mailboxes, matches, type MailboxId, type Message } from "./data" import { ComposeFields, composeTitle, MessageMenuItems, MessageSummary, Reader } from "./parts" import { useMailStore, type MailStore } from "./store" import "./mail.css" function useMailView(store: MailStore, initial: MailboxId = "inbox") { const [mailbox, setMailbox] = React.useState(initial) const [query, setQuery] = React.useState("") const [unreadOnly, setUnreadOnly] = React.useState(false) const [selected, setSelected] = React.useState("m1") const list = inMailbox(store.messages, mailbox) .filter((m) => matches(m, query)) .filter((m) => !unreadOnly || m.unread) const message = store.messages.find((m) => m.id === selected && list.some((l) => l.id === m.id)) const select = (id: string | null) => { setSelected(id) const target = store.messages.find((m) => m.id === id) if (target?.unread) window.setTimeout(() => store.update(target.id, { unread: false }), 900) } const openMailbox = (id: MailboxId) => { setMailbox(id) setSelected(inMailbox(store.messages, id)[0]?.id ?? null) } return { mailbox, openMailbox, query, setQuery, unreadOnly, setUnreadOnly, list, message, select } } type View = ReturnType function mailboxName(id: MailboxId) { return mailboxes.find((m) => m.id === id)?.name ?? "Inbox" } /* ── Compose ───────────────────────────────────────────────────── */ function send(to: string) { toast.success("Message sent", { description: to ? `To ${to}` : undefined }) } function ComposeDialog({ store }: { store: MailStore }) { const { compose, setCompose } = store const [to, setTo] = React.useState("") React.useEffect(() => { if (compose?.message && compose.mode !== "forward" && compose.mode !== "new") setTo(compose.message.from) else setTo("") }, [compose]) return ( ) } /* ── Message list (Mac and iPad) ───────────────────────────────── */ function MessageList({ store, view, label }: { store: MailStore; view: View; label: string }) { const [menuFor, setMenuFor] = React.useState(view.message) if (!view.list.length) { return (

{view.query ? "No results" : "No messages"} {view.query ? `Nothing matches “${view.query}”.` : `${mailboxName(view.mailbox)} is empty.`}

) } return ( store.act(action, menuFor)}> value && view.select(value as string)} > {view.list.map((message) => ( { setMenuFor(message) view.select(message.id) }} > ))} {menuFor ? : null} ) } /* ── macOS ─────────────────────────────────────────────────────── */ function MailSidebar({ store, view }: { store: MailStore; view: View }) { const badge = (id: MailboxId) => { if (id === "drafts") return store.messages.filter((m) => m.mailbox === "drafts").length || undefined if (id === "flagged") return store.messages.filter((m) => m.flagged && m.mailbox !== "trash").length || undefined return store.unreadIn(id) || undefined } return ( {favorites.map((box) => ( } tint={box.tint} badge={badge(box.id)} current={view.mailbox === box.id} onClick={() => view.openMailbox(box.id)} > {box.name} ))} {folders.map((box) => ( } badge={badge(box.id)} current={view.mailbox === box.id} onClick={() => view.openMailbox(box.id)} > {box.name} ))} ) } function MessageActions({ store, message }: { store: MailStore; message: Message | undefined }) { const off = !message return ( <> store.act("archive", message)}> store.act("trash", message)}> store.act("junk", message)}> store.act("reply", message)}> store.act("reply-all", message)}> store.act("forward", message)}> store.act("toggle-flag", message)} className="ex-flag-button" > ) } function MailCommands({ store, view, open, setOpen }: { store: MailStore; view: View; open: boolean; setOpen: (open: boolean) => void }) { const { preview } = useStage() React.useEffect(() => { if (preview) return const onKey = (event: KeyboardEvent) => { if ((event.metaKey || event.ctrlKey) && event.key.toLowerCase() === "k") { // The docs header binds ⌘K to its own search; while Mail is open, Mail's palette wins. event.preventDefault() event.stopImmediatePropagation() setOpen(true) } } window.addEventListener("keydown", onKey, { capture: true }) return () => window.removeEventListener("keydown", onKey, { capture: true }) }, [setOpen, preview]) return ( { setOpen(false) if (value.startsWith("go:")) view.openMailbox(value.slice(3) as MailboxId) else if (value.startsWith("open:")) { const target = store.messages.find((m) => m.id === value.slice(5)) if (target) { view.openMailbox(target.mailbox) view.select(target.id) } } else store.act(value, view.message) }} > No matches Actions New Message {view.message ? ( <> Reply to {view.message.from} Archive “{view.message.subject}” {view.message.flagged ? "Unflag" : "Flag"} message ) : null} Go to {favorites.map((box) => ( {box.name} ))} Messages {store.messages .filter((m) => m.mailbox !== "trash") .map((m) => ( {m.subject} ))} ) } function MacMail({ store }: { store: MailStore }) { const view = useMailView(store) const [palette, setPalette] = React.useState(false) const total = inMailbox(store.messages, view.mailbox).length const unread = inMailbox(store.messages, view.mailbox).filter((m) => m.unread).length return ( {mailboxName(view.mailbox)} view.setUnreadOnly(pressed)} > store.act("compose", undefined)}> view.setQuery(event.currentTarget.value)} onKeyDown={(event) => { if (event.key === "Escape") view.setQuery("") }} /> setPalette(true)} className="ex-kbd-button"> ⌘K

) } /* ── iPad ──────────────────────────────────────────────────────── */ function PadMail({ store }: { store: MailStore }) { const view = useMailView(store) return (

view.setQuery(e.currentTarget.value)} />

) } function MessageButtons({ store, message }: { store: MailStore; message: Message | undefined }) { return ( <> {message ? ( store.act(action, message)}> ) : null} ) } /* ── iPhone ────────────────────────────────────────────────────── */ type PhoneScreen = { name: "mailboxes" } | { name: "list"; mailbox: MailboxId } | { name: "message"; mailbox: MailboxId; id: string } function PhoneMail({ store }: { store: MailStore }) { const [screen, setScreen] = React.useState({ name: "list", mailbox: "inbox" }) const [direction, setDirection] = React.useState<"push" | "pop" | null>(null) const [query, setQuery] = React.useState("") const [to, setTo] = React.useState("") const go = (next: PhoneScreen, dir: "push" | "pop") => { setDirection(dir) setScreen(next) } const motion = direction === "push" ? "ex-push" : direction === "pop" ? "ex-pop" : "" let content: React.ReactNode if (screen.name === "mailboxes") { content = ( {favorites.map((box) => ( go({ name: "list", mailbox: box.id }, "push")}> {box.name} {store.unreadIn(box.id) ? {store.unreadIn(box.id)} : null} ))} {folders.map((box) => ( go({ name: "list", mailbox: box.id }, "push")}> {box.name} ))} ) } else if (screen.name === "list") { const list = inMailbox(store.messages, screen.mailbox).filter((m) => matches(m, query)) const unread = list.filter((m) => m.unread).length content = (

go({ name: "mailboxes" }, "pop")}>Mailboxes

setQuery(e.currentTarget.value)} />

{list.length ? (

) : (

No messages

)} Updated just now {unread} unread store.act("compose", undefined)}>

) } else { const list = inMailbox(store.messages, screen.mailbox) const index = list.findIndex((m) => m.id === screen.id) const message = store.messages.find((m) => m.id === screen.id) const move = (step: number) => { const next = list[index + step] if (!next) return setScreen({ ...screen, id: next.id }) if (next.unread) store.update(next.id, { unread: false }) } content = (

go({ name: "list", mailbox: screen.mailbox }, "pop")}> {mailboxName(screen.mailbox)} {message ? ( { store.act("trash", message) go({ name: "list", mailbox: screen.mailbox }, "pop") }} > { store.act(action, message) go({ name: "list", mailbox: screen.mailbox }, "pop") }} > Archive Junk store.act(action, message)}> store.act("compose", undefined)}> ) : null}

) } const compose = store.compose return (

{content} !open && store.setCompose(null)} title={compose ? composeTitle(compose) : "New Message"} className="ex-phone-compose" > {compose ? ( <>

) : null}

) } function SendGlyph() { return ( ) } /* ── Root ──────────────────────────────────────────────────────── */ function MailApp() { const store = useMailStore() const { platform } = useStage() if (platform === "ios") return if (platform === "ipados") return return } function MailExample() { return ( ) } export { MailApp, MailExample }