src-advisory/SRCmail
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: Add runtime config, trusted senders, JMAP identities, and UI improvements

Browse Source 
- Runtime environment variables for Docker-friendly configuration
- Trusted senders list for automatic image loading
- JMAP identities for proper sender address
- Improved email composer readability
- Horizontal scroll for wide HTML emails
This commit is contained in:
Matthieu MALVACHE
2026-01-08 02:08:18 +01:00
committed by Matthieu MALVACHE
parent dbffaf2a15
commit 58cfe09dc6
18 changed files with 778 additions and 100 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/email/email-composer.tsx
+58 -14
View File
@@ -16,6 +16,8 @@ interface EmailComposerProps {
subject: string;
body: string;
draftId?: string;
fromEmail?: string;
identityId?: string;
}) => void;
onClose?: () => void;
onDiscardDraft?: (draftId: string) => void;
@@ -97,8 +99,9 @@ export function EmailComposer({
const lastSavedDataRef = useRef<string>("");
const [attachments, setAttachments] = useState<Array<{ file: File; blobId?: string; uploading?: boolean; error?: boolean }>>([]);
const fileInputRef = useRef<HTMLInputElement>(null);
const [selectedIdentityId, setSelectedIdentityId] = useState<string | null>(null);
const { client } = useAuthStore();
const { client, identities, primaryIdentity } = useAuthStore();
// Handle file selection
const handleFileSelect = async (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -255,6 +258,11 @@ export function EmailComposer({
}
}
// Get the selected identity or primary identity
const currentIdentity = selectedIdentityId
? identities.find(id => id.id === selectedIdentityId)
: primaryIdentity;
onSend?.({
to: toAddresses,
cc: ccAddresses,
@@ -262,6 +270,8 @@ export function EmailComposer({
subject,
body,
draftId: finalDraftId || undefined,
fromEmail: currentIdentity?.email,
identityId: currentIdentity?.id,
});
// Reset form
@@ -301,7 +311,7 @@ export function EmailComposer({
<div className={cn("flex flex-col h-full bg-background border rounded-lg", className)}>
<div className="flex items-center justify-between px-4 py-3 border-b">
<div className="flex items-center gap-2">
<h3 className="font-semibold">New Message</h3>
<h3 className="font-semibold">{t('new_message')}</h3>
{saveStatus === 'saving' && (
<div className="flex items-center gap-1 text-xs text-muted-foreground">
<Save className="w-3 h-3 animate-pulse" />
@@ -328,8 +338,32 @@ export function EmailComposer({
<div className="flex-1 flex flex-col">
<div className="space-y-2 px-4 py-3 border-b">
{/* From field - show dropdown if multiple identities, otherwise display email */}
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground w-16">To:</span>
<span className="text-sm text-muted-foreground w-16">{t('from')}:</span>
{identities.length > 1 ? (
<select
value={selectedIdentityId || primaryIdentity?.id || ''}
onChange={(e) => setSelectedIdentityId(e.target.value)}
className="flex-1 bg-transparent text-sm text-foreground outline-none cursor-pointer hover:text-muted-foreground transition-colors"
>
{identities.map((identity) => (
<option key={identity.id} value={identity.id}>
{identity.name ? `${identity.name} <${identity.email}>` : identity.email}
</option>
))}
</select>
) : (
<span className="text-sm text-foreground">
{primaryIdentity?.name
? `${primaryIdentity.name} <${primaryIdentity.email}>`
: primaryIdentity?.email || ''}
</span>
)}
</div>
<div className="flex items-center gap-2">
<span className="text-sm text-muted-foreground w-16">{t('to')}:</span>
<Input
type="email"
placeholder="Recipient email addresses (comma separated)"
@@ -395,9 +429,9 @@ export function EmailComposer({
</div>
</div>
<div className="flex-1 px-4 py-3">
<div className="flex-1 px-4 py-3 min-h-0">
<textarea
className="w-full h-full resize-none outline-none text-sm"
className="w-full h-full resize-none outline-none text-sm bg-transparent text-foreground placeholder:text-muted-foreground"
placeholder="Compose email..."
value={body}
onChange={(e) => setBody(e.target.value)}
@@ -413,7 +447,7 @@ export function EmailComposer({
key={index}
className={cn(
"flex items-center gap-2 px-3 py-1 rounded-md text-sm",
att.error ? "bg-red-50 text-red-700" : "bg-gray-100 text-gray-700"
att.error ? "bg-red-500/10 text-red-600 dark:text-red-400" : "bg-muted text-foreground"
)}
>
{att.uploading ? (
@@ -424,12 +458,12 @@ export function EmailComposer({
<Paperclip className="w-3 h-3" />
)}
<span className="max-w-[200px] truncate">{att.file.name}</span>
<span className="text-xs text-gray-500">
<span className="text-xs text-muted-foreground">
({(att.file.size / 1024).toFixed(1)} KB)
</span>
<button
onClick={() => removeAttachment(index)}
className="ml-1 hover:text-red-600"
className="ml-1 hover:text-red-500"
>
<X className="w-3 h-3" />
</button>
@@ -440,7 +474,17 @@ export function EmailComposer({
)}
<div className="flex items-center justify-between px-4 py-3 border-t">
<div>
{/* Left side - Discard button */}
<button
type="button"
onClick={handleClose}
className="text-sm text-muted-foreground hover:text-red-500 transition-colors"
>
{t('discard')}
</button>
{/* Right side - Attach and Send */}
<div className="flex items-center gap-2">
<input
ref={fileInputRef}
type="file"
@@ -455,13 +499,13 @@ export function EmailComposer({
onClick={() => fileInputRef.current?.click()}
>
<Paperclip className="w-4 h-4 mr-2" />
Attach
{t('attach')}
</Button>
<Button onClick={handleSend}>
<Send className="w-4 h-4 mr-2" />
{t('send')}
</Button>
</div>
<Button onClick={handleSend}>
<Send className="w-4 h-4 mr-2" />
Send
</Button>
</div>
</div>
</div>