mail page ui correction maj compose 20 bis 16
This commit is contained in:
parent
1ed9592bcb
commit
a1b39f3169
@ -1042,6 +1042,130 @@ export default function MailPage() {
|
|||||||
</nav>
|
</nav>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
// Add debug logging for the email list
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('Current view:', currentView);
|
||||||
|
console.log('Filtered emails:', filteredEmails.map(email => ({
|
||||||
|
id: email.id,
|
||||||
|
subject: email.subject,
|
||||||
|
folder: email.folder,
|
||||||
|
from: email.from
|
||||||
|
})));
|
||||||
|
}, [currentView, filteredEmails]);
|
||||||
|
|
||||||
|
// Email list panel section
|
||||||
|
const renderEmailList = () => (
|
||||||
|
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
||||||
|
{/* Email list header */}
|
||||||
|
<div className="p-4 border-b border-gray-100">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800">
|
||||||
|
{currentView === 'INBOX' ? 'Inbox' :
|
||||||
|
currentView === 'starred' ? 'Starred' :
|
||||||
|
currentView.charAt(0).toUpperCase() + currentView.slice(1)}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{filteredEmails.length} emails
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Email list */}
|
||||||
|
<div className="flex-1 overflow-y-auto">
|
||||||
|
{loading ? (
|
||||||
|
<div className="flex items-center justify-center h-64">
|
||||||
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||||
|
</div>
|
||||||
|
) : filteredEmails.length === 0 ? (
|
||||||
|
<div className="flex flex-col items-center justify-center h-64">
|
||||||
|
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
||||||
|
<p className="text-gray-500 text-sm">
|
||||||
|
{currentView === 'INBOX' && 'No emails in inbox'}
|
||||||
|
{currentView === 'starred' && 'No starred emails'}
|
||||||
|
{currentView === 'Sent' && 'No sent emails'}
|
||||||
|
{currentView === 'Trash' && 'No emails in trash'}
|
||||||
|
{currentView === 'Drafts' && 'No drafts'}
|
||||||
|
{currentView === 'Spam' && 'No spam emails'}
|
||||||
|
{currentView === 'Archives' && 'No archived emails'}
|
||||||
|
</p>
|
||||||
|
{/* Debug info */}
|
||||||
|
<div className="text-xs text-gray-400 mt-2">
|
||||||
|
<p>Current view: {currentView}</p>
|
||||||
|
<p>Total emails: {emails.length}</p>
|
||||||
|
<p>Folders present: {[...new Set(emails.map(e => e.folder))].join(', ')}</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="divide-y divide-gray-100">
|
||||||
|
{filteredEmails.map((email) => (
|
||||||
|
<div
|
||||||
|
key={email.id}
|
||||||
|
className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
|
||||||
|
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||||
|
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||||
|
onClick={() => handleEmailSelect(email.id)}
|
||||||
|
>
|
||||||
|
<div className="flex items-center justify-between mb-1">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedEmails.includes(email.id.toString())}
|
||||||
|
onClick={(e) => e.stopPropagation()}
|
||||||
|
onCheckedChange={(checked) => {
|
||||||
|
if (checked) {
|
||||||
|
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||||
|
} else {
|
||||||
|
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
<span className="text-sm font-medium text-gray-900">
|
||||||
|
{currentView === 'Sent' ? email.to : (email.fromName || email.from)}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<span className="text-xs text-gray-500">
|
||||||
|
{formatDate(email.date)}
|
||||||
|
</span>
|
||||||
|
{/* Show folder badge if it doesn't match current view */}
|
||||||
|
{email.folder !== currentView && currentView === 'starred' && (
|
||||||
|
<span className="text-xs bg-gray-100 text-gray-600 px-2 py-0.5 rounded">
|
||||||
|
{email.folder}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
className="text-gray-400 hover:text-yellow-400"
|
||||||
|
onClick={(e) => toggleStarred(email.id, e)}
|
||||||
|
>
|
||||||
|
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="ml-8">
|
||||||
|
<h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
|
||||||
|
{email.subject || '(No subject)'}
|
||||||
|
</h3>
|
||||||
|
<p className="text-xs text-gray-500 line-clamp-1">
|
||||||
|
{email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
{/* Debug info - only in development */}
|
||||||
|
{process.env.NODE_ENV === 'development' && (
|
||||||
|
<div className="ml-8 mt-1 text-xs text-gray-400">
|
||||||
|
Folder: {email.folder}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
|
||||||
if (error) {
|
if (error) {
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
||||||
@ -1063,21 +1187,21 @@ export default function MailPage() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
{/* Main layout */}
|
{/* Main layout */}
|
||||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||||
{/* Sidebar */}
|
{/* Sidebar */}
|
||||||
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
<div className={`${sidebarOpen ? 'w-60' : 'w-16'} bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col transition-all duration-300 ease-in-out
|
||||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||||
{/* Courrier Title */}
|
{/* Courrier Title */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-3 border-b border-gray-100">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Mail className="h-6 w-6 text-gray-600" />
|
<Mail className="h-6 w-6 text-gray-600" />
|
||||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Compose button */}
|
{/* Compose button */}
|
||||||
<div className="p-2 border-b border-gray-100">
|
<div className="p-2 border-b border-gray-100">
|
||||||
<Button
|
<Button
|
||||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-1.5 text-sm"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setShowCompose(true);
|
setShowCompose(true);
|
||||||
@ -1093,9 +1217,9 @@ export default function MailPage() {
|
|||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<PlusIcon className="h-3.5 w-3.5" />
|
<PlusIcon className="h-3.5 w-3.5" />
|
||||||
<span>Compose</span>
|
<span>Compose</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Accounts Section */}
|
{/* Accounts Section */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="p-3 border-b border-gray-100">
|
||||||
@ -1124,7 +1248,7 @@ export default function MailPage() {
|
|||||||
</div>
|
</div>
|
||||||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
@ -1133,101 +1257,12 @@ export default function MailPage() {
|
|||||||
|
|
||||||
{/* Navigation */}
|
{/* Navigation */}
|
||||||
{renderSidebarNav()}
|
{renderSidebarNav()}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main content area */}
|
{/* Main content area */}
|
||||||
<div className="flex-1 flex overflow-hidden">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{/* Email list panel */}
|
{/* Email list panel */}
|
||||||
<div className="w-[320px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
{renderEmailList()}
|
||||||
{/* Email list header */}
|
|
||||||
<div className="p-4 border-b border-gray-100">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
|
||||||
{currentView}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{filteredEmails.length} emails
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Email list */}
|
|
||||||
<div className="flex-1 overflow-y-auto">
|
|
||||||
{loading ? (
|
|
||||||
<div className="flex items-center justify-center h-64">
|
|
||||||
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
|
||||||
</div>
|
|
||||||
) : filteredEmails.length === 0 ? (
|
|
||||||
<div className="flex flex-col items-center justify-center h-64">
|
|
||||||
<Mail className="h-8 w-8 text-gray-400 mb-2" />
|
|
||||||
<p className="text-gray-500 text-sm">
|
|
||||||
{currentView === 'INBOX' && 'No emails in inbox'}
|
|
||||||
{currentView === 'starred' && 'No starred emails'}
|
|
||||||
{currentView === 'Sent' && 'No sent emails'}
|
|
||||||
{currentView === 'Trash' && 'No emails in trash'}
|
|
||||||
</p>
|
|
||||||
{/* Add debug info */}
|
|
||||||
<p className="text-xs text-gray-400 mt-2">
|
|
||||||
Total emails: {emails.length}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
) : (
|
|
||||||
<div className="divide-y divide-gray-100">
|
|
||||||
{filteredEmails.map((email) => (
|
|
||||||
<div
|
|
||||||
key={email.id}
|
|
||||||
className={`flex flex-col p-3 hover:bg-gray-50 cursor-pointer ${
|
|
||||||
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
|
||||||
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
|
||||||
onClick={() => handleEmailSelect(email.id)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center justify-between mb-1">
|
|
||||||
<div className="flex items-center gap-3">
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedEmails.includes(email.id.toString())}
|
|
||||||
onClick={(e) => e.stopPropagation()}
|
|
||||||
onCheckedChange={(checked) => {
|
|
||||||
if (checked) {
|
|
||||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
|
||||||
} else {
|
|
||||||
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<span className="text-sm font-medium text-gray-900">
|
|
||||||
{currentView === 'Sent' ? email.to : (email.fromName || email.from)}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<span className="text-xs text-gray-500">
|
|
||||||
{formatDate(email.date)}
|
|
||||||
</span>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-gray-400 hover:text-yellow-400"
|
|
||||||
onClick={(e) => toggleStarred(email.id, e)}
|
|
||||||
>
|
|
||||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="ml-8">
|
|
||||||
<h3 className={`text-sm ${!email.read ? 'font-semibold' : ''} text-gray-900 mb-0.5`}>
|
|
||||||
{email.subject}
|
|
||||||
</h3>
|
|
||||||
<p className="text-xs text-gray-500 line-clamp-1">
|
|
||||||
{email.body.replace(/<[^>]*>/g, '').substring(0, 100)}...
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Preview panel - will automatically take remaining space */}
|
{/* Preview panel - will automatically take remaining space */}
|
||||||
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
||||||
@ -1236,56 +1271,56 @@ export default function MailPage() {
|
|||||||
{/* Email actions header */}
|
{/* Email actions header */}
|
||||||
<div className="flex-none p-4 border-b border-gray-100">
|
<div className="flex-none p-4 border-b border-gray-100">
|
||||||
<div className="flex items-center justify-between">
|
<div className="flex items-center justify-between">
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={() => setSelectedEmail(null)}
|
onClick={() => setSelectedEmail(null)}
|
||||||
className="md:hidden"
|
className="md:hidden"
|
||||||
>
|
>
|
||||||
<ChevronLeft className="h-5 w-5" />
|
<ChevronLeft className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
<h2 className="text-xl font-semibold text-gray-900 truncate">
|
<h2 className="text-xl font-semibold text-gray-900 truncate">
|
||||||
{selectedEmail.subject}
|
{selectedEmail.subject}
|
||||||
</h2>
|
</h2>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-gray-400 hover:text-gray-900"
|
||||||
onClick={() => handleReply('reply')}
|
onClick={() => handleReply('reply')}
|
||||||
>
|
>
|
||||||
<Reply className="h-5 w-5" />
|
<Reply className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-gray-400 hover:text-gray-900"
|
||||||
onClick={() => handleReply('replyAll')}
|
onClick={() => handleReply('replyAll')}
|
||||||
>
|
>
|
||||||
<ReplyAll className="h-5 w-5" />
|
<ReplyAll className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-gray-400 hover:text-gray-900"
|
||||||
onClick={() => handleReply('forward')}
|
onClick={() => handleReply('forward')}
|
||||||
>
|
>
|
||||||
<Forward className="h-5 w-5" />
|
<Forward className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-gray-400 hover:text-gray-900"
|
||||||
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
||||||
>
|
>
|
||||||
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-gray-400 hover:text-gray-900"
|
||||||
onClick={() => {/* Add to folder logic */}}
|
onClick={() => {/* Add to folder logic */}}
|
||||||
>
|
>
|
||||||
<FolderOpen className="h-5 w-5" />
|
<FolderOpen className="h-5 w-5" />
|
||||||
@ -1297,33 +1332,33 @@ export default function MailPage() {
|
|||||||
onClick={() => {/* Mark as spam logic */}}
|
onClick={() => {/* Mark as spam logic */}}
|
||||||
>
|
>
|
||||||
<MessageSquare className="h-5 w-5" />
|
<MessageSquare className="h-5 w-5" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Scrollable content area */}
|
{/* Scrollable content area */}
|
||||||
<ScrollArea className="flex-1 p-6">
|
<ScrollArea className="flex-1 p-6">
|
||||||
<div className="flex items-center gap-4 mb-6">
|
<div className="flex items-center gap-4 mb-6">
|
||||||
<Avatar className="h-10 w-10">
|
<Avatar className="h-10 w-10">
|
||||||
<AvatarFallback>
|
<AvatarFallback>
|
||||||
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
||||||
</AvatarFallback>
|
</AvatarFallback>
|
||||||
</Avatar>
|
</Avatar>
|
||||||
<div>
|
<div>
|
||||||
<p className="font-medium text-gray-900">
|
<p className="font-medium text-gray-900">
|
||||||
{selectedEmail.fromName || selectedEmail.from}
|
{selectedEmail.fromName || selectedEmail.from}
|
||||||
</p>
|
</p>
|
||||||
<p className="text-sm text-gray-500">
|
<p className="text-sm text-gray-500">
|
||||||
to {selectedEmail.to}
|
to {selectedEmail.to}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div className="ml-auto text-sm text-gray-500">
|
<div className="ml-auto text-sm text-gray-500">
|
||||||
{formatDate(selectedEmail.date)}
|
{formatDate(selectedEmail.date)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="prose max-w-none">
|
<div className="prose max-w-none">
|
||||||
{(() => {
|
{(() => {
|
||||||
try {
|
try {
|
||||||
const parsed = parseFullEmail(selectedEmail.body);
|
const parsed = parseFullEmail(selectedEmail.body);
|
||||||
@ -1345,9 +1380,9 @@ export default function MailPage() {
|
|||||||
<span className="text-sm text-gray-600 truncate">
|
<span className="text-sm text-gray-600 truncate">
|
||||||
{attachment.filename}
|
{attachment.filename}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
@ -1360,15 +1395,15 @@ export default function MailPage() {
|
|||||||
</div>
|
</div>
|
||||||
</ScrollArea>
|
</ScrollArea>
|
||||||
</>
|
</>
|
||||||
) : (
|
) : (
|
||||||
<div className="flex flex-col items-center justify-center h-full">
|
<div className="flex flex-col items-center justify-center h-full">
|
||||||
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||||||
<p className="text-gray-500">Select an email to view its contents</p>
|
<p className="text-gray-500">Select an email to view its contents</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
{/* Compose Email Modal */}
|
{/* Compose Email Modal */}
|
||||||
{showCompose && (
|
{showCompose && (
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user