forked from Goutam/lynkeduppro-crm
refactor(inbox): fold mail INTO the Inbox (one unified surface, no Mail tab)
The Inbox is the single communication surface — mentions, needs-reply, system alerts, support updates AND the mail behind them, all in one list. Removed the separate Mail tab. - Inbox is now two-pane: the item list (crm.inbox.*) on the left; clicking an item tied to a thread opens its conversation (MailReader) on the right to read + reply. Non-threaded items (e.g. system alerts) show their detail. Item actions (Done/Snooze/Archive) work for every item. - Compose new mail (in-app or email) from the Inbox header. - mail.tsx trimmed to reusable MailReader + NewMailModal (no standalone tab); sidebar + dashboard reverted to no Mail entry. - The existing work-item Inbox stays the notifier; this makes it the reader too. HTML bodies still render in a sandboxed iframe. tsc + next build clean. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
@@ -1,16 +1,15 @@
|
||||
"use client";
|
||||
|
||||
// ============================================================
|
||||
// Mail — a dedicated reader for app-to-app and email messages,
|
||||
// powered by IIOS via the be-crm data door (crm.mail.*). Distinct
|
||||
// from Messenger (chat) and from the work-item Inbox: this shows the
|
||||
// actual mail (subject + rendered body) and lets you read + reply +
|
||||
// compose. HTML bodies render inside a sandboxed iframe (no scripts).
|
||||
// Mail components used INSIDE the Inbox (not a separate tab).
|
||||
// The Inbox is the one unified surface — mentions, system messages
|
||||
// and mail all live there. These render the mail body + reply, and
|
||||
// compose a new message. HTML bodies render in a sandboxed iframe.
|
||||
// ============================================================
|
||||
|
||||
import { type CSSProperties, useEffect, useState } from "react";
|
||||
import { Avatar, Btn, Field, Icon, Modal, PageHead, Pill, useToast } from "./ui";
|
||||
import { useMailThreads, useMailThread, useMailCompose, type MailThread, type MailPerson } from "@/lib/mail-api";
|
||||
import { Avatar, Btn, Field, Icon, Modal, Pill } from "./ui";
|
||||
import { useMailThread, useMailCompose, type MailPerson } from "@/lib/mail-api";
|
||||
|
||||
const timeOf = (iso?: string) => {
|
||||
if (!iso) return "";
|
||||
@@ -23,87 +22,9 @@ const inputStyle: CSSProperties = {
|
||||
background: "var(--panel)", color: "var(--text)", fontSize: 14, outline: "none",
|
||||
};
|
||||
|
||||
export function Mail() {
|
||||
const list = useMailThreads();
|
||||
const toast = useToast();
|
||||
const [selected, setSelected] = useState<string | null>(null);
|
||||
const [newOpen, setNewOpen] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
if ((!selected || !list.threads.some((t) => t.threadId === selected)) && list.threads[0]) {
|
||||
setSelected(list.threads[0].threadId);
|
||||
}
|
||||
}, [list.threads, selected]);
|
||||
|
||||
const current = list.threads.find((t) => t.threadId === selected) ?? null;
|
||||
|
||||
return (
|
||||
<div className="view">
|
||||
<PageHead
|
||||
eyebrow="Communication" title="Mail" subtitle="Read and send app messages and email — everything in one place" icon="chat"
|
||||
actions={<Btn icon="plus" onClick={() => setNewOpen(true)}>New mail</Btn>}
|
||||
/>
|
||||
{!list.live && (
|
||||
<div style={{ margin: "0 0 14px", padding: "8px 14px", borderRadius: 10, background: "var(--panel-2)", color: "var(--muted)", fontSize: 13, border: "1px solid var(--border)" }}>
|
||||
Demo mode — running on mock data. It goes live once the Shell + be-crm are connected.
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className="card" style={{ display: "flex", height: 640, padding: 0, overflow: "hidden" }}>
|
||||
<aside style={{ width: 320, borderRight: "1px solid var(--border)", overflowY: "auto", background: "var(--panel)" }}>
|
||||
{list.loading && <div style={{ padding: 16, color: "var(--muted)" }}>Loading…</div>}
|
||||
{!list.loading && list.threads.length === 0 && (
|
||||
<div style={{ padding: 16, color: "var(--muted)" }}>No mail yet. Compose a new message.</div>
|
||||
)}
|
||||
{list.threads.map((t) => (
|
||||
<ThreadRow key={t.threadId} t={t} active={t.threadId === selected} onClick={() => setSelected(t.threadId)} />
|
||||
))}
|
||||
</aside>
|
||||
|
||||
<section style={{ flex: 1, display: "flex", flexDirection: "column", minWidth: 0, background: "var(--bg)" }}>
|
||||
{current ? (
|
||||
<Reader key={current.threadId} thread={current} onError={(m) => toast.push({ tone: "error", title: "Failed", desc: m })} />
|
||||
) : (
|
||||
<div style={{ margin: "auto", color: "var(--muted)", textAlign: "center" }}>
|
||||
<Icon name="chat" size={38} /><p>Select or compose a message</p>
|
||||
</div>
|
||||
)}
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<NewMailModal
|
||||
open={newOpen} onClose={() => setNewOpen(false)}
|
||||
onSent={() => { setNewOpen(false); list.refetch(); toast.push({ tone: "success", title: "Sent" }); }}
|
||||
onError={(m) => toast.push({ tone: "error", title: "Couldn't send", desc: m })}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ThreadRow({ t, active, onClick }: { t: MailThread; active: boolean; onClick: () => void }) {
|
||||
return (
|
||||
<button
|
||||
onClick={onClick}
|
||||
style={{
|
||||
display: "block", width: "100%", textAlign: "left", padding: "12px 16px", border: "none",
|
||||
borderBottom: "1px solid var(--border)", cursor: "pointer",
|
||||
background: active ? "var(--panel-2)" : "transparent", color: "var(--text)",
|
||||
}}
|
||||
>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center" }}>
|
||||
<span style={{ fontWeight: 600, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.subject || "(no subject)"}</span>
|
||||
<span style={{ color: "var(--muted)", fontSize: 11, flexShrink: 0 }}>{timeOf(t.lastAt)}</span>
|
||||
</div>
|
||||
<div style={{ display: "flex", justifyContent: "space-between", gap: 8, alignItems: "center", marginTop: 3 }}>
|
||||
<span style={{ color: "var(--muted)", fontSize: 12.5, whiteSpace: "nowrap", overflow: "hidden", textOverflow: "ellipsis" }}>{t.lastMessage ?? "No messages"}</span>
|
||||
{t.unread > 0 && <span style={{ background: "var(--orange)", color: "#fff", borderRadius: 999, fontSize: 11, padding: "1px 7px", flexShrink: 0 }}>{t.unread}</span>}
|
||||
</div>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function Reader({ thread, onError }: { thread: MailThread; onError: (m: string) => void }) {
|
||||
const t = useMailThread(thread.threadId);
|
||||
/** Reader + reply for one mail thread. Used in the Inbox detail pane when an item has a threadId. */
|
||||
export function MailReader({ threadId, subject, onError }: { threadId: string; subject: string; onError: (m: string) => void }) {
|
||||
const t = useMailThread(threadId);
|
||||
const [draft, setDraft] = useState("");
|
||||
const [sending, setSending] = useState(false);
|
||||
|
||||
@@ -117,29 +38,26 @@ function Reader({ thread, onError }: { thread: MailThread; onError: (m: string)
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<header style={{ padding: "14px 20px", borderBottom: "1px solid var(--border)" }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 16 }}>{thread.subject || "(no subject)"}</div>
|
||||
<div style={{ color: "var(--muted)", fontSize: 12, marginTop: 2 }}>{thread.participants.length} participant(s)</div>
|
||||
<div style={{ display: "flex", flexDirection: "column", height: "100%", minHeight: 0 }}>
|
||||
<header style={{ padding: "12px 18px", borderBottom: "1px solid var(--border)" }}>
|
||||
<div style={{ fontWeight: 700, fontSize: 15 }}>{subject || "(no subject)"}</div>
|
||||
</header>
|
||||
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: 18, display: "flex", flexDirection: "column", gap: 14 }}>
|
||||
<div style={{ flex: 1, overflowY: "auto", padding: 16, display: "flex", flexDirection: "column", gap: 12 }}>
|
||||
{t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>Loading…</div>}
|
||||
{!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages in this thread.</div>}
|
||||
{!t.loading && t.messages.length === 0 && <div style={{ margin: "auto", color: "var(--muted)" }}>No messages.</div>}
|
||||
{t.messages.map((m) => (
|
||||
<div key={m.interactionId} style={{ border: "1px solid var(--border)", borderRadius: 12, background: "var(--panel)", overflow: "hidden" }}>
|
||||
<div style={{ padding: "8px 14px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
|
||||
<div style={{ padding: "7px 12px", borderBottom: "1px solid var(--border)", display: "flex", justifyContent: "space-between", fontSize: 12, color: "var(--muted)" }}>
|
||||
<span>{m.kind === "EMAIL" ? "Email" : "Reply"}{m.actorId ? ` · ${m.actorId.replace(/^(pp_|cust_)/, "").slice(0, 8)}` : ""}</span>
|
||||
<span>{timeOf(m.occurredAt)}</span>
|
||||
</div>
|
||||
{m.html
|
||||
? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 220, border: "none", background: "#fff" }} />
|
||||
: <div style={{ padding: 14, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>}
|
||||
? <iframe sandbox="" srcDoc={m.html} title="mail body" style={{ width: "100%", height: 200, border: "none", background: "#fff" }} />
|
||||
: <div style={{ padding: 12, whiteSpace: "pre-wrap", wordBreak: "break-word", fontSize: 14 }}>{m.text}</div>}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<footer style={{ display: "flex", gap: 8, padding: 14, borderTop: "1px solid var(--border)" }}>
|
||||
<footer style={{ display: "flex", gap: 8, padding: 12, borderTop: "1px solid var(--border)" }}>
|
||||
<input
|
||||
value={draft} onChange={(e) => setDraft(e.target.value)}
|
||||
onKeyDown={(e) => { if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); void reply(); } }}
|
||||
@@ -147,14 +65,15 @@ function Reader({ thread, onError }: { thread: MailThread; onError: (m: string)
|
||||
/>
|
||||
<Btn icon="send" onClick={() => void reply()} disabled={sending || !draft.trim()}>Reply</Btn>
|
||||
</footer>
|
||||
</>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
|
||||
/** Compose a new message — in-app (to a person) or external (to an email). */
|
||||
export function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClose: () => void; onSent: () => void; onError: (m: string) => void }) {
|
||||
const compose = useMailCompose(onSent);
|
||||
const [mode, setMode] = useState<"internal" | "external">("internal");
|
||||
const [recipient, setRecipient] = useState(""); // userId (internal) or email (external)
|
||||
const [recipient, setRecipient] = useState("");
|
||||
const [subject, setSubject] = useState("");
|
||||
const [body, setBody] = useState("");
|
||||
const [q, setQ] = useState("");
|
||||
@@ -177,7 +96,7 @@ function NewMailModal({ open, onClose, onSent, onError }: { open: boolean; onClo
|
||||
|
||||
return (
|
||||
<Modal
|
||||
open={open} onClose={onClose} title="New mail" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
|
||||
open={open} onClose={onClose} title="New message" subtitle={mode === "internal" ? "To a team member or client (in-app)" : "To an email address"} icon="chat"
|
||||
footer={<>
|
||||
<Btn variant="ghost" onClick={onClose}>Cancel</Btn>
|
||||
<Btn icon="send" onClick={() => void send()} disabled={!canSend}>{busy ? "Sending…" : "Send"}</Btn>
|
||||
|
||||
Reference in New Issue
Block a user