Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 | 16x 16x 1x 26x 1x 3x 2x 1x 1x 1x 2x 1x 26x 26x 1x | import { useState } from "react";
import { api } from "../../api";
import { ConfirmDialog } from "../ConfirmDialog";
import { toast } from "../Toast";
import { AccountForm } from "./AccountForm";
import { TrustedSendersPanel } from "./TrustedSendersPanel";
export function AccountsTab({
identities,
editingIdentityId,
onEdit,
onRefetch,
}: {
identities: { id: number; name: string; email: string }[];
editingIdentityId: number | "new" | null;
onEdit: (id: number | "new" | null) => void;
onRefetch: () => void;
}) {
const [deleteTarget, setDeleteTarget] = useState<{
id: number;
name: string;
email: string;
} | null>(null);
return (
<div className="space-y-4">
<div className="flex items-center justify-between">
<h3 className="text-sm font-medium text-gray-900 dark:text-gray-100">Email Identities</h3>
<button
type="button"
onClick={() => onEdit("new")}
className="px-3 py-1.5 bg-stork-600 hover:bg-stork-700 text-white rounded-md text-sm font-medium transition-colors"
>
+ Connect Email
</button>
</div>
{/* Identity list */}
{identities.length === 0 && editingIdentityId !== "new" && (
<p className="text-sm text-gray-500 dark:text-gray-400 py-8 text-center">
No email accounts connected. Connect one to get started.
</p>
)}
{identities.map((identity) => (
<div key={identity.id}>
{editingIdentityId === identity.id ? (
<AccountForm
identityId={identity.id}
onCancel={() => onEdit(null)}
onSaved={() => {
onEdit(null);
onRefetch();
}}
/>
) : (
<IdentityCard
identity={identity}
onEdit={() => onEdit(identity.id)}
onDelete={() => setDeleteTarget(identity)}
/>
)}
</div>
))}
{editingIdentityId === "new" && (
<AccountForm
identityId={null}
onCancel={() => onEdit(null)}
onSaved={() => {
onEdit(null);
onRefetch();
}}
/>
)}
{deleteTarget && (
<ConfirmDialog
title="Delete email identity"
message={`Delete "${deleteTarget.name}" (${deleteTarget.email})? This removes all synced messages and cannot be undone.`}
confirmLabel="Delete"
variant="danger"
onConfirm={() => {
api.identities
.delete(deleteTarget.id)
.then(() => {
toast("Email identity deleted", "success");
onRefetch();
})
.catch(() => {
toast("Failed to delete email identity", "error");
});
setDeleteTarget(null);
}}
onCancel={() => setDeleteTarget(null)}
/>
)}
</div>
);
}
function IdentityCard({
identity,
onEdit,
onDelete,
}: {
identity: { id: number; name: string; email: string };
onEdit: () => void;
onDelete: () => void;
}) {
const [showTrustedSenders, setShowTrustedSenders] = useState(false);
return (
<div className="border border-gray-200 dark:border-gray-700 rounded-lg">
<div className="flex items-center justify-between px-4 py-3">
<div>
<p className="text-sm font-medium text-gray-900 dark:text-gray-100">{identity.name}</p>
<p className="text-xs text-gray-500 dark:text-gray-400">{identity.email}</p>
</div>
<div className="flex items-center gap-2">
<button
type="button"
onClick={() => setShowTrustedSenders((v) => !v)}
className="text-xs text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200 px-2 py-1 rounded transition-colors"
title="Manage senders whose remote images are always loaded"
>
Trusted Senders
</button>
<button
type="button"
onClick={onEdit}
className="text-xs text-stork-600 hover:text-stork-700 dark:text-stork-400 dark:hover:text-stork-300 px-2 py-1 rounded transition-colors"
>
Edit
</button>
<button
type="button"
onClick={onDelete}
className="text-xs text-red-500 hover:text-red-700 dark:text-red-400 dark:hover:text-red-300 px-2 py-1 rounded transition-colors"
>
Delete
</button>
</div>
</div>
{showTrustedSenders && <TrustedSendersPanel onClose={() => setShowTrustedSenders(false)} />}
</div>
);
}
|