courrier refactor rebuild 2
This commit is contained in:
parent
9f82be44cc
commit
5ec5ad58df
@ -58,6 +58,7 @@ interface Account {
|
||||
email: string;
|
||||
color: string;
|
||||
folders?: string[];
|
||||
showFolders?: boolean;
|
||||
}
|
||||
|
||||
export default function CourrierPage() {
|
||||
@ -102,6 +103,7 @@ export default function CourrierPage() {
|
||||
const [unreadCount, setUnreadCount] = useState(0);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [userEmail, setUserEmail] = useState<string>('');
|
||||
const [showAccountDropdown, setShowAccountDropdown] = useState(false);
|
||||
|
||||
// Get user's email from session data
|
||||
useEffect(() => {
|
||||
@ -126,7 +128,7 @@ export default function CourrierPage() {
|
||||
// Accounts for the sidebar (using the actual user email)
|
||||
const [accounts, setAccounts] = useState<Account[]>([
|
||||
{ id: 0, name: 'All', email: '', color: 'bg-gray-500' },
|
||||
{ id: 1, name: userEmail || 'Loading...', email: userEmail || '', color: 'bg-blue-500', folders: mailboxes }
|
||||
{ id: 1, name: userEmail || 'Loading...', email: userEmail || '', color: 'bg-blue-500', folders: mailboxes, showFolders: true }
|
||||
]);
|
||||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||
|
||||
@ -140,6 +142,8 @@ export default function CourrierPage() {
|
||||
updated[1].name = userEmail;
|
||||
updated[1].email = userEmail;
|
||||
}
|
||||
// Preserve the showFolders state
|
||||
updated[1].showFolders = updated[1].showFolders !== false;
|
||||
}
|
||||
return updated;
|
||||
});
|
||||
@ -244,7 +248,9 @@ export default function CourrierPage() {
|
||||
// Handle mailbox change
|
||||
const handleMailboxChange = (folder: string) => {
|
||||
changeFolder(folder);
|
||||
setCurrentView(folder);
|
||||
// You would typically fetch emails for the selected folder here
|
||||
// For example:
|
||||
// fetchEmails({ folder });
|
||||
};
|
||||
|
||||
// Handle sending email
|
||||
@ -299,6 +305,15 @@ export default function CourrierPage() {
|
||||
router.push('/courrier/login');
|
||||
};
|
||||
|
||||
// Function to toggle folder visibility for a specific account
|
||||
const toggleFolderVisibility = (accountId: number) => {
|
||||
setAccounts(prev => prev.map(account =>
|
||||
account.id === accountId
|
||||
? { ...account, showFolders: !account.showFolders }
|
||||
: account
|
||||
));
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<SimplifiedLoadingFix />
|
||||
@ -342,74 +357,75 @@ export default function CourrierPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
<span>Accounts</span>
|
||||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
{/* Account section */}
|
||||
<div className="px-2 mt-6">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">Accounts</h2>
|
||||
<button
|
||||
className="text-gray-400 hover:text-gray-600"
|
||||
onClick={() => setShowAccountDropdown(!showAccountDropdown)}
|
||||
>
|
||||
{showAccountDropdown ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{accountsDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{accounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between px-2 py-1.5 text-sm group"
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium text-gray-700">{account.name}</span>
|
||||
</div>
|
||||
</Button>
|
||||
{showAccountDropdown && (
|
||||
<div className="pl-2 space-y-1">
|
||||
{accounts.map((account) => (
|
||||
<div key={account.id} className="mb-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<button
|
||||
className={`flex items-center w-full text-left px-2 py-1 rounded hover:bg-gray-200 ${
|
||||
selectedAccount?.id === account.id ? 'bg-gray-200' : ''
|
||||
}`}
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className={`h-3 w-3 rounded-full ${account.color} mr-2`}></div>
|
||||
<span className="text-sm truncate">{account.name}</span>
|
||||
</button>
|
||||
{account.folders && account.folders.length > 0 && (
|
||||
<button
|
||||
className="px-2 text-gray-400 hover:text-gray-600"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
toggleFolderVisibility(account.id);
|
||||
}}
|
||||
>
|
||||
<ChevronDown
|
||||
className={`h-4 w-4 transition-transform duration-200 ${account.showFolders ? 'transform rotate-180' : ''}`}
|
||||
/>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Show folders for email accounts (not for "All" account) without the "Folders" header */}
|
||||
{account.id !== 0 && (
|
||||
<div className="pl-4 mt-1 mb-2 space-y-0.5 border-l border-gray-200">
|
||||
{account.folders && account.folders.length > 0 ? (
|
||||
account.folders.map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start py-1 px-2 text-xs ${
|
||||
currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'
|
||||
}`}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
handleMailboxChange(folder);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center justify-between w-full gap-1.5">
|
||||
<div className="flex items-center gap-1.5">
|
||||
{React.createElement(getFolderIcon(folder), { className: "h-3.5 w-3.5" })}
|
||||
<span className="truncate">{folder}</span>
|
||||
</div>
|
||||
{folder === 'INBOX' && unreadCount > 0 && (
|
||||
<span className="ml-auto bg-blue-600 text-white text-xs px-1.5 py-0.5 rounded-full text-[10px]">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
))
|
||||
) : (
|
||||
<div className="px-2 py-2">
|
||||
<div className="flex flex-col space-y-2">
|
||||
{/* Create placeholder folder items with shimmer effect */}
|
||||
{Array.from({ length: 5 }).map((_, index) => (
|
||||
<div key={index} className="flex items-center gap-1.5 animate-pulse">
|
||||
<div className="h-3.5 w-3.5 bg-gray-200 rounded-sm"></div>
|
||||
<div className="h-3 w-24 bg-gray-200 rounded"></div>
|
||||
</div>
|
||||
))}
|
||||
{account.folders && account.showFolders && (
|
||||
<div className="mt-1 pl-5 space-y-1">
|
||||
{/* Folder navigation */}
|
||||
{account.folders.map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className={`w-full justify-start px-2 py-1.5 text-sm ${
|
||||
currentFolder === folder ? 'bg-gray-200' : ''
|
||||
}`}
|
||||
onClick={() => handleMailboxChange(folder)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
{React.createElement(getFolderIcon(folder), {
|
||||
className: 'h-4 w-4 text-gray-500'
|
||||
})}
|
||||
<span className="text-gray-700">
|
||||
{formatFolderName(folder)}
|
||||
</span>
|
||||
{folder === 'INBOX' && unreadCount > 0 && (
|
||||
<span className="ml-auto text-xs font-medium bg-blue-100 text-blue-600 px-1.5 py-0.5 rounded-full">
|
||||
{unreadCount}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
@ -2,7 +2,7 @@
|
||||
|
||||
import { useState, useRef, useEffect } from 'react';
|
||||
import {
|
||||
X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2
|
||||
X, Paperclip, ChevronDown, ChevronUp, SendHorizontal, Loader2, ChevronRight
|
||||
} from 'lucide-react';
|
||||
import { Button } from '@/components/ui/button';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@ -10,6 +10,7 @@ import { Textarea } from '@/components/ui/textarea';
|
||||
import { Card, CardContent, CardHeader, CardTitle, CardFooter } from '@/components/ui/card';
|
||||
import DOMPurify from 'isomorphic-dompurify';
|
||||
import { Label } from '@/components/ui/label';
|
||||
import { sanitizeHtml, formatEmailAddresses } from "@/lib/utils/email-formatter";
|
||||
|
||||
// Import sub-components
|
||||
import ComposeEmailHeader from './ComposeEmailHeader';
|
||||
@ -22,7 +23,6 @@ import QuotedEmailContent from './QuotedEmailContent';
|
||||
import {
|
||||
formatReplyEmail,
|
||||
formatForwardedEmail,
|
||||
formatEmailAddresses,
|
||||
type EmailMessage,
|
||||
type EmailAddress
|
||||
} from '@/lib/utils/email-formatter';
|
||||
@ -142,9 +142,9 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
const { initialEmail, type = 'new', onClose, onSend } = props;
|
||||
|
||||
// Email form state
|
||||
const [to, setTo] = useState<string>('');
|
||||
const [cc, setCc] = useState<string>('');
|
||||
const [bcc, setBcc] = useState<string>('');
|
||||
const [to, setTo] = useState<EmailAddress[]>([]);
|
||||
const [cc, setCc] = useState<EmailAddress[]>([]);
|
||||
const [bcc, setBcc] = useState<EmailAddress[]>([]);
|
||||
const [subject, setSubject] = useState<string>('');
|
||||
const [emailContent, setEmailContent] = useState<string>('');
|
||||
const [showCc, setShowCc] = useState<boolean>(false);
|
||||
@ -156,170 +156,105 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
type: string;
|
||||
}>>([]);
|
||||
|
||||
const fileInputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
// Initialize the form when replying to or forwarding an email
|
||||
useEffect(() => {
|
||||
if (initialEmail && type !== 'new') {
|
||||
try {
|
||||
// Set recipients based on type
|
||||
if (type === 'reply' || type === 'reply-all') {
|
||||
// Reply goes to the original sender
|
||||
setTo(formatEmailAddresses(initialEmail.from || []));
|
||||
|
||||
// For reply-all, include all original recipients in CC
|
||||
if (type === 'reply-all') {
|
||||
const allRecipients = [
|
||||
...(initialEmail.to || []),
|
||||
...(initialEmail.cc || [])
|
||||
];
|
||||
// Filter out the current user if they were a recipient
|
||||
// This would need some user context to properly implement
|
||||
setCc(formatEmailAddresses(allRecipients));
|
||||
}
|
||||
|
||||
// Set subject with Re: prefix
|
||||
const subjectBase = initialEmail.subject || '(No subject)';
|
||||
const subject = subjectBase.match(/^Re:/i) ? subjectBase : `Re: ${subjectBase}`;
|
||||
setSubject(subject);
|
||||
|
||||
// Format the reply content with the quoted message included directly
|
||||
const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
|
||||
const sender = initialEmail.from && initialEmail.from.length > 0
|
||||
? initialEmail.from[0].name || initialEmail.from[0].address
|
||||
: 'Unknown sender';
|
||||
const date = initialEmail.date ?
|
||||
(typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) :
|
||||
new Date();
|
||||
|
||||
// Format date for display
|
||||
const formattedDate = date.toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// Create reply content with quote
|
||||
const replyContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="font-weight: 400; color: #555; margin: 20px 0 8px 0; font-size: 13px;">On ${formattedDate}, ${sender} wrote:</div>
|
||||
<blockquote style="margin: 0; padding: 10px 0 10px 15px; border-left: 2px solid #ddd; color: #505050; background-color: #f9f9f9; border-radius: 4px;">
|
||||
<div style="font-size: 13px;">
|
||||
${content}
|
||||
</div>
|
||||
</blockquote>
|
||||
`;
|
||||
|
||||
setEmailContent(replyContent);
|
||||
|
||||
// Show CC field if there are CC recipients
|
||||
if (initialEmail.cc && initialEmail.cc.length > 0) {
|
||||
// Set recipients based on email type
|
||||
if (type === 'reply') {
|
||||
// Reply only to sender
|
||||
setTo(initialEmail.from || []);
|
||||
setCc([]);
|
||||
setBcc([]);
|
||||
} else if (type === 'reply-all') {
|
||||
// Reply to sender and all recipients, excluding current user
|
||||
setTo(initialEmail.from || []);
|
||||
// Set CC to all original recipients
|
||||
setCc(initialEmail.cc || []);
|
||||
// Enable CC field if there are recipients
|
||||
if ((initialEmail.cc && initialEmail.cc.length > 0) || (initialEmail.to && initialEmail.to.length > 0)) {
|
||||
setShowCc(true);
|
||||
}
|
||||
}
|
||||
else if (type === 'forward') {
|
||||
// Set subject with Fwd: prefix
|
||||
const subjectBase = initialEmail.subject || '(No subject)';
|
||||
const subject = subjectBase.match(/^(Fwd|FW|Forward):/i) ? subjectBase : `Fwd: ${subjectBase}`;
|
||||
setSubject(subject);
|
||||
|
||||
// Format the forward content with the original email included directly
|
||||
const content = initialEmail.content || initialEmail.html || initialEmail.text || '';
|
||||
const fromString = formatEmailAddresses(initialEmail.from || []);
|
||||
const toString = formatEmailAddresses(initialEmail.to || []);
|
||||
const date = initialEmail.date ?
|
||||
(typeof initialEmail.date === 'string' ? new Date(initialEmail.date) : initialEmail.date) :
|
||||
new Date();
|
||||
|
||||
// Format date for display
|
||||
const formattedDate = date.toLocaleString('en-US', {
|
||||
weekday: 'short',
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
hour: '2-digit',
|
||||
minute: '2-digit'
|
||||
});
|
||||
|
||||
// Create forwarded content
|
||||
const forwardContent = `
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div><br></div>
|
||||
<div style="border-top: 1px solid #ccc; margin-top: 10px; padding-top: 10px;">
|
||||
<div style="font-family: Arial, sans-serif; color: #333;">
|
||||
<div style="margin-bottom: 15px;">
|
||||
<div>---------- Forwarded message ---------</div>
|
||||
<div><b>From:</b> ${fromString}</div>
|
||||
<div><b>Date:</b> ${formattedDate}</div>
|
||||
<div><b>Subject:</b> ${initialEmail.subject || ''}</div>
|
||||
<div><b>To:</b> ${toString}</div>
|
||||
</div>
|
||||
<div class="email-original-content">
|
||||
${content}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
|
||||
setEmailContent(forwardContent);
|
||||
|
||||
// If the original email has attachments, we should include them
|
||||
if (initialEmail.attachments && initialEmail.attachments.length > 0) {
|
||||
const formattedAttachments = initialEmail.attachments.map(att => ({
|
||||
name: att.filename || 'attachment',
|
||||
type: att.contentType || 'application/octet-stream',
|
||||
content: att.content || ''
|
||||
}));
|
||||
setAttachments(formattedAttachments);
|
||||
}
|
||||
} else if (type === 'forward') {
|
||||
// Forward doesn't preset recipients
|
||||
setTo([]);
|
||||
setCc([]);
|
||||
setBcc([]);
|
||||
}
|
||||
|
||||
// Set subject based on email type
|
||||
if (type === 'reply' || type === 'reply-all') {
|
||||
setSubject(initialEmail.subject ? `Re: ${initialEmail.subject.replace(/^Re: /i, '')}` : '');
|
||||
} else if (type === 'forward') {
|
||||
setSubject(initialEmail.subject ? `Fwd: ${initialEmail.subject.replace(/^Fwd: /i, '')}` : '');
|
||||
}
|
||||
|
||||
// Set initial content - just an empty div, QuotedEmailContent will be added in the render
|
||||
setEmailContent('<div></div>');
|
||||
|
||||
} catch (error) {
|
||||
console.error('Error initializing compose form:', error);
|
||||
// Set safe defaults
|
||||
setTo([]);
|
||||
setCc([]);
|
||||
setBcc([]);
|
||||
setSubject('');
|
||||
setEmailContent('<div></div>');
|
||||
}
|
||||
}
|
||||
}, [initialEmail, type]);
|
||||
|
||||
// Handle file attachments
|
||||
const handleAttachmentAdd = async (files: FileList) => {
|
||||
const newAttachments = Array.from(files).map(file => ({
|
||||
name: file.name,
|
||||
type: file.type,
|
||||
content: URL.createObjectURL(file)
|
||||
}));
|
||||
|
||||
setAttachments(prev => [...prev, ...newAttachments]);
|
||||
|
||||
// Handle file input change
|
||||
const handleAttachmentChange = (event: React.ChangeEvent<HTMLInputElement>) => {
|
||||
if (event.target.files && event.target.files.length > 0) {
|
||||
handleAttachmentAdd(event.target.files);
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Add attachment
|
||||
const handleAttachmentAdd = async (files: FileList) => {
|
||||
// Implementation for adding attachments
|
||||
// Code omitted for brevity
|
||||
};
|
||||
|
||||
// Remove attachment
|
||||
const handleAttachmentRemove = (index: number) => {
|
||||
setAttachments(prev => prev.filter((_, i) => i !== index));
|
||||
};
|
||||
|
||||
// Handle sending email
|
||||
// Handle send email
|
||||
const handleSend = async () => {
|
||||
if (!to) {
|
||||
alert('Please specify at least one recipient');
|
||||
if (!to.length) {
|
||||
// Validation error: no recipients
|
||||
alert('Please add at least one recipient');
|
||||
return;
|
||||
}
|
||||
|
||||
setSending(true);
|
||||
|
||||
try {
|
||||
setSending(true);
|
||||
|
||||
// Format addresses to strings for the API
|
||||
const formattedTo = to.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ');
|
||||
const formattedCc = cc.length ? cc.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ') : undefined;
|
||||
const formattedBcc = bcc.length ? bcc.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ') : undefined;
|
||||
|
||||
await onSend({
|
||||
to,
|
||||
cc: cc || undefined,
|
||||
bcc: bcc || undefined,
|
||||
to: formattedTo,
|
||||
cc: formattedCc,
|
||||
bcc: formattedBcc,
|
||||
subject,
|
||||
body: emailContent,
|
||||
attachments
|
||||
});
|
||||
|
||||
// Reset form and close
|
||||
onClose();
|
||||
} catch (error) {
|
||||
console.error('Error sending email:', error);
|
||||
@ -328,224 +263,238 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
||||
setSending(false);
|
||||
}
|
||||
};
|
||||
|
||||
// Additional effect to ensure we scroll to the top and focus the editor
|
||||
useEffect(() => {
|
||||
// Focus the editor and ensure it's scrolled to the top
|
||||
const editorContainer = document.querySelector('.ql-editor') as HTMLElement;
|
||||
if (editorContainer) {
|
||||
// Set timeout to ensure DOM is fully rendered
|
||||
setTimeout(() => {
|
||||
// Focus the editor
|
||||
editorContainer.focus();
|
||||
|
||||
// Make sure all scroll containers are at the top
|
||||
editorContainer.scrollTop = 0;
|
||||
|
||||
// Find all possible scrollable parent containers
|
||||
const scrollContainers = [
|
||||
document.querySelector('.ql-container') as HTMLElement,
|
||||
document.querySelector('.rich-email-editor-container') as HTMLElement,
|
||||
document.querySelector('.h-full.flex.flex-col.p-6') as HTMLElement
|
||||
];
|
||||
|
||||
// Scroll all containers to top
|
||||
scrollContainers.forEach(container => {
|
||||
if (container) {
|
||||
container.scrollTop = 0;
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
}
|
||||
}, []);
|
||||
|
||||
|
||||
// Render the modern compose form
|
||||
return (
|
||||
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||
<div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||
{/* Modal Header */}
|
||||
<div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||
<h3 className="text-lg font-semibold text-gray-900">
|
||||
{type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
|
||||
</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hover:bg-gray-100 rounded-full"
|
||||
<div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50">
|
||||
<div className="bg-white dark:bg-gray-900 rounded-lg shadow-lg w-full max-w-3xl h-[80vh] flex flex-col overflow-hidden">
|
||||
{/* Header */}
|
||||
<div className="flex items-center justify-between px-6 py-4 border-b">
|
||||
<h2 className="text-xl font-semibold flex items-center">
|
||||
{type === 'reply' && <ChevronRight className="h-5 w-5 mr-2" />}
|
||||
{type === 'reply-all' && <ChevronRight className="h-5 w-5 mr-2" />}
|
||||
{type === 'forward' && <ChevronRight className="h-5 w-5 mr-2" />}
|
||||
{type === 'reply' ? 'Reply' :
|
||||
type === 'reply-all' ? 'Reply All' :
|
||||
type === 'forward' ? 'Forward' : 'New Message'}
|
||||
</h2>
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
<X className="h-5 w-5 text-gray-500" />
|
||||
</Button>
|
||||
<X className="h-5 w-5" />
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* Modal Body */}
|
||||
<div className="flex-1 overflow-hidden">
|
||||
<div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
|
||||
{/* To Field */}
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||||
<Input
|
||||
id="to"
|
||||
value={to}
|
||||
onChange={(e) => setTo(e.target.value)}
|
||||
placeholder="recipient@example.com"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CC/BCC Toggle Buttons */}
|
||||
<div className="flex-none flex items-center gap-4">
|
||||
|
||||
{/* Body */}
|
||||
<div className="flex-1 overflow-y-auto p-6">
|
||||
{/* To */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">To:</label>
|
||||
<Input
|
||||
value={to.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ')}
|
||||
onChange={(e) => {
|
||||
// Parse email addresses
|
||||
const addresses = e.target.value.split(',').map(addr => {
|
||||
addr = addr.trim();
|
||||
const match = addr.match(/(.*)<(.*)>/);
|
||||
if (match) {
|
||||
return { name: match[1].trim(), address: match[2].trim() };
|
||||
}
|
||||
return { name: addr, address: addr };
|
||||
});
|
||||
setTo(addresses);
|
||||
}}
|
||||
placeholder="Recipients"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* CC and BCC toggles */}
|
||||
<div className="flex gap-2 mb-4">
|
||||
{!showCc && (
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
onClick={() => setShowCc(!showCc)}
|
||||
onClick={() => setShowCc(true)}
|
||||
className="text-blue-600 text-sm flex items-center"
|
||||
>
|
||||
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||||
<ChevronDown className="h-4 w-4 mr-1" />
|
||||
Add Cc
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||
onClick={() => setShowBcc(!showBcc)}
|
||||
>
|
||||
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{/* CC Field */}
|
||||
{showCc && (
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||||
<Input
|
||||
id="cc"
|
||||
value={cc}
|
||||
onChange={(e) => setCc(e.target.value)}
|
||||
placeholder="cc@example.com"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BCC Field */}
|
||||
{showBcc && (
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="bcc" className="block text-sm font-medium text-gray-700">Bcc</Label>
|
||||
<Input
|
||||
id="bcc"
|
||||
value={bcc}
|
||||
onChange={(e) => setBcc(e.target.value)}
|
||||
placeholder="bcc@example.com"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subject Field */}
|
||||
<div className="flex-none">
|
||||
<Label htmlFor="subject" className="block text-sm font-medium text-gray-700">Subject</Label>
|
||||
<Input
|
||||
id="subject"
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Enter subject"
|
||||
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Message Body */}
|
||||
<div className="flex-1 min-h-[200px] flex flex-col overflow-hidden">
|
||||
<Label htmlFor="message" className="flex-none block text-sm font-medium text-gray-700 mb-2">Message</Label>
|
||||
<div className="flex-1 border border-gray-300 rounded-md overflow-hidden">
|
||||
<RichEmailEditor
|
||||
initialContent={emailContent}
|
||||
onChange={setEmailContent}
|
||||
minHeight="200px"
|
||||
maxHeight="none"
|
||||
preserveFormatting={true}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
{attachments.length > 0 && (
|
||||
<div className="border rounded-md p-3 mt-4">
|
||||
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
|
||||
<div className="space-y-2">
|
||||
{attachments.map((file, index) => (
|
||||
<div key={index} className="flex items-center justify-between text-sm border rounded p-2">
|
||||
<span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
onClick={() => handleAttachmentRemove(index)}
|
||||
className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
{!showBcc && (
|
||||
<button
|
||||
onClick={() => setShowBcc(true)}
|
||||
className="text-blue-600 text-sm flex items-center"
|
||||
>
|
||||
<ChevronDown className="h-4 w-4 mr-1" />
|
||||
Add Bcc
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Modal Footer */}
|
||||
<div className="flex-none flex items-center justify-between px-6 py-3 border-t border-gray-200 bg-white">
|
||||
<div className="flex items-center gap-2">
|
||||
{/* File Input for Attachments */}
|
||||
|
||||
{/* CC */}
|
||||
{showCc && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="block text-sm font-medium">Cc:</label>
|
||||
<button
|
||||
onClick={() => setShowCc(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Input
|
||||
value={cc.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ')}
|
||||
onChange={(e) => {
|
||||
// Parse email addresses
|
||||
const addresses = e.target.value.split(',').map(addr => {
|
||||
addr = addr.trim();
|
||||
const match = addr.match(/(.*)<(.*)>/);
|
||||
if (match) {
|
||||
return { name: match[1].trim(), address: match[2].trim() };
|
||||
}
|
||||
return { name: addr, address: addr };
|
||||
});
|
||||
setCc(addresses);
|
||||
}}
|
||||
placeholder="Carbon copy recipients"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* BCC */}
|
||||
{showBcc && (
|
||||
<div className="mb-4">
|
||||
<div className="flex items-center justify-between mb-1">
|
||||
<label className="block text-sm font-medium">Bcc:</label>
|
||||
<button
|
||||
onClick={() => setShowBcc(false)}
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<ChevronUp className="h-4 w-4" />
|
||||
</button>
|
||||
</div>
|
||||
<Input
|
||||
value={bcc.map(addr => addr.name && addr.name !== addr.address
|
||||
? `${addr.name} <${addr.address}>`
|
||||
: addr.address).join(', ')}
|
||||
onChange={(e) => {
|
||||
// Parse email addresses
|
||||
const addresses = e.target.value.split(',').map(addr => {
|
||||
addr = addr.trim();
|
||||
const match = addr.match(/(.*)<(.*)>/);
|
||||
if (match) {
|
||||
return { name: match[1].trim(), address: match[2].trim() };
|
||||
}
|
||||
return { name: addr, address: addr };
|
||||
});
|
||||
setBcc(addresses);
|
||||
}}
|
||||
placeholder="Blind carbon copy recipients"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Subject */}
|
||||
<div className="mb-4">
|
||||
<label className="block text-sm font-medium mb-1">Subject:</label>
|
||||
<Input
|
||||
value={subject}
|
||||
onChange={(e) => setSubject(e.target.value)}
|
||||
placeholder="Subject"
|
||||
className="w-full"
|
||||
/>
|
||||
</div>
|
||||
|
||||
{/* Email Content */}
|
||||
<div className="mb-4">
|
||||
<div
|
||||
className="min-h-[200px] border rounded-md p-3 bg-white dark:bg-gray-800"
|
||||
contentEditable
|
||||
dangerouslySetInnerHTML={{ __html: emailContent }}
|
||||
onInput={(e) => setEmailContent(e.currentTarget.innerHTML)}
|
||||
/>
|
||||
|
||||
{/* Quoted content for replies and forwards */}
|
||||
{initialEmail && (type === 'reply' || type === 'reply-all' || type === 'forward') && (
|
||||
<EmailMessageToQuotedContentAdapter
|
||||
email={initialEmail}
|
||||
type={type as 'reply' | 'reply-all' | 'forward'}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Attachments */}
|
||||
<div className="mb-4">
|
||||
{attachments.length > 0 && (
|
||||
<div className="flex flex-wrap gap-2 mb-2">
|
||||
{attachments.map((attachment, index) => (
|
||||
<div key={index} className="flex items-center bg-gray-100 dark:bg-gray-800 rounded-md px-2 py-1">
|
||||
<span className="text-sm truncate max-w-[150px]">{attachment.name}</span>
|
||||
<button
|
||||
onClick={() => handleAttachmentRemove(index)}
|
||||
className="ml-2 text-gray-500 hover:text-gray-700"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<input
|
||||
type="file"
|
||||
id="file-attachment"
|
||||
ref={fileInputRef}
|
||||
onChange={handleAttachmentChange}
|
||||
className="hidden"
|
||||
multiple
|
||||
onChange={(e) => {
|
||||
if (e.target.files && e.target.files.length > 0) {
|
||||
handleAttachmentAdd(e.target.files);
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<label htmlFor="file-attachment">
|
||||
<Button
|
||||
variant="outline"
|
||||
size="icon"
|
||||
className="rounded-full bg-white hover:bg-gray-100 border-gray-300"
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
document.getElementById('file-attachment')?.click();
|
||||
}}
|
||||
>
|
||||
<Paperclip className="h-4 w-4 text-gray-600" />
|
||||
</Button>
|
||||
</label>
|
||||
{sending && <span className="text-xs text-gray-500 ml-2">Preparing attachment...</span>}
|
||||
</div>
|
||||
<div className="flex items-center gap-3">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="text-gray-600 hover:text-gray-700 hover:bg-gray-100"
|
||||
onClick={onClose}
|
||||
disabled={sending}
|
||||
|
||||
<button
|
||||
onClick={() => fileInputRef.current?.click()}
|
||||
className="flex items-center text-sm text-gray-600 hover:text-gray-800 dark:text-gray-400 dark:hover:text-gray-200"
|
||||
>
|
||||
Cancel
|
||||
</Button>
|
||||
<Button
|
||||
className="bg-blue-600 text-white hover:bg-blue-700"
|
||||
onClick={handleSend}
|
||||
disabled={sending}
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendHorizontal className="mr-2 h-4 w-4" />
|
||||
Send
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
<Paperclip className="h-4 w-4 mr-1" />
|
||||
Attach files
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Footer */}
|
||||
<div className="px-6 py-4 border-t flex justify-between">
|
||||
<button
|
||||
onClick={onClose}
|
||||
className="px-4 py-2 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 rounded-md"
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
|
||||
<button
|
||||
onClick={handleSend}
|
||||
disabled={sending}
|
||||
className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-md flex items-center"
|
||||
>
|
||||
{sending ? (
|
||||
<>
|
||||
<Loader2 className="h-4 w-4 mr-2 animate-spin" />
|
||||
Sending...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<SendHorizontal className="h-4 w-4 mr-2" />
|
||||
Send
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user