courrier multi account restore compose
This commit is contained in:
parent
a38942f0fd
commit
76d40bb4e3
BIN
app/.DS_Store
vendored
BIN
app/.DS_Store
vendored
Binary file not shown.
@ -360,176 +360,194 @@ export default function ComposeEmail(props: ComposeEmailAllProps) {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full h-full flex flex-col overflow-hidden">
|
<div className="fixed inset-0 bg-gray-600/30 backdrop-blur-sm z-50 flex items-center justify-center">
|
||||||
<div className="border-b py-2 px-4">
|
<div className="w-full max-w-2xl h-[90vh] bg-white rounded-xl shadow-xl flex flex-col mx-4">
|
||||||
<div className="flex justify-between items-center">
|
{/* Modal Header */}
|
||||||
<h2 className="text-lg font-semibold">
|
<div className="flex-none flex items-center justify-between px-6 py-3 border-b border-gray-200">
|
||||||
{type === 'new' ? 'New Message' :
|
<h3 className="text-lg font-semibold text-gray-900">
|
||||||
type === 'reply' ? 'Reply' :
|
{type === 'reply' ? 'Reply' : type === 'forward' ? 'Forward' : type === 'reply-all' ? 'Reply All' : 'New Message'}
|
||||||
type === 'reply-all' ? 'Reply All' :
|
</h3>
|
||||||
'Forward'}
|
<Button
|
||||||
</h2>
|
variant="ghost"
|
||||||
<Button variant="ghost" size="icon" onClick={onClose}>
|
size="icon"
|
||||||
<X className="h-4 w-4" />
|
className="hover:bg-gray-100 rounded-full"
|
||||||
|
onClick={onClose}
|
||||||
|
>
|
||||||
|
<X className="h-5 w-5 text-gray-500" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="p-0 flex-1 flex flex-col overflow-hidden">
|
{/* Modal Body */}
|
||||||
{/* Email header fields */}
|
<div className="flex-1 overflow-hidden">
|
||||||
<div className="p-3 border-b space-y-2">
|
<div className="h-full flex flex-col p-6 space-y-4 overflow-y-auto">
|
||||||
<div className="flex items-center">
|
{/* To Field */}
|
||||||
<span className="w-16 text-sm font-medium">To:</span>
|
<div className="flex-none">
|
||||||
|
<Label htmlFor="to" className="block text-sm font-medium text-gray-700">To</Label>
|
||||||
<Input
|
<Input
|
||||||
|
id="to"
|
||||||
value={to}
|
value={to}
|
||||||
onChange={(e) => setTo(e.target.value)}
|
onChange={(e) => setTo(e.target.value)}
|
||||||
className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
|
|
||||||
placeholder="recipient@example.com"
|
placeholder="recipient@example.com"
|
||||||
|
className="w-full mt-1 bg-white border-gray-300 text-gray-900"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{showCc && (
|
{/* CC/BCC Toggle Buttons */}
|
||||||
<div className="flex items-center">
|
<div className="flex-none flex items-center gap-4">
|
||||||
<span className="w-16 text-sm font-medium">Cc:</span>
|
|
||||||
<Input
|
|
||||||
value={cc}
|
|
||||||
onChange={(e) => setCc(e.target.value)}
|
|
||||||
className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
|
|
||||||
placeholder="cc@example.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{showBcc && (
|
|
||||||
<div className="flex items-center">
|
|
||||||
<span className="w-16 text-sm font-medium">Bcc:</span>
|
|
||||||
<Input
|
|
||||||
value={bcc}
|
|
||||||
onChange={(e) => setBcc(e.target.value)}
|
|
||||||
className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
|
|
||||||
placeholder="bcc@example.com"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* CC/BCC controls */}
|
|
||||||
<div className="flex items-center text-xs">
|
|
||||||
<button
|
<button
|
||||||
className="text-primary hover:underline mr-3 flex items-center"
|
type="button"
|
||||||
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
onClick={() => setShowCc(!showCc)}
|
onClick={() => setShowCc(!showCc)}
|
||||||
>
|
>
|
||||||
{showCc ? (
|
{showCc ? 'Hide Cc' : 'Add Cc'}
|
||||||
<>
|
|
||||||
<ChevronUp className="h-3 w-3 mr-0.5" />
|
|
||||||
Hide Cc
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ChevronDown className="h-3 w-3 mr-0.5" />
|
|
||||||
Show Cc
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<button
|
<button
|
||||||
className="text-primary hover:underline flex items-center"
|
type="button"
|
||||||
|
className="text-blue-600 hover:text-blue-700 text-sm font-medium"
|
||||||
onClick={() => setShowBcc(!showBcc)}
|
onClick={() => setShowBcc(!showBcc)}
|
||||||
>
|
>
|
||||||
{showBcc ? (
|
{showBcc ? 'Hide Bcc' : 'Add Bcc'}
|
||||||
<>
|
|
||||||
<ChevronUp className="h-3 w-3 mr-0.5" />
|
|
||||||
Hide Bcc
|
|
||||||
</>
|
|
||||||
) : (
|
|
||||||
<>
|
|
||||||
<ChevronDown className="h-3 w-3 mr-0.5" />
|
|
||||||
Show Bcc
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex items-center">
|
{/* CC Field */}
|
||||||
<span className="w-16 text-sm font-medium">Subject:</span>
|
{showCc && (
|
||||||
|
<div className="flex-none">
|
||||||
|
<Label htmlFor="cc" className="block text-sm font-medium text-gray-700">Cc</Label>
|
||||||
<Input
|
<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}
|
value={subject}
|
||||||
onChange={(e) => setSubject(e.target.value)}
|
onChange={(e) => setSubject(e.target.value)}
|
||||||
className="flex-1 border-0 shadow-none h-8 focus-visible:ring-0"
|
placeholder="Enter subject"
|
||||||
placeholder="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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Email body editor */}
|
{/* Attachments */}
|
||||||
<div
|
|
||||||
ref={editorRef}
|
|
||||||
className="flex-1 overflow-auto p-4 focus:outline-none email-content"
|
|
||||||
contentEditable={true}
|
|
||||||
onInput={handleEditorInput}
|
|
||||||
dangerouslySetInnerHTML={{ __html: body }}
|
|
||||||
style={{ minHeight: '200px' }}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{/* Attachments list */}
|
|
||||||
{attachments.length > 0 && (
|
{attachments.length > 0 && (
|
||||||
<div className="border-t p-2">
|
<div className="border rounded-md p-3 mt-4">
|
||||||
<div className="text-sm font-medium mb-1">Attachments:</div>
|
<h3 className="text-sm font-medium mb-2 text-gray-700">Attachments</h3>
|
||||||
<div className="flex flex-wrap gap-2">
|
<div className="space-y-2">
|
||||||
{attachments.map((attachment, index) => (
|
{attachments.map((file, index) => (
|
||||||
<div key={index} className="flex items-center gap-1 text-sm bg-muted px-2 py-1 rounded">
|
<div key={index} className="flex items-center justify-between text-sm border rounded p-2">
|
||||||
<Paperclip className="h-3 w-3" />
|
<span className="truncate max-w-[200px] text-gray-800">{file.name}</span>
|
||||||
<span>{attachment.name}</span>
|
<Button
|
||||||
<button
|
variant="ghost"
|
||||||
onClick={() => removeAttachment(index)}
|
size="sm"
|
||||||
className="ml-1 text-muted-foreground hover:text-destructive"
|
onClick={() => handleAttachmentRemove(index)}
|
||||||
|
className="h-6 w-6 p-0 text-gray-500 hover:text-gray-700"
|
||||||
>
|
>
|
||||||
<X className="h-3 w-3" />
|
<X className="h-4 w-4" />
|
||||||
</button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="border-t p-3 flex justify-between">
|
|
||||||
<div>
|
|
||||||
<input
|
|
||||||
type="file"
|
|
||||||
ref={attachmentInputRef}
|
|
||||||
className="hidden"
|
|
||||||
onChange={handleFileSelection}
|
|
||||||
multiple
|
|
||||||
/>
|
|
||||||
<Button
|
|
||||||
variant="outline"
|
|
||||||
size="sm"
|
|
||||||
onClick={handleAttachmentClick}
|
|
||||||
>
|
|
||||||
<Paperclip className="h-4 w-4 mr-1" />
|
|
||||||
Attach
|
|
||||||
</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 */}
|
||||||
|
<input
|
||||||
|
type="file"
|
||||||
|
id="file-attachment"
|
||||||
|
className="hidden"
|
||||||
|
multiple
|
||||||
|
onChange={(e) => {
|
||||||
|
if (e.target.files && e.target.files.length > 0) {
|
||||||
|
handleAttachmentAdd(e.target.files);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<label htmlFor="file-attachment">
|
||||||
<Button
|
<Button
|
||||||
size="sm"
|
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}
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
className="bg-blue-600 text-white hover:bg-blue-700"
|
||||||
onClick={handleSend}
|
onClick={handleSend}
|
||||||
disabled={sending}
|
disabled={sending}
|
||||||
>
|
>
|
||||||
{sending ? (
|
{sending ? (
|
||||||
<>
|
<>
|
||||||
<Loader2 className="h-4 w-4 mr-1 animate-spin" />
|
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||||
Sending...
|
Sending...
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<SendHorizontal className="h-4 w-4 mr-1" />
|
<SendHorizontal className="mr-2 h-4 w-4" />
|
||||||
Send
|
Send
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user