437 lines
24 KiB
TypeScript
437 lines
24 KiB
TypeScript
 
|
// Mail's slide-out right panel (hidden by default, toggled like Calendar's right
|
||
|
|
// panel). Three tabs: Calendar (mini-month + agenda + search, from the calendar
|
||
|
|
// plugin), People (conversation senders / contact books, drilling into a contact
|
||
|
|
// detail), and Attachments (every attachment in the open thread). Data comes from
|
||
|
|
// the plugin APIs + the current thread; actions reuse the existing deep links
|
||
|
|
// (/mail?compose=, /mail?q=, /p/calendar?guest=).
|
||
|
|
import { useQuery } from "@tanstack/react-query";
|
||
|
|
import { lazy, Suspense, useEffect, useMemo, useRef, useState } from "react";
|
||
|
|
import { useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
import { useT } from "../../i18n";
|
||
|
|
import { api, apiFetch } from "../../lib/api";
|
||
|
|
import type { Address, AttachmentOut, MessageEnvelope, ThreadDetail } from "../../lib/types";
|
||
|
|
import { loadBundle } from "../../plugins/bundleLoader";
|
||
|
|
import { usePluginContext } from "../../plugins/context";
|
||
|
|
import { isPreviewable } from "../thread/previewKind";
|
||
|
|
|
||
|
|
interface InviteSignal { guests: string[]; n: number }
|
||
|
|
|
||
|
|
// Lazy: the preview bundles pdf.js — loaded only when a preview is opened.
|
||
|
|
const AttachmentPreview = lazy(() =>
|
||
|
|
import("../thread/AttachmentPreview").then((m) => ({ default: m.AttachmentPreview })),
|
||
|
|
);
|
||
|
|
|
||
|
|
export type PanelTab = "calendar" | "people" | "attachments";
|
||
|
|
|
||
|
|
// ---- small helpers ---------------------------------------------------------
|
||
|
|
const AV_COLORS = ["#ef4444", "#f97316", "#eab308", "#22c55e", "#14b8a6", "#3b82f6", "#8b5cf6", "#ec4899", "#6b7280"];
|
||
|
|
function avatarColor(key: string) {
|
||
|
|
let h = 0;
|
||
|
|
for (const c of key || "?") h = (h * 31 + c.charCodeAt(0)) >>> 0;
|
||
|
|
return AV_COLORS[h % AV_COLORS.length];
|
||
|
|
}
|
||
|
|
function initials(name: string) {
|
||
|
|
const p = (name || "").trim().split(/\s+/).filter(Boolean);
|
||
|
|
if (!p.length) return "?";
|
||
|
|
return ((p[0][0] || "") + (p.length > 1 ? p[p.length - 1][0] : "")).toUpperCase();
|
||
|
|
}
|
||
|
|
function Avatar({ name, email, size = 36 }: { name: string; email: string; size?: number }) {
|
||
|
|
return (
|
||
|
|
<span
|
||
|
|
className="inline-flex shrink-0 items-center justify-center rounded-full font-semibold text-white"
|
||
|
|
style={{ width: size, height: size, background: avatarColor(email || name), fontSize: Math.round(size * 0.38) }}
|
||
|
|
>
|
||
|
|
{initials(name || email)}
|
||
|
|
</span>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
function fmtSize(b: number) {
|
||
|
|
if (b < 1024) return `${b} B`;
|
||
|
|
if (b < 1024 * 1024) return `${Math.round(b / 1024)} KB`;
|
||
|
|
return `${(b / 1024 / 1024).toFixed(1)} MB`;
|
||
|
|
}
|
||
|
|
interface ContactListItem { id: string; display_name: string; primary_email: string; org: string; starred: boolean }
|
||
|
|
interface ContactDetail {
|
||
|
|
id: string; display_name: string; org: string; title: string; department: string;
|
||
|
|
emails: { value: string; type: string }[]; default_email: string;
|
||
|
|
phones: { value: string; type: string }[]; notes: string; starred: boolean;
|
||
|
|
groups: { id: string; name: string }[];
|
||
|
|
}
|
||
|
|
interface Group { id: string; name: string; count: number }
|
||
|
|
|
||
|
|
// ===========================================================================
|
||
|
|
export function RightPanel({
|
||
|
|
tab,
|
||
|
|
onTab,
|
||
|
|
onClose,
|
||
|
|
thread,
|
||
|
|
}: {
|
||
|
|
tab: PanelTab;
|
||
|
|
onTab: (t: PanelTab) => void;
|
||
|
|
onClose: () => void;
|
||
|
|
thread: ThreadDetail | undefined;
|
||
|
|
}) {
|
||
|
|
const t = useT();
|
||
|
|
// "Invite all to new event" (People tab) opens the SHARED calendar event form in
|
||
|
|
// the Calendar tab, prefilled with the selected people.
|
||
|
|
const [invite, setInvite] = useState<InviteSignal | null>(null);
|
||
|
|
const inviteAll = (guests: string[]) => { onTab("calendar"); setInvite({ guests, n: Date.now() }); };
|
||
|
|
const TABS: [PanelTab, string][] = [
|
||
|
|
["calendar", t("panel.calendar")],
|
||
|
|
["people", t("panel.people")],
|
||
|
|
["attachments", t("panel.attachments")],
|
||
|
|
];
|
||
|
|
return (
|
||
|
|
<aside className="flex h-full min-h-0 flex-col bg-app-surface">
|
||
|
|
<div className="flex h-[52px] shrink-0 items-center gap-4 border-b border-app-border px-4">
|
||
|
|
{TABS.map(([id, label]) => (
|
||
|
|
<button
|
||
|
|
key={id}
|
||
|
|
onClick={() => onTab(id)}
|
||
|
|
className={`-mb-px border-b-2 py-[15px] text-[15px] ${
|
||
|
|
tab === id ? "border-app-accent font-semibold text-app-fg" : "border-transparent text-app-muted hover:text-app-fg"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
</button>
|
||
|
|
))}
|
||
|
|
<button className="ml-auto rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg" title={t("common.close")} onClick={onClose}>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M6 6l12 12M18 6L6 18" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
{/* Calendar stays mounted (keeps its state) while hidden, so switching tabs is instant. */}
|
||
|
|
<div className={`min-h-0 flex-1 ${tab === "calendar" ? "" : "hidden"}`}>
|
||
|
|
<PanelCalendar invite={invite} />
|
||
|
|
</div>
|
||
|
|
{tab !== "calendar" && (
|
||
|
|
<div className="min-h-0 flex-1 overflow-y-auto">
|
||
|
|
{tab === "people" && <PeopleTab thread={thread} onInviteAll={inviteAll} />}
|
||
|
|
{tab === "attachments" && <AttachmentsTab thread={thread} />}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</aside>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- Calendar tab = the calendar plugin bundle, mounted in "panel" embed mode.
|
||
|
|
// This is the shared surface: the agenda, mini-month, event popover, event form
|
||
|
|
// and search results are the calendar app's own code, so future changes propagate.
|
||
|
|
const CAL_BUNDLE = "/api/plugins/calendar/ui/page.js";
|
||
|
|
function PanelCalendar({ invite }: { invite: InviteSignal | null }) {
|
||
|
|
const ref = useRef<HTMLDivElement>(null);
|
||
|
|
const ctx = usePluginContext("calendar");
|
||
|
|
// Remount when a new "Invite all" fires so the form opens with those guests.
|
||
|
|
const inviteN = invite?.n ?? 0;
|
||
|
|
useEffect(() => {
|
||
|
|
let alive = true;
|
||
|
|
let cleanup: (() => void) | void;
|
||
|
|
loadBundle(CAL_BUNDLE).then((mount) => {
|
||
|
|
if (!alive || !ref.current) return;
|
||
|
|
ref.current.innerHTML = "";
|
||
|
|
cleanup = mount(ref.current, ctx, { embed: "panel", newEventGuests: invite?.guests });
|
||
|
|
});
|
||
|
|
return () => { alive = false; if (typeof cleanup === "function") cleanup(); };
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [ctx, inviteN]);
|
||
|
|
return <div ref={ref} className="h-full" />;
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- footer link (Open X in new tab) --------------------------------------
|
||
|
|
function OpenInNewTab({ label, href }: { label: string; href: string }) {
|
||
|
|
return (
|
||
|
|
<div className="border-t border-app-border p-3 text-center">
|
||
|
|
<button
|
||
|
|
className="inline-flex items-center gap-1.5 text-[13px] text-app-muted hover:text-app-fg"
|
||
|
|
onClick={() => window.open(href, "_blank", "noopener,noreferrer")}
|
||
|
|
>
|
||
|
|
{label}
|
||
|
|
<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round" strokeLinejoin="round"><path d="M14 4h6v6M20 4l-9 9M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4" /></svg>
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
function MenuItem({ checked, onClick, children }: { checked?: boolean; onClick: () => void; children: React.ReactNode }) {
|
||
|
|
return (
|
||
|
|
<button className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-app-hover" onClick={onClick}>
|
||
|
|
<span className="w-3 shrink-0 text-app-accent">{checked ? "✓" : ""}</span>
|
||
|
|
<span className="flex items-center gap-2">{children}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ===========================================================================
|
||
|
|
// People tab
|
||
|
|
// ===========================================================================
|
||
|
|
type PeopleSource = "conversation" | "all" | "recent" | "vip" | "autosaved";
|
||
|
|
function PeopleTab({ thread, onInviteAll }: { thread: ThreadDetail | undefined; onInviteAll: (emails: string[]) => void }) {
|
||
|
|
const t = useT();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const [source, setSource] = useState<PeopleSource>("conversation");
|
||
|
|
const [srcMenu, setSrcMenu] = useState(false);
|
||
|
|
const [moreMenu, setMoreMenu] = useState(false);
|
||
|
|
const [openEmail, setOpenEmail] = useState<string | null>(null);
|
||
|
|
const [openName, setOpenName] = useState("");
|
||
|
|
|
||
|
|
// "In conversation" = unique senders from the open thread.
|
||
|
|
const convPeople = useMemo(() => {
|
||
|
|
const seen = new Map<string, Address>();
|
||
|
|
for (const m of thread?.messages ?? []) {
|
||
|
|
const a = m.from_addr[0];
|
||
|
|
if (a?.email && !seen.has(a.email.toLowerCase())) seen.set(a.email.toLowerCase(), a);
|
||
|
|
}
|
||
|
|
return [...seen.values()].map((a) => ({ id: "", display_name: a.name || a.email, primary_email: a.email }));
|
||
|
|
}, [thread]);
|
||
|
|
|
||
|
|
const groups = useQuery({ queryKey: ["contact-groups"], queryFn: () => apiFetch<Group[]>("/plugins/contacts/groups"), enabled: source === "autosaved" });
|
||
|
|
const autosavedId = groups.data?.find((g) => g.name === "Autosaved")?.id ?? "";
|
||
|
|
const filterMap: Record<PeopleSource, string> = { conversation: "", all: "all", recent: "recent", vip: "vip", autosaved: "all" };
|
||
|
|
const contactList = useQuery({
|
||
|
|
queryKey: ["panel-contacts", source, autosavedId],
|
||
|
|
enabled: source !== "conversation" && (source !== "autosaved" || !!autosavedId),
|
||
|
|
queryFn: () =>
|
||
|
|
apiFetch<{ contacts: ContactListItem[] }>(
|
||
|
|
`/plugins/contacts/contacts?filter=${filterMap[source]}&group=${source === "autosaved" ? autosavedId : ""}&q=`,
|
||
|
|
),
|
||
|
|
});
|
||
|
|
|
||
|
|
const people = source === "conversation" ? convPeople : (contactList.data?.contacts ?? []);
|
||
|
|
const allEmails = people.map((p) => p.primary_email).filter(Boolean);
|
||
|
|
|
||
|
|
if (openEmail) {
|
||
|
|
return <PersonDetail email={openEmail} name={openName} onBack={() => setOpenEmail(null)} />;
|
||
|
|
}
|
||
|
|
|
||
|
|
const SOURCES: [PeopleSource, string][] = [
|
||
|
|
["conversation", t("panel.inConversation")],
|
||
|
|
["all", t("panel.allContacts")],
|
||
|
|
["recent", t("panel.recent")],
|
||
|
|
["vip", t("panel.vips")],
|
||
|
|
["autosaved", t("panel.autosaved")],
|
||
|
|
];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div>
|
||
|
|
<div className="flex items-center gap-1 border-b border-app-border px-4 py-2">
|
||
|
|
<div className="relative">
|
||
|
|
<button className="flex items-center gap-1.5 rounded px-1 py-1 text-[15px] font-semibold hover:text-app-fg" onClick={() => setSrcMenu((m) => !m)}>
|
||
|
|
{SOURCES.find(([s]) => s === source)?.[1]}
|
||
|
|
<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6"><path d="M4 6l4 4 4-4" /></svg>
|
||
|
|
</button>
|
||
|
|
{srcMenu && (
|
||
|
|
<>
|
||
|
|
<div className="fixed inset-0 z-10" onClick={() => setSrcMenu(false)} />
|
||
|
|
<div className="absolute left-0 z-20 mt-1 min-w-[170px] rounded-lg border border-app-border bg-app-elevated py-1 text-[13px] shadow-lg">
|
||
|
|
{SOURCES.map(([s, label]) => (
|
||
|
|
<MenuItem key={s} checked={source === s} onClick={() => { setSource(s); setSrcMenu(false); }}>{label}</MenuItem>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className="relative ml-auto">
|
||
|
|
<button className="rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg" onClick={() => setMoreMenu((m) => !m)}>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor"><circle cx="5" cy="12" r="1.6" /><circle cx="12" cy="12" r="1.6" /><circle cx="19" cy="12" r="1.6" /></svg>
|
||
|
|
</button>
|
||
|
|
{moreMenu && (
|
||
|
|
<>
|
||
|
|
<div className="fixed inset-0 z-10" onClick={() => setMoreMenu(false)} />
|
||
|
|
<div className="absolute right-0 z-20 mt-1 min-w-[190px] rounded-lg border border-app-border bg-app-elevated py-1 text-[13px] shadow-lg">
|
||
|
|
<button className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-app-hover disabled:opacity-40" disabled={!allEmails.length} onClick={() => { setMoreMenu(false); navigate(`/mail?compose=1&to=${encodeURIComponent(allEmails.join(", "))}`); }}>
|
||
|
|
{t("panel.composeAll")}
|
||
|
|
</button>
|
||
|
|
<button className="flex w-full items-center gap-2 px-3 py-1.5 text-left hover:bg-app-hover disabled:opacity-40" disabled={!allEmails.length} onClick={() => { setMoreMenu(false); onInviteAll(allEmails); }}>
|
||
|
|
{t("panel.inviteAll")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="px-3 py-2 text-[12px] font-semibold uppercase tracking-wide text-app-faint">{t("panel.senders")}</div>
|
||
|
|
{people.length === 0 ? (
|
||
|
|
<div className="px-4 py-6 text-sm text-app-faint">{t("panel.noPeople")}</div>
|
||
|
|
) : (
|
||
|
|
people.map((p, i) => (
|
||
|
|
<button key={p.primary_email + i} className="flex w-full items-center gap-3 px-4 py-2 text-left hover:bg-app-hover" onClick={() => { setOpenName(p.display_name); setOpenEmail(p.primary_email); }}>
|
||
|
|
<Avatar name={p.display_name} email={p.primary_email} />
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="truncate font-medium">{p.display_name}</div>
|
||
|
|
<div className="truncate text-[13px] text-app-muted">{p.primary_email}</div>
|
||
|
|
</div>
|
||
|
|
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" className="text-app-faint"><path d="M6 4l4 4-4 4" /></svg>
|
||
|
|
</button>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ---- People: drill-in contact detail --------------------------------------
|
||
|
|
function PersonDetail({ email, name, onBack }: { email: string; name: string; onBack: () => void }) {
|
||
|
|
const t = useT();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
// Resolve to a saved contact by email (best match), else show a synthetic card.
|
||
|
|
const suggest = useQuery({ queryKey: ["contact-suggest", email], queryFn: () => apiFetch<{ email: string; contact_id: string }[]>(`/plugins/contacts/suggest?q=${encodeURIComponent(email)}`) });
|
||
|
|
const contactId = suggest.data?.find((s) => s.email.toLowerCase() === email.toLowerCase())?.contact_id;
|
||
|
|
const detail = useQuery({ queryKey: ["contact", contactId], enabled: !!contactId, queryFn: () => apiFetch<ContactDetail>(`/plugins/contacts/contacts/${contactId}`) });
|
||
|
|
const mail = useQuery({ queryKey: ["panel-person-mail", email], queryFn: () => api.search(`"${email}"`) });
|
||
|
|
|
||
|
|
const c = detail.data;
|
||
|
|
const display = c?.display_name || name || email;
|
||
|
|
const primary = c?.default_email || email;
|
||
|
|
|
||
|
|
const ActionBtn = ({ icon, label, onClick, disabled }: { icon: React.ReactNode; label: string; onClick: () => void; disabled?: boolean }) => (
|
||
|
|
<button className="flex flex-col items-center gap-1.5 disabled:opacity-40" disabled={disabled} onClick={onClick}>
|
||
|
|
<span className="flex h-10 w-10 items-center justify-center rounded-full border border-app-border text-app-fg">{icon}</span>
|
||
|
|
<span className="text-[12px] text-app-muted">{label}</span>
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="flex items-center gap-2 border-b border-app-border px-3 py-2">
|
||
|
|
<button className="rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg" onClick={onBack}>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.8" strokeLinecap="round"><path d="M15 6l-6 6 6 6" /></svg>
|
||
|
|
</button>
|
||
|
|
<span className="ml-auto text-app-faint">{c?.starred ? "★" : "☆"}</span>
|
||
|
|
{contactId && <button className="text-[13px] text-app-accent" onClick={() => window.open("/p/contacts", "_blank", "noopener")}>{t("common.edit")}</button>}
|
||
|
|
</div>
|
||
|
|
<div className="min-h-0 flex-1 overflow-y-auto px-4 py-4">
|
||
|
|
<div className="flex items-center gap-4">
|
||
|
|
<Avatar name={display} email={primary} size={56} />
|
||
|
|
<div className="text-[20px] font-semibold">{display}</div>
|
||
|
|
</div>
|
||
|
|
<div className="mt-4 flex justify-around">
|
||
|
|
<ActionBtn label={t("panel.call")} disabled={!c?.phones?.length} onClick={() => c?.phones?.[0] && window.open(`tel:${c.phones[0].value}`)} icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M4 4h4l2 5-3 2a12 12 0 0 0 6 6l2-3 5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 2 6a2 2 0 0 1 2-2" /></svg>} />
|
||
|
|
<ActionBtn label={t("panel.message")} onClick={() => navigate(`/mail?compose=1&to=${encodeURIComponent(primary)}`)} icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M21 15a2 2 0 0 1-2 2H8l-4 4V5a2 2 0 0 1 2-2h13a2 2 0 0 1 2 2z" /></svg>} />
|
||
|
|
<ActionBtn label={t("panel.compose")} onClick={() => navigate(`/mail?compose=1&to=${encodeURIComponent(primary)}`)} icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 20h9" /><path d="M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4z" /></svg>} />
|
||
|
|
<ActionBtn label={t("panel.invite")} onClick={() => window.open(`/p/calendar?guest=${encodeURIComponent(primary)}`, "_blank", "noopener")} icon={<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" /><path d="M16 2v4M8 2v4M3 10h18" /></svg>} />
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-6">
|
||
|
|
<div className="mb-1 flex items-center justify-between">
|
||
|
|
<div className="text-[15px] font-semibold">{t("panel.contactDetails")}</div>
|
||
|
|
{contactId && <button className="text-[13px] text-app-accent hover:underline" onClick={() => window.open("/p/contacts", "_blank", "noopener")}>{t("panel.showAll")}</button>}
|
||
|
|
</div>
|
||
|
|
<div className="border-t border-app-border py-2 text-sm">
|
||
|
|
<a href={`mailto:${primary}`} className="text-app-accent hover:underline">{primary}</a>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-5">
|
||
|
|
<div className="mb-1 text-[15px] font-semibold">{t("panel.mailSection")}</div>
|
||
|
|
{mail.isLoading ? (
|
||
|
|
<div className="border-t border-app-border py-3 text-sm text-app-faint">{t("common.loading")}</div>
|
||
|
|
) : (mail.data?.threads ?? []).length === 0 ? (
|
||
|
|
<div className="border-t border-app-border py-3 text-sm text-app-faint">{t("panel.noMatches")}</div>
|
||
|
|
) : (
|
||
|
|
(mail.data?.threads ?? []).slice(0, 5).map((h) => (
|
||
|
|
<button key={h.thread.id} className="flex w-full gap-2 border-t border-app-border py-2 text-left hover:bg-app-hover" onClick={() => navigate(`/mail/t/${h.thread.id}`)}>
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
<div className="truncate text-[13px] font-semibold">{h.thread.subject || t("panel.noSubject")}</div>
|
||
|
|
<div className="truncate text-[12px] text-app-muted">{h.thread.snippet}</div>
|
||
|
|
</div>
|
||
|
|
</button>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
<button className="mt-3 flex items-center gap-2 rounded bg-app-hover px-3 py-1.5 text-[13px] hover:opacity-90" onClick={() => navigate(`/mail?q=${encodeURIComponent(email)}`)}>
|
||
|
|
<svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round"><circle cx="11" cy="11" r="7" /><path d="M21 21l-4.3-4.3" /></svg>
|
||
|
|
{t("panel.findAll", { name: display.split(" ")[0] || display })}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div className="mt-5">
|
||
|
|
<div className="mb-1 text-[15px] font-semibold">{t("panel.eventsSection")}</div>
|
||
|
|
<div className="border-t border-app-border py-3 text-sm text-app-faint">{t("panel.noMatches")}</div>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
<OpenInNewTab label={t("panel.openContact")} href="/p/contacts" />
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
// ===========================================================================
|
||
|
|
// Attachments tab
|
||
|
|
// ===========================================================================
|
||
|
|
function AttachmentsTab({ thread }: { thread: ThreadDetail | undefined }) {
|
||
|
|
const t = useT();
|
||
|
|
const withAtt = (thread?.messages ?? []).filter((m) => m.has_attachments);
|
||
|
|
const q = useQuery({
|
||
|
|
queryKey: ["panel-attachments", thread?.id, withAtt.map((m) => m.id).join(",")],
|
||
|
|
enabled: !!thread && withAtt.length > 0,
|
||
|
|
queryFn: async () => {
|
||
|
|
const groups = await Promise.all(withAtt.map(async (m) => ({ msg: m, atts: await api.messageAttachments(m.id) })));
|
||
|
|
return groups.filter((g) => g.atts.length > 0);
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
// Full-screen preview overlay, per message (previewable subset of that message).
|
||
|
|
const [preview, setPreview] = useState<{ messageId: string; list: AttachmentOut[]; index: number } | null>(null);
|
||
|
|
|
||
|
|
if (!thread) return <div className="px-4 py-6 text-sm text-app-faint">{t("panel.openConversation")}</div>;
|
||
|
|
if (q.isLoading) return <div className="px-4 py-6 text-sm text-app-faint">{t("common.loading")}</div>;
|
||
|
|
const groups = q.data ?? [];
|
||
|
|
if (groups.length === 0) return <div className="px-4 py-6 text-sm text-app-faint">{t("panel.noAttachments")}</div>;
|
||
|
|
|
||
|
|
const senderName = (m: MessageEnvelope) => m.from_addr[0]?.name || m.from_addr[0]?.email || "";
|
||
|
|
const shortDate = (iso: string) => new Date(iso).toLocaleDateString("en-GB", { month: "short", day: "numeric" });
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="px-3 py-2">
|
||
|
|
{groups.map(({ msg, atts }) => {
|
||
|
|
const previewable = atts.filter((a) => isPreviewable(a.filename));
|
||
|
|
return (
|
||
|
|
<div key={msg.id} className="mb-3">
|
||
|
|
<div className="mb-1.5 flex items-center justify-between px-1">
|
||
|
|
<span className="truncate text-[14px] font-semibold text-app-accent">{senderName(msg)}</span>
|
||
|
|
<span className="shrink-0 text-[12px] text-app-muted">{shortDate(msg.date)}</span>
|
||
|
|
</div>
|
||
|
|
<div className="space-y-1.5">
|
||
|
|
{atts.map((a) => {
|
||
|
|
const canPreview = isPreviewable(a.filename);
|
||
|
|
return (
|
||
|
|
<div key={a.id} className="flex items-center gap-3 rounded-lg border border-app-border px-3 py-2">
|
||
|
|
<svg width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.4" className="shrink-0 text-app-muted"><path d="M14 3v4a1 1 0 0 0 1 1h4" /><path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2z" /></svg>
|
||
|
|
<div className="min-w-0 flex-1">
|
||
|
|
{canPreview ? (
|
||
|
|
<button
|
||
|
|
className="block max-w-full truncate text-left text-[13px] font-medium text-app-accent hover:underline"
|
||
|
|
title={a.filename}
|
||
|
|
onClick={() => setPreview({ messageId: msg.id, list: previewable, index: previewable.findIndex((p) => p.id === a.id) })}
|
||
|
|
>
|
||
|
|
{a.filename}
|
||
|
|
</button>
|
||
|
|
) : (
|
||
|
|
<div className="truncate text-[13px] font-medium" title={a.filename}>{a.filename}</div>
|
||
|
|
)}
|
||
|
|
<div className="text-[12px] text-app-muted">{fmtSize(a.size_bytes)}</div>
|
||
|
|
</div>
|
||
|
|
<a href={api.attachmentDownloadUrl(msg.id, a.id)} className="shrink-0 rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg" title={t("panel.download")}>
|
||
|
|
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.7" strokeLinecap="round" strokeLinejoin="round"><path d="M12 3v12m0 0l-4-4m4 4l4-4M4 21h16" /></svg>
|
||
|
|
</a>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
{preview && (
|
||
|
|
<Suspense fallback={null}>
|
||
|
|
<AttachmentPreview
|
||
|
|
messageId={preview.messageId}
|
||
|
|
attachments={preview.list}
|
||
|
|
index={preview.index}
|
||
|
|
onIndex={(i) => setPreview((p) => (p ? { ...p, index: i } : p))}
|
||
|
|
onClose={() => setPreview(null)}
|
||
|
|
/>
|
||
|
|
</Suspense>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|