Two-way draft sync, signatures, sent/bcc fixes, and mail-list UI
Backend - Sent copies: persist locally on send + periodic multi-folder CONDSTORE poll (Sent/Archive/Trash/Junk) so they thread and show without an IDLE-only INBOX. - Bcc: transmitted copy omits Bcc, Sent copy keeps it; store/display bcc_addr. - Drafts: mirror local drafts to the IMAP Drafts folder (append/replace/expunge); inbound sync of foreign drafts (un-threaded) with adopt-to-edit + dedup by UID. - Per-user storage quota (5 GiB default) and manual "sync all folders" action. - Account editing (display/color/server/password) and per-account HTML signature. - Account view scoped to that account's inbox; new migrations 0006–0009. Frontend - Mail-list pagination, folder filters (All/Unread/Pinned), sort toggle, refresh. - Aligned + widened mail-list margins; reading-pane bars fixed height. - Rich-text composer: color palette, highlight, image; attachments; expand/pop-out. - Signatures: auto-insert for new mail, replace on From change, reply insert. - Restore/Delete actions per folder; drafts view merges local + remote, date-sorted. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Claude Opus 4.8
@@ -12,9 +12,20 @@ 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 type { QuotaOut, ThreadSummary } from "../lib/types";
|
||||
import { useKeyboardShortcuts } from "../lib/useKeyboardShortcuts";
|
||||
|
||||
function quotaLabel(q: QuotaOut): string {
|
||||
const pct = q.quota_bytes > 0 ? (q.used_bytes / q.quota_bytes) * 100 : 0;
|
||||
const pctStr = pct >= 10 ? String(Math.round(pct)) : String(Math.round(pct * 10) / 10);
|
||||
const gb = q.quota_bytes / 1024 ** 3;
|
||||
const gbStr = Number.isInteger(gb) ? String(gb) : gb.toFixed(1);
|
||||
return `${pctStr}% of ${gbStr} GB`;
|
||||
}
|
||||
|
||||
// Threads shown per page in the mail list.
|
||||
const PAGE_SIZE = 50;
|
||||
|
||||
// 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" },
|
||||
@@ -34,7 +45,11 @@ export function MailLayout() {
|
||||
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 [listOrder, setListOrder] = useState<"newest" | "oldest">(() =>
|
||||
localStorage.getItem("mail.listOrder") === "oldest" ? "oldest" : "newest",
|
||||
);
|
||||
const [page, setPage] = useState(0);
|
||||
const [refreshing, setRefreshing] = useState(false);
|
||||
const [composing, setComposing] = useState<ComposerInit | null>(null);
|
||||
const [composerExpanded, setComposerExpanded] = useState(false);
|
||||
const [replySignal, setReplySignal] = useState<{ kind: string; seq: number }>();
|
||||
@@ -48,6 +63,7 @@ export function MailLayout() {
|
||||
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]);
|
||||
useEffect(() => localStorage.setItem("mail.listOrder", listOrder), [listOrder]);
|
||||
|
||||
const isDrafts = view === "folder:drafts";
|
||||
// Which special-use folder the reading pane is showing (drives the toolbar).
|
||||
@@ -63,6 +79,11 @@ export function MailLayout() {
|
||||
queryFn: api.listDrafts,
|
||||
enabled: isDrafts,
|
||||
});
|
||||
const remoteDraftsQuery = useQuery({
|
||||
queryKey: ["drafts-remote"],
|
||||
queryFn: api.remoteDrafts,
|
||||
enabled: isDrafts,
|
||||
});
|
||||
const searchQuery = useQuery({
|
||||
queryKey: ["search", term],
|
||||
queryFn: () => api.search(term),
|
||||
@@ -70,6 +91,7 @@ export function MailLayout() {
|
||||
});
|
||||
const settingsQuery = useQuery({ queryKey: ["settings"], queryFn: api.settings });
|
||||
const threadOrder: "asc" | "desc" = settingsQuery.data?.thread_order ?? "asc";
|
||||
const quotaQuery = useQuery({ queryKey: ["quota"], queryFn: api.quota });
|
||||
|
||||
const allThreads: ThreadSummary[] = term.trim()
|
||||
? (searchQuery.data?.threads ?? []).map((h) => h.thread)
|
||||
@@ -80,6 +102,16 @@ export function MailLayout() {
|
||||
// The backend returns threads newest-first; reverse for an oldest-first view.
|
||||
const threads = listOrder === "newest" ? filtered : [...filtered].reverse();
|
||||
|
||||
// Client-side pagination of the (filtered, ordered) list.
|
||||
const total = threads.length;
|
||||
const maxPage = Math.max(0, Math.ceil(total / PAGE_SIZE) - 1);
|
||||
const curPage = Math.min(page, maxPage);
|
||||
const pageStart = curPage * PAGE_SIZE;
|
||||
const pageEnd = Math.min(pageStart + PAGE_SIZE, total);
|
||||
const pageThreads = threads.slice(pageStart, pageEnd);
|
||||
// Reset to the first page whenever the underlying list identity changes.
|
||||
useEffect(() => setPage(0), [view, filter, term, listOrder]);
|
||||
|
||||
const threadsRef = useRef<ThreadSummary[]>(threads);
|
||||
threadsRef.current = threads;
|
||||
|
||||
@@ -101,9 +133,27 @@ export function MailLayout() {
|
||||
|
||||
const afterMove = () => {
|
||||
queryClient.invalidateQueries({ queryKey: ["threads"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["quota"] });
|
||||
navigate("/mail");
|
||||
};
|
||||
|
||||
// Trigger a server-side sync of all folders; refresh the views once the worker
|
||||
// has had a moment to poll (live WebSocket events also update them).
|
||||
const doRefresh = async () => {
|
||||
setRefreshing(true);
|
||||
try {
|
||||
await api.syncNow();
|
||||
} catch {
|
||||
/* ignore */
|
||||
}
|
||||
window.setTimeout(() => {
|
||||
for (const key of ["threads", "drafts", "drafts-remote", "quota"]) {
|
||||
queryClient.invalidateQueries({ queryKey: [key] });
|
||||
}
|
||||
setRefreshing(false);
|
||||
}, 2500);
|
||||
};
|
||||
|
||||
const archive = async () => {
|
||||
if (!threadId) return;
|
||||
await api.archiveThread(threadId);
|
||||
@@ -230,6 +280,14 @@ export function MailLayout() {
|
||||
>
|
||||
{t("common.signOut")}
|
||||
</button>
|
||||
{quotaQuery.data && (
|
||||
<div
|
||||
className="mt-1 border-t border-app-border px-3 pb-1 pt-2 text-xs text-app-faint"
|
||||
title={t("nav.storageQuota")}
|
||||
>
|
||||
{quotaLabel(quotaQuery.data)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</aside>
|
||||
|
||||
@@ -240,7 +298,7 @@ export function MailLayout() {
|
||||
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">
|
||||
<div className="flex h-[52px] shrink-0 items-center border-b border-app-border px-6">
|
||||
<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"
|
||||
@@ -250,7 +308,7 @@ export function MailLayout() {
|
||||
/>
|
||||
</div>
|
||||
{!isDrafts && (
|
||||
<div className="flex h-[44px] shrink-0 items-center gap-5 border-b border-app-border px-3 text-sm">
|
||||
<div className="flex h-[44px] shrink-0 items-center gap-5 border-b border-app-border bg-app-bg px-6 text-sm">
|
||||
<FilterTab active={filter === "all"} onClick={() => setFilter("all")}>
|
||||
{t("filter.all")}
|
||||
</FilterTab>
|
||||
@@ -261,7 +319,7 @@ export function MailLayout() {
|
||||
{t("filter.pinned")}
|
||||
</FilterTab>
|
||||
<button
|
||||
className="ml-auto rounded p-1.5 text-app-muted hover:bg-app-hover hover:text-app-fg"
|
||||
className="-mr-1.5 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"))}
|
||||
@@ -274,13 +332,56 @@ export function MailLayout() {
|
||||
{isDrafts && !term.trim() ? (
|
||||
<DraftsList
|
||||
drafts={draftsQuery.data ?? []}
|
||||
remoteDrafts={remoteDraftsQuery.data ?? []}
|
||||
onOpen={(draft) => {
|
||||
setComposing(draftToInit(draft));
|
||||
setComposerExpanded(true);
|
||||
}}
|
||||
onOpenRemote={async (remote) => {
|
||||
// Adopt the server draft into an editable local draft, then open it.
|
||||
const draft = await api.adoptDraft(remote.message_id);
|
||||
queryClient.invalidateQueries({ queryKey: ["drafts"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["drafts-remote"] });
|
||||
setComposing(draftToInit(draft));
|
||||
setComposerExpanded(true);
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<MessageList threads={threads} accounts={accounts} selectedId={threadId} onSelect={(id) => navigate(`/mail/t/${id}`)} />
|
||||
<MessageList threads={pageThreads} accounts={accounts} selectedId={threadId} onSelect={(id) => navigate(`/mail/t/${id}`)} />
|
||||
)}
|
||||
</div>
|
||||
<div className="flex items-center justify-between border-t border-app-border px-6 py-1.5 text-xs text-app-muted">
|
||||
<button
|
||||
className="-ml-1 rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg disabled:opacity-60"
|
||||
title={t("nav.refresh")}
|
||||
aria-label={t("nav.refresh")}
|
||||
onClick={doRefresh}
|
||||
disabled={refreshing}
|
||||
>
|
||||
<RefreshIcon spinning={refreshing} />
|
||||
</button>
|
||||
{!isDrafts && total > 0 ? (
|
||||
<div className="flex items-center gap-3">
|
||||
<span>
|
||||
{pageStart + 1}–{pageEnd} of {total}
|
||||
</span>
|
||||
<div className="-mr-1 flex items-center gap-0.5">
|
||||
<PagerButton
|
||||
disabled={curPage === 0}
|
||||
onClick={() => setPage(curPage - 1)}
|
||||
label={t("pager.prev")}
|
||||
dir="left"
|
||||
/>
|
||||
<PagerButton
|
||||
disabled={pageEnd >= total}
|
||||
onClick={() => setPage(curPage + 1)}
|
||||
label={t("pager.next")}
|
||||
dir="right"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<span />
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
@@ -291,7 +392,7 @@ export function MailLayout() {
|
||||
<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">
|
||||
<div className="flex h-[52px] shrink-0 items-center gap-1 border-b border-app-border bg-app-surface px-3 text-sm">
|
||||
{currentFolder === "archive" ? (
|
||||
<>
|
||||
<ToolbarButton onClick={restore}>
|
||||
@@ -369,6 +470,7 @@ export function MailLayout() {
|
||||
setComposing(null);
|
||||
setComposerExpanded(false);
|
||||
queryClient.invalidateQueries({ queryKey: ["drafts"] });
|
||||
queryClient.invalidateQueries({ queryKey: ["drafts-remote"] });
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@@ -401,6 +503,52 @@ function FilterTab({
|
||||
);
|
||||
}
|
||||
|
||||
function PagerButton({
|
||||
disabled,
|
||||
onClick,
|
||||
label,
|
||||
dir,
|
||||
}: {
|
||||
disabled: boolean;
|
||||
onClick: () => void;
|
||||
label: string;
|
||||
dir: "left" | "right";
|
||||
}) {
|
||||
return (
|
||||
<button
|
||||
disabled={disabled}
|
||||
onClick={onClick}
|
||||
title={label}
|
||||
aria-label={label}
|
||||
className="rounded p-1 text-app-muted hover:bg-app-hover hover:text-app-fg disabled:pointer-events-none disabled:text-app-faint disabled:opacity-40"
|
||||
>
|
||||
<svg width="14" height="14" viewBox="0 0 16 16" fill="none" stroke="currentColor" strokeWidth="1.6" strokeLinecap="round" strokeLinejoin="round" aria-hidden>
|
||||
<path d={dir === "left" ? "M10 4l-4 4 4 4" : "M6 4l4 4-4 4"} />
|
||||
</svg>
|
||||
</button>
|
||||
);
|
||||
}
|
||||
|
||||
function RefreshIcon({ spinning }: { spinning: boolean }) {
|
||||
return (
|
||||
<svg
|
||||
width="15"
|
||||
height="15"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
strokeWidth="1.4"
|
||||
strokeLinecap="round"
|
||||
strokeLinejoin="round"
|
||||
aria-hidden
|
||||
className={spinning ? "animate-spin" : ""}
|
||||
>
|
||||
<path d="M13.5 8a5.5 5.5 0 1 1-1.6-3.9" />
|
||||
<path d="M13.5 2v3h-3" />
|
||||
</svg>
|
||||
);
|
||||
}
|
||||
|
||||
function SortIcon() {
|
||||
return (
|
||||
<svg
|
||||
|
||||
@@ -1,8 +1,9 @@
|
||||
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
|
||||
import { QRCodeSVG } from "qrcode.react";
|
||||
import { useState } from "react";
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate, useParams } from "react-router-dom";
|
||||
|
||||
import { RichTextEditor } from "../../components/compose/RichTextEditor";
|
||||
import { useT } from "../../i18n";
|
||||
import { api, ApiError } from "../../lib/api";
|
||||
import { useMe } from "../../lib/auth";
|
||||
@@ -53,7 +54,7 @@ function ProfileSection() {
|
||||
const t = useT();
|
||||
const { data } = useMe();
|
||||
return (
|
||||
<section className="max-w-md space-y-3">
|
||||
<section className="max-w-4xl space-y-3">
|
||||
<h2 className="text-lg font-semibold">{t("settings.profile")}</h2>
|
||||
<Row label={t("settings.handle")} value={data?.handle ?? ""} />
|
||||
<Row label={t("settings.recoveryEmail")} value={data?.recovery_email ?? "—"} />
|
||||
@@ -114,7 +115,7 @@ function SecuritySection() {
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="max-w-md space-y-6">
|
||||
<section className="max-w-4xl space-y-6">
|
||||
<div className="space-y-2">
|
||||
<h2 className="text-lg font-semibold">{t("settings.twoFactor")}</h2>
|
||||
{enabled ? (
|
||||
@@ -217,13 +218,21 @@ function AccountsSection() {
|
||||
const navigate = useNavigate();
|
||||
const queryClient = useQueryClient();
|
||||
const accounts = useQuery({ queryKey: ["accounts"], queryFn: api.accounts });
|
||||
const [editing, setEditing] = useState<{ id: string; mode: "account" | "signature" } | null>(
|
||||
null,
|
||||
);
|
||||
const remove = useMutation({
|
||||
mutationFn: (id: string) => api.deleteAccount(id),
|
||||
onSuccess: () => queryClient.invalidateQueries({ queryKey: ["accounts"] }),
|
||||
});
|
||||
|
||||
const close = () => {
|
||||
setEditing(null);
|
||||
queryClient.invalidateQueries({ queryKey: ["accounts"] });
|
||||
};
|
||||
|
||||
return (
|
||||
<section className="max-w-lg space-y-3">
|
||||
<section className="max-w-5xl space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<h2 className="text-lg font-semibold">{t("settings.accounts")}</h2>
|
||||
<button
|
||||
@@ -235,20 +244,44 @@ function AccountsSection() {
|
||||
</div>
|
||||
<ul className="divide-y divide-app-border rounded-lg border border-app-border">
|
||||
{(accounts.data ?? []).map((a) => (
|
||||
<li key={a.id} className="flex items-center justify-between px-3 py-2 text-sm">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-3 w-3 rounded-full" style={{ backgroundColor: a.color }} />
|
||||
<span>{a.email}</span>
|
||||
<span className="text-xs text-app-faint">{t("settings.syncState", { state: a.state })}</span>
|
||||
</span>
|
||||
<button
|
||||
className="text-xs text-red-500"
|
||||
onClick={() => {
|
||||
if (confirm(t("settings.confirmRemoveAccount"))) remove.mutate(a.id);
|
||||
}}
|
||||
>
|
||||
{t("common.remove")}
|
||||
</button>
|
||||
<li key={a.id} className="px-3 py-2 text-sm">
|
||||
{editing?.id === a.id && editing.mode === "account" ? (
|
||||
<AccountEditor accountId={a.id} onCancel={() => setEditing(null)} onSaved={close} />
|
||||
) : editing?.id === a.id && editing.mode === "signature" ? (
|
||||
<SignatureEditor accountId={a.id} onCancel={() => setEditing(null)} onSaved={close} />
|
||||
) : (
|
||||
<div className="flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<span className="h-3 w-3 rounded-full" style={{ backgroundColor: a.color }} />
|
||||
<span>{a.email}</span>
|
||||
<span className="text-xs text-app-faint">
|
||||
{t("settings.syncState", { state: a.state })}
|
||||
</span>
|
||||
</span>
|
||||
<span className="flex items-center gap-3">
|
||||
<button
|
||||
className="text-xs text-app-accent"
|
||||
onClick={() => setEditing({ id: a.id, mode: "signature" })}
|
||||
>
|
||||
{t("settings.editSignature")}
|
||||
</button>
|
||||
<button
|
||||
className="text-xs text-app-accent"
|
||||
onClick={() => setEditing({ id: a.id, mode: "account" })}
|
||||
>
|
||||
{t("settings.configureAccount")}
|
||||
</button>
|
||||
<button
|
||||
className="text-xs text-red-500"
|
||||
onClick={() => {
|
||||
if (confirm(t("settings.confirmRemoveAccount"))) remove.mutate(a.id);
|
||||
}}
|
||||
>
|
||||
{t("common.remove")}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
@@ -256,6 +289,243 @@ function AccountsSection() {
|
||||
);
|
||||
}
|
||||
|
||||
function AccountEditor({
|
||||
accountId,
|
||||
onCancel,
|
||||
onSaved,
|
||||
}: {
|
||||
accountId: string;
|
||||
onCancel: () => void;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const detail = useQuery({ queryKey: ["account", accountId], queryFn: () => api.accountDetail(accountId) });
|
||||
const [displayName, setDisplayName] = useState("");
|
||||
const [color, setColor] = useState("#888888");
|
||||
const [showServer, setShowServer] = useState(false);
|
||||
const [imapHost, setImapHost] = useState("");
|
||||
const [imapPort, setImapPort] = useState("993");
|
||||
const [imapTls, setImapTls] = useState("ssl");
|
||||
const [smtpHost, setSmtpHost] = useState("");
|
||||
const [smtpPort, setSmtpPort] = useState("465");
|
||||
const [smtpTls, setSmtpTls] = useState("ssl");
|
||||
const [password, setPassword] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
const d = detail.data;
|
||||
if (!d) return;
|
||||
setDisplayName(d.display_name);
|
||||
setColor(d.color);
|
||||
setImapHost(String(d.imap_config.host ?? ""));
|
||||
setImapPort(String(d.imap_config.port ?? "993"));
|
||||
setImapTls(String(d.imap_config.tls ?? "ssl"));
|
||||
setSmtpHost(String(d.smtp_config.host ?? ""));
|
||||
setSmtpPort(String(d.smtp_config.port ?? "465"));
|
||||
setSmtpTls(String(d.smtp_config.tls ?? "ssl"));
|
||||
}, [detail.data]);
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: () => {
|
||||
const patch: Parameters<typeof api.updateAccount>[1] = {
|
||||
display_name: displayName,
|
||||
color,
|
||||
};
|
||||
if (showServer) {
|
||||
patch.imap = { host: imapHost, port: Number(imapPort), tls: imapTls, auth: "password" };
|
||||
patch.smtp = { host: smtpHost, port: Number(smtpPort), tls: smtpTls, auth: "password" };
|
||||
patch.password = password;
|
||||
}
|
||||
return api.updateAccount(accountId, patch);
|
||||
},
|
||||
onSuccess: onSaved,
|
||||
onError: (e) => setError(e instanceof ApiError ? e.message : "Save failed"),
|
||||
});
|
||||
|
||||
if (!detail.data) return <div className="py-1 text-app-faint">{t("common.loading")}</div>;
|
||||
|
||||
const canSave = !save.isPending && (!showServer || password.length > 0);
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center gap-2">
|
||||
<input
|
||||
className="h-8 w-8 shrink-0 cursor-pointer rounded border border-app-border bg-transparent p-0.5"
|
||||
type="color"
|
||||
value={color}
|
||||
onChange={(e) => setColor(e.target.value)}
|
||||
aria-label={t("settings.color")}
|
||||
/>
|
||||
<input
|
||||
className="flex-1 rounded border border-app-border bg-app-surface px-2 py-1"
|
||||
placeholder={t("wizard.displayName")}
|
||||
value={displayName}
|
||||
onChange={(e) => setDisplayName(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{!showServer ? (
|
||||
<button className="text-xs text-app-accent" onClick={() => setShowServer(true)}>
|
||||
{t("settings.serverSettings")}
|
||||
</button>
|
||||
) : (
|
||||
<div className="space-y-2 rounded border border-app-border p-2">
|
||||
<p className="text-xs text-app-faint">{t("settings.serverSettingsHint")}</p>
|
||||
<ServerRow
|
||||
label={t("wizard.imapServer")}
|
||||
host={imapHost}
|
||||
port={imapPort}
|
||||
tls={imapTls}
|
||||
onHost={setImapHost}
|
||||
onPort={setImapPort}
|
||||
onTls={setImapTls}
|
||||
/>
|
||||
<ServerRow
|
||||
label={t("wizard.smtpServer")}
|
||||
host={smtpHost}
|
||||
port={smtpPort}
|
||||
tls={smtpTls}
|
||||
onHost={setSmtpHost}
|
||||
onPort={setSmtpPort}
|
||||
onTls={setSmtpTls}
|
||||
/>
|
||||
<input
|
||||
className="w-full rounded border border-app-border bg-app-surface px-2 py-1"
|
||||
type="password"
|
||||
placeholder={t("wizard.accountPassword")}
|
||||
value={password}
|
||||
onChange={(e) => setPassword(e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="rounded bg-app-accent px-3 py-1 text-sm text-app-accent-fg disabled:opacity-50"
|
||||
disabled={!canSave}
|
||||
onClick={() => {
|
||||
setError("");
|
||||
save.mutate();
|
||||
}}
|
||||
>
|
||||
{save.isPending ? t("common.saving") : t("common.save")}
|
||||
</button>
|
||||
<button className="px-3 py-1 text-sm text-app-muted hover:text-app-fg" onClick={onCancel}>
|
||||
{t("common.cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function SignatureEditor({
|
||||
accountId,
|
||||
onCancel,
|
||||
onSaved,
|
||||
}: {
|
||||
accountId: string;
|
||||
onCancel: () => void;
|
||||
onSaved: () => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
const detail = useQuery({
|
||||
queryKey: ["account", accountId],
|
||||
queryFn: () => api.accountDetail(accountId),
|
||||
});
|
||||
const [signature, setSignature] = useState("");
|
||||
const [error, setError] = useState("");
|
||||
|
||||
useEffect(() => {
|
||||
if (detail.data) setSignature(detail.data.signature);
|
||||
}, [detail.data]);
|
||||
|
||||
const save = useMutation({
|
||||
mutationFn: () => api.updateAccount(accountId, { signature }),
|
||||
onSuccess: onSaved,
|
||||
onError: (e) => setError(e instanceof ApiError ? e.message : "Save failed"),
|
||||
});
|
||||
|
||||
if (!detail.data) return <div className="py-1 text-app-faint">{t("common.loading")}</div>;
|
||||
|
||||
return (
|
||||
<div className="space-y-2">
|
||||
<div className="text-xs text-app-muted">
|
||||
{t("settings.signature")} — {detail.data.email}
|
||||
</div>
|
||||
<div className="flex flex-col overflow-hidden rounded border border-app-border">
|
||||
<RichTextEditor
|
||||
initialHtml={detail.data.signature}
|
||||
onInput={setSignature}
|
||||
minHeight="min-h-[160px]"
|
||||
/>
|
||||
</div>
|
||||
{error && <p className="text-xs text-red-500">{error}</p>}
|
||||
<div className="flex gap-2">
|
||||
<button
|
||||
className="rounded bg-app-accent px-3 py-1 text-sm text-app-accent-fg disabled:opacity-50"
|
||||
disabled={save.isPending}
|
||||
onClick={() => {
|
||||
setError("");
|
||||
save.mutate();
|
||||
}}
|
||||
>
|
||||
{save.isPending ? t("common.saving") : t("common.save")}
|
||||
</button>
|
||||
<button className="px-3 py-1 text-sm text-app-muted hover:text-app-fg" onClick={onCancel}>
|
||||
{t("common.cancel")}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function ServerRow({
|
||||
label,
|
||||
host,
|
||||
port,
|
||||
tls,
|
||||
onHost,
|
||||
onPort,
|
||||
onTls,
|
||||
}: {
|
||||
label: string;
|
||||
host: string;
|
||||
port: string;
|
||||
tls: string;
|
||||
onHost: (v: string) => void;
|
||||
onPort: (v: string) => void;
|
||||
onTls: (v: string) => void;
|
||||
}) {
|
||||
const t = useT();
|
||||
return (
|
||||
<div className="flex items-center gap-1.5">
|
||||
<span className="w-24 shrink-0 text-xs text-app-muted">{label}</span>
|
||||
<input
|
||||
className="min-w-0 flex-1 rounded border border-app-border bg-app-surface px-2 py-1 text-sm"
|
||||
placeholder={t("wizard.host")}
|
||||
value={host}
|
||||
onChange={(e) => onHost(e.target.value)}
|
||||
/>
|
||||
<input
|
||||
className="w-16 rounded border border-app-border bg-app-surface px-2 py-1 text-sm"
|
||||
placeholder={t("wizard.port")}
|
||||
value={port}
|
||||
onChange={(e) => onPort(e.target.value)}
|
||||
/>
|
||||
<select
|
||||
className="rounded border border-app-border bg-app-surface px-1 py-1 text-sm"
|
||||
value={tls}
|
||||
onChange={(e) => onTls(e.target.value)}
|
||||
aria-label={t("wizard.security")}
|
||||
>
|
||||
<option value="ssl">SSL</option>
|
||||
<option value="starttls">STARTTLS</option>
|
||||
</select>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function AppearanceSection() {
|
||||
const t = useT();
|
||||
const queryClient = useQueryClient();
|
||||
@@ -267,7 +537,7 @@ function AppearanceSection() {
|
||||
});
|
||||
|
||||
return (
|
||||
<section className="max-w-md space-y-3">
|
||||
<section className="max-w-4xl space-y-3">
|
||||
<h2 className="text-lg font-semibold">{t("settings.appearance")}</h2>
|
||||
<div className="flex items-center justify-between border-b border-app-border py-2 text-sm">
|
||||
<span className="text-app-muted">{t("settings.theme")}</span>
|
||||
|
||||
Reference in New Issue
Block a user