455 lines
16 KiB
TypeScript
455 lines
16 KiB
TypeScript
 
|
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||
|
|
import { useEffect, useRef, useState } from "react";
|
||
|
|
import { Link, useMatch, useNavigate } from "react-router-dom";
|
||
|
|
|
||
|
|
import { Composer, type ComposerInit, draftToInit } from "../components/compose/Composer";
|
||
|
|
import { DraftsList } from "../components/list/DraftsList";
|
||
|
|
import { Icon } from "../components/Icon";
|
||
|
|
import { MessageList } from "../components/list/MessageList";
|
||
|
|
import { Resizer } from "../components/Resizer";
|
||
|
|
import { ThemeToggle } from "../components/ThemeToggle";
|
||
|
|
import { ThreadView } from "../components/thread/ThreadView";
|
||
|
|
import { useT } from "../i18n";
|
||
|
|
import type { MessageKey } from "../i18n/en";
|
||
|
|
import { api } from "../lib/api";
|
||
|
|
import type { ThreadSummary } from "../lib/types";
|
||
|
|
import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";
|
||
|
|
|
||
|
|
// Unified per-folder views. "Spam" maps to the IMAP special-use "junk".
|
||
|
|
const FOLDERS: { view: string; icon: string; label: MessageKey }[] = [
|
||
|
|
{ view: "folder:inbox", icon: "inbox", label: "nav.inbox" },
|
||
|
|
{ view: "folder:archive", icon: "archive", label: "nav.archive" },
|
||
|
|
{ view: "folder:drafts", icon: "drafts", label: "nav.drafts" },
|
||
|
|
{ view: "folder:sent", icon: "sent", label: "nav.sent" },
|
||
|
|
{ view: "folder:junk", icon: "spam", label: "nav.spam" },
|
||
|
|
{ view: "folder:trash", icon: "trash", label: "nav.trash" },
|
||
|
|
];
|
||
|
|
|
||
|
|
export function MailLayout() {
|
||
|
|
const t = useT();
|
||
|
|
const navigate = useNavigate();
|
||
|
|
const queryClient = useQueryClient();
|
||
|
|
const match = useMatch("/mail/t/:threadId");
|
||
|
|
const threadId = match?.params.threadId;
|
||
|
|
const [view, setView] = useState<string>("folder:inbox");
|
||
|
|
const [term, setTerm] = useState("");
|
||
|
|
const [filter, setFilter] = useState<"all" | "unread" | "pinned">("all");
|
||
|
|
const [listOrder, setListOrder] = useState<"newest" | "oldest">("newest");
|
||
|
|
const [composing, setComposing] = useState<ComposerInit | null>(null);
|
||
|
|
const [composerExpanded, setComposerExpanded] = useState(false);
|
||
|
|
const [replySignal, setReplySignal] = useState<{ kind: string; seq: number }>();
|
||
|
|
const searchRef = useRef<HTMLInputElement>(null);
|
||
|
|
|
||
|
|
// Resizable panel widths (persisted). Drag the dividers to adjust.
|
||
|
|
const [sidebarW, setSidebarW] = useState(() => Number(localStorage.getItem("panel.sidebar")) || 240);
|
||
|
|
const [listW, setListW] = useState(() => Number(localStorage.getItem("panel.list")) || 384);
|
||
|
|
const clampSidebar = (w: number) => Math.min(Math.max(w, 180), 420);
|
||
|
|
// The list can be dragged up to 75% of the window width.
|
||
|
|
const clampList = (w: number) => Math.min(Math.max(w, 260), window.innerWidth * 0.75);
|
||
|
|
useEffect(() => localStorage.setItem("panel.sidebar", String(sidebarW)), [sidebarW]);
|
||
|
|
useEffect(() => localStorage.setItem("panel.list", String(listW)), [listW]);
|
||
|
|
|
||
|
|
const isDrafts = view === "folder:drafts";
|
||
|
|
// Which special-use folder the reading pane is showing (drives the toolbar).
|
||
|
|
const currentFolder = view.startsWith("folder:") ? view.slice("folder:".length) : "inbox";
|
||
|
|
const accountsQuery = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
|
||
|
|
const threadsQuery = useQuery({
|
||
|
|
queryKey: ["threads", view],
|
||
|
|
queryFn: () => api.threads(view),
|
||
|
|
enabled: !isDrafts,
|
||
|
|
});
|
||
|
|
const draftsQuery = useQuery({
|
||
|
|
queryKey: ["drafts"],
|
||
|
|
queryFn: api.listDrafts,
|
||
|
|
enabled: isDrafts,
|
||
|
|
});
|
||
|
|
const searchQuery = useQuery({
|
||
|
|
queryKey: ["search", term],
|
||
|
|
queryFn: () => api.search(term),
|
||
|
|
enabled: term.trim().length > 0,
|
||
|
|
});
|
||
|
|
const settingsQuery = useQuery({ queryKey: ["settings"], queryFn: api.settings });
|
||
|
|
const threadOrder: "asc" | "desc" = settingsQuery.data?.thread_order ?? "asc";
|
||
|
|
|
||
|
|
const allThreads: ThreadSummary[] = term.trim()
|
||
|
|
? (searchQuery.data?.threads ?? []).map((h) => h.thread)
|
||
|
|
: (threadsQuery.data?.threads ?? []);
|
||
|
|
const filtered = allThreads.filter((th) =>
|
||
|
|
filter === "unread" ? th.unread_count > 0 : filter === "pinned" ? th.pinned : true,
|
||
|
|
);
|
||
|
|
// The backend returns threads newest-first; reverse for an oldest-first view.
|
||
|
|
const threads = listOrder === "newest" ? filtered : [...filtered].reverse();
|
||
|
|
|
||
|
|
const threadsRef = useRef<ThreadSummary[]>(threads);
|
||
|
|
threadsRef.current = threads;
|
||
|
|
|
||
|
|
const detailQuery = useQuery({
|
||
|
|
queryKey: ["thread", threadId, threadOrder],
|
||
|
|
queryFn: () => api.thread(threadId!, threadOrder),
|
||
|
|
enabled: Boolean(threadId),
|
||
|
|
});
|
||
|
|
|
||
|
|
const markRead = useMutation({
|
||
|
|
mutationFn: (id: string) => api.threadFlags(id, ["\\Seen"], []),
|
||
|
|
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["threads"] }),
|
||
|
|
});
|
||
|
|
useEffect(() => {
|
||
|
|
const detail = detailQuery.data;
|
||
|
|
if (detail && detail.messages.some((m) => m.is_unread)) markRead.mutate(detail.id);
|
||
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
||
|
|
}, [detailQuery.data?.id]);
|
||
|
|
|
||
|
|
const afterMove = () => {
|
||
|
|
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||
|
|
navigate("/mail");
|
||
|
|
};
|
||
|
|
|
||
|
|
const archive = async () => {
|
||
|
|
if (!threadId) return;
|
||
|
|
await api.archiveThread(threadId);
|
||
|
|
afterMove();
|
||
|
|
};
|
||
|
|
|
||
|
|
const trash = async () => {
|
||
|
|
if (!threadId) return;
|
||
|
|
await api.trashThread(threadId);
|
||
|
|
afterMove();
|
||
|
|
};
|
||
|
|
|
||
|
|
const restore = async () => {
|
||
|
|
if (!threadId) return;
|
||
|
|
await api.restoreThread(threadId);
|
||
|
|
afterMove();
|
||
|
|
};
|
||
|
|
|
||
|
|
const deletePermanent = async () => {
|
||
|
|
if (!threadId) return;
|
||
|
|
await api.deleteThreadPermanent(threadId);
|
||
|
|
afterMove();
|
||
|
|
};
|
||
|
|
|
||
|
|
const togglePin = async () => {
|
||
|
|
const detail = detailQuery.data;
|
||
|
|
if (!detail) return;
|
||
|
|
await api.threadFlags(
|
||
|
|
detail.id,
|
||
|
|
detail.pinned ? [] : ["\\Flagged"],
|
||
|
|
detail.pinned ? ["\\Flagged"] : [],
|
||
|
|
);
|
||
|
|
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||
|
|
queryClient.invalidateQueries({ queryKey: ["thread", detail.id] });
|
||
|
|
};
|
||
|
|
|
||
|
|
const openRelative = (delta: number) => {
|
||
|
|
const list = threadsRef.current;
|
||
|
|
if (list.length === 0) return;
|
||
|
|
const idx = list.findIndex((th) => th.id === threadId);
|
||
|
|
const next = Math.min(Math.max((idx < 0 ? -1 : idx) + delta, 0), list.length - 1);
|
||
|
|
navigate(`/mail/t/${list[next].id}`);
|
||
|
|
};
|
||
|
|
|
||
|
|
useKeyboardShortcuts({
|
||
|
|
onSearch: () => searchRef.current?.focus(),
|
||
|
|
onCompose: () => accountsQuery.data?.[0] && setComposing({ accountId: accountsQuery.data[0].id, kind: "new" }),
|
||
|
|
onReply: () => setReplySignal({ kind: "reply", seq: Date.now() }),
|
||
|
|
onReplyAll: () => setReplySignal({ kind: "reply_all", seq: Date.now() }),
|
||
|
|
onForward: () => setReplySignal({ kind: "forward", seq: Date.now() }),
|
||
|
|
onArchive: archive,
|
||
|
|
onGoInbox: () => {
|
||
|
|
setView("folder:inbox");
|
||
|
|
navigate("/mail");
|
||
|
|
},
|
||
|
|
onEscape: () => setComposing(null),
|
||
|
|
onNext: () => openRelative(1),
|
||
|
|
onPrev: () => openRelative(-1),
|
||
|
|
});
|
||
|
|
|
||
|
|
const accounts = accountsQuery.data ?? [];
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="flex h-screen bg-app-bg text-app-fg">
|
||
|
|
{/* Sidebar */}
|
||
|
|
<aside
|
||
|
|
style={{ width: sidebarW }}
|
||
|
|
className="flex shrink-0 flex-col border-r border-app-border bg-app-bg"
|
||
|
|
>
|
||
|
|
<div className="flex items-center justify-between px-3 pb-1 pt-3">
|
||
|
|
<span className="text-xs font-semibold uppercase tracking-wide text-app-faint">
|
||
|
|
{t("common.appName")}
|
||
|
|
</span>
|
||
|
|
<ThemeToggle />
|
||
|
|
</div>
|
||
|
|
<div className="px-3 pb-2">
|
||
|
|
<button
|
||
|
|
className="flex w-full items-center justify-center gap-2 rounded-lg bg-app-accent py-2 text-sm font-medium text-app-accent-fg shadow-sm hover:opacity-90"
|
||
|
|
onClick={() => accounts[0] && setComposing({ accountId: accounts[0].id, kind: "new" })}
|
||
|
|
>
|
||
|
|
<Icon name="compose" size={16} />
|
||
|
|
{t("nav.compose")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
<nav className="flex-1 space-y-0.5 overflow-y-auto px-2 py-1 text-sm">
|
||
|
|
{FOLDERS.map((f) => (
|
||
|
|
<SidebarItem
|
||
|
|
key={f.view}
|
||
|
|
active={view === f.view}
|
||
|
|
onClick={() => {
|
||
|
|
setView(f.view);
|
||
|
|
navigate("/mail");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<Icon name={f.icon} size={18} />
|
||
|
|
{t(f.label)}
|
||
|
|
</SidebarItem>
|
||
|
|
))}
|
||
|
|
<div className="px-3 pb-1 pt-3 text-[11px] font-semibold uppercase tracking-wide text-app-faint">
|
||
|
|
{t("settings.accounts")}
|
||
|
|
</div>
|
||
|
|
{accounts.map((a) => (
|
||
|
|
<SidebarItem
|
||
|
|
key={a.id}
|
||
|
|
active={view === `account:${a.id}`}
|
||
|
|
onClick={() => { setView(`account:${a.id}`); navigate("/mail"); }}
|
||
|
|
>
|
||
|
|
<span className="h-2.5 w-2.5 shrink-0 rounded-full" style={{ backgroundColor: a.color }} />
|
||
|
|
<span className="truncate">{a.email}</span>
|
||
|
|
</SidebarItem>
|
||
|
|
))}
|
||
|
|
</nav>
|
||
|
|
<div className="border-t border-app-border p-2 text-sm">
|
||
|
|
<Link className="block rounded-lg px-3 py-2 text-app-muted hover:bg-app-hover hover:text-app-fg" to="/settings">
|
||
|
|
⚙ {t("nav.settings")}
|
||
|
|
</Link>
|
||
|
|
<button
|
||
|
|
className="block w-full rounded-lg px-3 py-2 text-left text-app-muted hover:bg-app-hover hover:text-app-fg"
|
||
|
|
onClick={async () => {
|
||
|
|
await api.logout();
|
||
|
|
queryClient.clear();
|
||
|
|
navigate("/login");
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{t("common.signOut")}
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</aside>
|
||
|
|
|
||
|
|
<Resizer onDelta={(dx) => setSidebarW((w) => clampSidebar(w + dx))} />
|
||
|
|
|
||
|
|
{/* Message list */}
|
||
|
|
<div
|
||
|
|
style={{ width: listW }}
|
||
|
|
className="flex shrink-0 flex-col border-r border-app-border bg-app-surface"
|
||
|
|
>
|
||
|
|
<div className="flex h-[52px] shrink-0 items-center border-b border-app-border px-2.5">
|
||
|
|
<input
|
||
|
|
ref={searchRef}
|
||
|
|
className="w-full rounded-lg border border-app-border bg-app-bg px-3 py-1.5 text-sm text-app-fg placeholder:text-app-faint focus:border-app-accent focus:outline-none"
|
||
|
|
placeholder={t("nav.search")}
|
||
|
|
value={term}
|
||
|
|
onChange={(e) => setTerm(e.target.value)}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
{!isDrafts && (
|
||
|
|
<div className="flex h-[44px] shrink-0 items-center gap-5 border-b border-app-border px-3 text-sm">
|
||
|
|
<FilterTab active={filter === "all"} onClick={() => setFilter("all")}>
|
||
|
|
{t("filter.all")}
|
||
|
|
</FilterTab>
|
||
|
|
<FilterTab active={filter === "unread"} onClick={() => setFilter("unread")}>
|
||
|
|
{t("filter.unread")}
|
||
|
|
</FilterTab>
|
||
|
|
<FilterTab active={filter === "pinned"} onClick={() => setFilter("pinned")}>
|
||
|
|
{t("filter.pinned")}
|
||
|
|
</FilterTab>
|
||
|
|
<button
|
||
|
|
className="ml-auto rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
|
||
|
|
title={listOrder === "newest" ? t("filter.sortOldest") : t("filter.sortNewest")}
|
||
|
|
aria-label={listOrder === "newest" ? t("filter.sortOldest") : t("filter.sortNewest")}
|
||
|
|
onClick={() => setListOrder((o) => (o === "newest" ? "oldest" : "newest"))}
|
||
|
|
>
|
||
|
|
<SortIcon />
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
<div className="min-h-0 flex-1">
|
||
|
|
{isDrafts && !term.trim() ? (
|
||
|
|
<DraftsList
|
||
|
|
drafts={draftsQuery.data ?? []}
|
||
|
|
onOpen={(draft) => {
|
||
|
|
setComposing(draftToInit(draft));
|
||
|
|
setComposerExpanded(true);
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
) : (
|
||
|
|
<MessageList threads={threads} accounts={accounts} selectedId={threadId} onSelect={(id) => navigate(`/mail/t/${id}`)} />
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<Resizer onDelta={(dx) => setListW((w) => clampList(w + dx))} />
|
||
|
|
|
||
|
|
{/* Thread pane */}
|
||
|
|
<main className="relative min-w-0 flex-1 bg-app-surface">
|
||
|
|
{threadId && detailQuery.data ? (
|
||
|
|
<div className="flex h-full flex-col">
|
||
|
|
<div className="flex h-[52px] items-center gap-1 border-b border-app-border bg-app-surface px-3 text-sm">
|
||
|
|
{currentFolder === "archive" ? (
|
||
|
|
<>
|
||
|
|
<ToolbarButton onClick={restore}>
|
||
|
|
<Icon name="inbox" size={16} />
|
||
|
|
{t("mail.restore")}
|
||
|
|
</ToolbarButton>
|
||
|
|
<ToolbarButton onClick={trash}>
|
||
|
|
<Icon name="trash" size={16} />
|
||
|
|
{t("mail.delete")}
|
||
|
|
</ToolbarButton>
|
||
|
|
</>
|
||
|
|
) : currentFolder === "trash" ? (
|
||
|
|
<>
|
||
|
|
<ToolbarButton onClick={restore}>
|
||
|
|
<Icon name="inbox" size={16} />
|
||
|
|
{t("mail.restore")}
|
||
|
|
</ToolbarButton>
|
||
|
|
<ToolbarButton onClick={deletePermanent}>
|
||
|
|
<Icon name="trash" size={16} />
|
||
|
|
{t("mail.delete")}
|
||
|
|
</ToolbarButton>
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<ToolbarButton onClick={archive}>
|
||
|
|
<Icon name="archive" size={16} />
|
||
|
|
{t("mail.archive")}
|
||
|
|
</ToolbarButton>
|
||
|
|
<ToolbarButton onClick={togglePin} active={detailQuery.data.pinned}>
|
||
|
|
<Icon
|
||
|
|
name="pin"
|
||
|
|
size={16}
|
||
|
|
className={detailQuery.data.pinned ? "text-[rgb(220_129_143)]" : ""}
|
||
|
|
/>
|
||
|
|
{detailQuery.data.pinned ? t("mail.unpin") : t("mail.pin")}
|
||
|
|
</ToolbarButton>
|
||
|
|
<ToolbarButton onClick={trash}>
|
||
|
|
<Icon name="trash" size={16} />
|
||
|
|
{t("mail.delete")}
|
||
|
|
</ToolbarButton>
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<span className="ml-auto text-xs text-app-faint">
|
||
|
|
{t("mail.messageCount", { count: detailQuery.data.messages.length })}
|
||
|
|
</span>
|
||
|
|
</div>
|
||
|
|
<div className="min-h-0 flex-1 overflow-hidden">
|
||
|
|
<ThreadView
|
||
|
|
subject={detailQuery.data.subject}
|
||
|
|
messages={detailQuery.data.messages}
|
||
|
|
order={detailQuery.data.order}
|
||
|
|
replyKindSignal={replySignal}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
) : (
|
||
|
|
<div className="flex h-full items-center justify-center text-app-faint">
|
||
|
|
{t("mail.selectConversation")}
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
|
||
|
|
{composing && (
|
||
|
|
<div
|
||
|
|
className={
|
||
|
|
composerExpanded
|
||
|
|
? "absolute inset-0 z-30"
|
||
|
|
: "absolute bottom-0 right-4 z-30 w-[47.5rem] max-w-[calc(100%-2rem)]"
|
||
|
|
}
|
||
|
|
>
|
||
|
|
<Composer
|
||
|
|
init={composing}
|
||
|
|
expanded={composerExpanded}
|
||
|
|
onToggleExpand={() => setComposerExpanded((v) => !v)}
|
||
|
|
onClose={() => {
|
||
|
|
setComposing(null);
|
||
|
|
setComposerExpanded(false);
|
||
|
|
queryClient.invalidateQueries({ queryKey: ["drafts"] });
|
||
|
|
}}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</main>
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function FilterTab({
|
||
|
|
active,
|
||
|
|
onClick,
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
active: boolean;
|
||
|
|
onClick: () => void;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
className={`flex h-full items-center border-b-2 ${
|
||
|
|
active
|
||
|
|
? "border-app-accent font-semibold text-app-fg"
|
||
|
|
: "border-transparent text-app-muted hover:text-app-fg"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function SortIcon() {
|
||
|
|
return (
|
||
|
|
<svg
|
||
|
|
width="16"
|
||
|
|
height="16"
|
||
|
|
viewBox="0 0 16 16"
|
||
|
|
fill="none"
|
||
|
|
stroke="currentColor"
|
||
|
|
strokeWidth="1.4"
|
||
|
|
strokeLinecap="round"
|
||
|
|
strokeLinejoin="round"
|
||
|
|
aria-hidden
|
||
|
|
>
|
||
|
|
<path d="M5 3v10M3 5l2-2 2 2M11 13V3M9 11l2 2 2-2" />
|
||
|
|
</svg>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function SidebarItem({ active, onClick, children }: { active: boolean; onClick: () => void; children: React.ReactNode }) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
onClick={onClick}
|
||
|
|
className={`flex w-full items-center gap-2.5 rounded-lg px-3 py-1.5 text-left ${
|
||
|
|
active ? "bg-app-active font-medium text-app-fg" : "text-app-muted hover:bg-app-hover hover:text-app-fg"
|
||
|
|
}`}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|
||
|
|
|
||
|
|
function ToolbarButton({
|
||
|
|
onClick,
|
||
|
|
active = false,
|
||
|
|
children,
|
||
|
|
}: {
|
||
|
|
onClick: () => void;
|
||
|
|
active?: boolean;
|
||
|
|
children: React.ReactNode;
|
||
|
|
}) {
|
||
|
|
return (
|
||
|
|
<button
|
||
|
|
className={`flex items-center gap-1.5 rounded px-2.5 py-1 hover:bg-app-hover hover:text-app-fg ${
|
||
|
|
active ? "text-app-fg" : "text-app-muted"
|
||
|
|
}`}
|
||
|
|
onClick={onClick}
|
||
|
|
>
|
||
|
|
{children}
|
||
|
|
</button>
|
||
|
|
);
|
||
|
|
}
|