mail page ui correction maj compose 5
This commit is contained in:
parent
53934088bf
commit
bc4e119d7e
@ -431,10 +431,10 @@ export default function MailPage() {
|
|||||||
const [showBcc, setShowBcc] = useState(false);
|
const [showBcc, setShowBcc] = useState(false);
|
||||||
const [emails, setEmails] = useState<Email[]>([]);
|
const [emails, setEmails] = useState<Email[]>([]);
|
||||||
const [error, setError] = useState<string | null>(null);
|
const [error, setError] = useState<string | null>(null);
|
||||||
const [composeSubject, setComposeSubject] = useState('');
|
|
||||||
const [composeTo, setComposeTo] = useState('');
|
const [composeTo, setComposeTo] = useState('');
|
||||||
const [composeCc, setComposeCc] = useState('');
|
const [composeCc, setComposeCc] = useState('');
|
||||||
const [composeBcc, setComposeBcc] = useState('');
|
const [composeBcc, setComposeBcc] = useState('');
|
||||||
|
const [composeSubject, setComposeSubject] = useState('');
|
||||||
const [composeBody, setComposeBody] = useState('');
|
const [composeBody, setComposeBody] = useState('');
|
||||||
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
|
const [selectedEmail, setSelectedEmail] = useState<Email | null>(null);
|
||||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||||
@ -711,355 +711,368 @@ export default function MailPage() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
<>
|
||||||
{/* Sidebar */}
|
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||||
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
|
{/* Sidebar */}
|
||||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white/95 backdrop-blur-sm border-0 shadow-lg flex flex-col transition-all duration-300 ease-in-out
|
||||||
{/* Courrier Title */}
|
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||||
<div className="p-3 border-b border-gray-100">
|
{/* Courrier Title */}
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Mail className="h-6 w-6 text-gray-600" />
|
|
||||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Compose button */}
|
|
||||||
<div className="p-3 border-b border-gray-100">
|
|
||||||
<Button
|
|
||||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
|
|
||||||
onClick={() => setComposeOpen(true)}
|
|
||||||
>
|
|
||||||
<div className="flex items-center">
|
|
||||||
<PlusIcon className="h-4 w-4" />
|
|
||||||
<span className="ml-2">Compose</span>
|
|
||||||
</div>
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Accounts Section */}
|
|
||||||
<div className="flex flex-col min-h-0 flex-1">
|
|
||||||
<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">
|
||||||
|
<Mail className="h-6 w-6 text-gray-600" />
|
||||||
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Compose button */}
|
||||||
|
<div className="p-2 border-b border-gray-100">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
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 justify-between mb-2 text-sm font-medium text-gray-500"
|
onClick={() => {
|
||||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
console.log('Compose button clicked');
|
||||||
|
setShowCompose(true);
|
||||||
|
// Reset form fields
|
||||||
|
setComposeTo('');
|
||||||
|
setComposeCc('');
|
||||||
|
setComposeBcc('');
|
||||||
|
setComposeSubject('');
|
||||||
|
setComposeBody('');
|
||||||
|
setShowCc(false);
|
||||||
|
setShowBcc(false);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<span>Accounts</span>
|
<div className="flex items-center gap-2">
|
||||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
<PlusIcon className="h-3.5 w-3.5" />
|
||||||
|
<span>Compose</span>
|
||||||
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
</div>
|
||||||
{foldersDropdownOpen && (
|
|
||||||
<div className="space-y-1 pl-2">
|
{/* Accounts Section */}
|
||||||
{accounts.map(account => (
|
<div className="flex flex-col min-h-0 flex-1">
|
||||||
<div key={account.id} className="relative group">
|
<div className="p-3 border-b border-gray-100">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="w-full justify-between px-2 py-1.5 text-sm group"
|
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
||||||
onClick={() => setSelectedAccount(account)}
|
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||||
>
|
>
|
||||||
<div className="flex flex-col items-start">
|
<span>Accounts</span>
|
||||||
<div className="flex items-center gap-2">
|
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
</Button>
|
||||||
<span className="font-medium">{account.name}</span>
|
|
||||||
</div>
|
{foldersDropdownOpen && (
|
||||||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
<div className="space-y-1 pl-2">
|
||||||
</div>
|
{accounts.map(account => (
|
||||||
|
<div key={account.id} className="relative group">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
className="w-full justify-between px-2 py-1.5 text-sm group"
|
||||||
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
onClick={() => setSelectedAccount(account)}
|
||||||
onClick={(e) => {
|
|
||||||
e.stopPropagation();
|
|
||||||
setShowAccountActions(account.id);
|
|
||||||
}}
|
|
||||||
>
|
>
|
||||||
<MoreVertical className="h-4 w-4" />
|
<div className="flex flex-col items-start">
|
||||||
</Button>
|
<div className="flex items-center gap-2">
|
||||||
</Button>
|
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||||
|
<span className="font-medium">{account.name}</span>
|
||||||
{/* Account Actions Dropdown */}
|
</div>
|
||||||
{showAccountActions === account.id && (
|
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||||||
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
|
|
||||||
onClick={() => handleAccountAction(account.id, 'edit')}
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4 mr-2" />
|
|
||||||
Edit account
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
|
||||||
onClick={() => handleAccountAction(account.id, 'delete')}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 mr-2" />
|
|
||||||
Remove account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
|
|
||||||
{/* Add Account Button */}
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
|
|
||||||
onClick={() => {/* Handle add account */}}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation */}
|
|
||||||
<nav className="p-3">
|
|
||||||
<ul className="space-y-0.5 px-2">
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
|
||||||
className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
|
||||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
|
||||||
>
|
|
||||||
<Inbox className="h-4 w-4 mr-2" />
|
|
||||||
<span>Inbox</span>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
|
||||||
className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
|
||||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
|
||||||
>
|
|
||||||
<Star className="h-4 w-4 mr-2" />
|
|
||||||
<span>Starred</span>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
|
||||||
className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
|
||||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
|
||||||
>
|
|
||||||
<Send className="h-4 w-4 mr-2" />
|
|
||||||
<span>Sent</span>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<Button
|
|
||||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
|
||||||
className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
|
||||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
|
||||||
>
|
|
||||||
<Trash className="h-4 w-4 mr-2" />
|
|
||||||
<span>Trash</span>
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Main content area */}
|
|
||||||
<div className="flex-1 flex overflow-hidden">
|
|
||||||
{/* Email list */}
|
|
||||||
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
|
||||||
{/* Email list header */}
|
|
||||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
|
||||||
<div className="flex items-center gap-4">
|
|
||||||
{emails.length > 0 && (
|
|
||||||
<Checkbox
|
|
||||||
checked={selectedEmails.length === emails.length}
|
|
||||||
onCheckedChange={toggleSelectAll}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
|
||||||
{currentView === 'starred' ? 'Starred' : currentView}
|
|
||||||
</h2>
|
|
||||||
</div>
|
|
||||||
<div className="text-sm text-gray-500">
|
|
||||||
{emails.length} emails
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Bulk Actions Bar */}
|
|
||||||
{showBulkActions && selectedEmails.length > 0 && (
|
|
||||||
<div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
|
|
||||||
<span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
|
|
||||||
<div className="flex items-center gap-2">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
className="text-red-600 hover:text-red-700"
|
|
||||||
onClick={handleBulkDelete}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 mr-2" />
|
|
||||||
Delete
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
|
|
||||||
{/* Email List */}
|
|
||||||
{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>
|
|
||||||
) : (
|
|
||||||
<ul className="divide-y divide-gray-100">
|
|
||||||
{emails.map((email) => (
|
|
||||||
<li
|
|
||||||
key={email.id}
|
|
||||||
className={`flex items-center p-4 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-1 min-w-0">
|
|
||||||
<div className="flex items-center justify-between">
|
|
||||||
<div className="flex items-center space-x-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()));
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
|
||||||
{email.fromName || email.from}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="sm"
|
size="icon"
|
||||||
className="text-gray-400 hover:text-yellow-400"
|
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
onClick={(e) => toggleStarred(email.id, e)}
|
onClick={(e) => {
|
||||||
|
e.stopPropagation();
|
||||||
|
setShowAccountActions(account.id);
|
||||||
|
}}
|
||||||
>
|
>
|
||||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
<MoreVertical className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</Button>
|
||||||
|
|
||||||
|
{/* Account Actions Dropdown */}
|
||||||
|
{showAccountActions === account.id && (
|
||||||
|
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start px-4 py-2 text-sm text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => handleAccountAction(account.id, 'edit')}
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4 mr-2" />
|
||||||
|
Edit account
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start px-4 py-2 text-sm text-red-600 hover:text-red-700"
|
||||||
|
onClick={() => handleAccountAction(account.id, 'delete')}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
|
Remove account
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
))}
|
||||||
|
|
||||||
|
{/* Add Account Button */}
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600 hover:text-blue-700 hover:bg-blue-50"
|
||||||
|
onClick={() => {/* Handle add account */}}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Account
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Navigation */}
|
||||||
|
<nav className="p-3">
|
||||||
|
<ul className="space-y-0.5 px-2">
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||||
|
className={`w-full justify-start py-2 ${currentView === 'inbox' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||||
|
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||||
|
>
|
||||||
|
<Inbox className="h-4 w-4 mr-2" />
|
||||||
|
<span>Inbox</span>
|
||||||
|
</Button>
|
||||||
</li>
|
</li>
|
||||||
))}
|
<li>
|
||||||
</ul>
|
<Button
|
||||||
)}
|
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||||
|
className={`w-full justify-start py-2 ${currentView === 'starred' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||||
|
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||||
|
>
|
||||||
|
<Star className="h-4 w-4 mr-2" />
|
||||||
|
<span>Starred</span>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||||
|
className={`w-full justify-start py-2 ${currentView === 'sent' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||||
|
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||||
|
>
|
||||||
|
<Send className="h-4 w-4 mr-2" />
|
||||||
|
<span>Sent</span>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
<li>
|
||||||
|
<Button
|
||||||
|
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||||
|
className={`w-full justify-start py-2 ${currentView === 'trash' ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||||
|
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||||
|
>
|
||||||
|
<Trash className="h-4 w-4 mr-2" />
|
||||||
|
<span>Trash</span>
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Email preview panel */}
|
{/* Main content area */}
|
||||||
<div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
|
<div className="flex-1 flex overflow-hidden">
|
||||||
{selectedEmail ? (
|
{/* Email list */}
|
||||||
<div className="p-6">
|
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
||||||
<div className="flex items-center justify-between mb-6">
|
{/* Email list header */}
|
||||||
<h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
|
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||||
|
<div className="flex items-center gap-4">
|
||||||
|
{emails.length > 0 && (
|
||||||
|
<Checkbox
|
||||||
|
checked={selectedEmails.length === emails.length}
|
||||||
|
onCheckedChange={toggleSelectAll}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
|
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||||
|
{currentView === 'starred' ? 'Starred' : currentView}
|
||||||
|
</h2>
|
||||||
|
</div>
|
||||||
|
<div className="text-sm text-gray-500">
|
||||||
|
{emails.length} emails
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Bulk Actions Bar */}
|
||||||
|
{showBulkActions && selectedEmails.length > 0 && (
|
||||||
|
<div className="p-2 bg-gray-50 border-b border-gray-100 flex items-center justify-between">
|
||||||
|
<span className="text-sm text-gray-600">{selectedEmails.length} selected</span>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="sm"
|
||||||
className="text-gray-400 hover:text-gray-900"
|
className="text-red-600 hover:text-red-700"
|
||||||
onClick={() => handleReply('reply')}
|
onClick={handleBulkDelete}
|
||||||
>
|
>
|
||||||
<Reply className="h-5 w-5" />
|
<Trash2 className="h-4 w-4 mr-2" />
|
||||||
</Button>
|
Delete
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-gray-400 hover:text-gray-900"
|
|
||||||
onClick={() => handleReply('replyAll')}
|
|
||||||
>
|
|
||||||
<ReplyAll className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-gray-400 hover:text-gray-900"
|
|
||||||
onClick={() => handleReply('forward')}
|
|
||||||
>
|
|
||||||
<Forward className="h-5 w-5" />
|
|
||||||
</Button>
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
size="icon"
|
|
||||||
className="text-gray-400 hover:text-gray-900"
|
|
||||||
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
|
||||||
>
|
|
||||||
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
<div className="flex items-center gap-4 mb-6">
|
{/* Email List */}
|
||||||
<Avatar className="h-10 w-10">
|
{loading ? (
|
||||||
<AvatarFallback>
|
<div className="flex items-center justify-center h-64">
|
||||||
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
<div className="animate-spin rounded-full h-8 w-8 border-t-2 border-b-2 border-blue-500"></div>
|
||||||
</AvatarFallback>
|
|
||||||
</Avatar>
|
|
||||||
<div>
|
|
||||||
<p className="font-medium text-gray-900">
|
|
||||||
{selectedEmail.fromName || selectedEmail.from}
|
|
||||||
</p>
|
|
||||||
<p className="text-sm text-gray-500">
|
|
||||||
to {selectedEmail.to}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="ml-auto text-sm text-gray-500">
|
|
||||||
{formatDate(selectedEmail.date)}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
) : (
|
||||||
<div className="prose max-w-none">
|
<ul className="divide-y divide-gray-100">
|
||||||
{(() => {
|
{emails.map((email) => (
|
||||||
try {
|
<li
|
||||||
const parsed = parseFullEmail(selectedEmail.body);
|
key={email.id}
|
||||||
return (
|
className={`flex items-center p-4 hover:bg-gray-50 cursor-pointer ${
|
||||||
<div>
|
selectedEmail?.id === email.id ? 'bg-blue-50' : ''
|
||||||
{/* Display HTML content if available, otherwise fallback to text */}
|
} ${!email.read ? 'bg-blue-50/20' : ''}`}
|
||||||
<div dangerouslySetInnerHTML={{
|
onClick={() => handleEmailSelect(email.id)}
|
||||||
__html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body)
|
>
|
||||||
}} />
|
<div className="flex-1 min-w-0">
|
||||||
|
<div className="flex items-center justify-between">
|
||||||
{/* Display attachments if present */}
|
<div className="flex items-center space-x-3">
|
||||||
{parsed.attachments && parsed.attachments.length > 0 && (
|
<Checkbox
|
||||||
<div className="mt-6 border-t border-gray-200 pt-6">
|
checked={selectedEmails.includes(email.id.toString())}
|
||||||
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
|
onClick={(e) => e.stopPropagation()}
|
||||||
<div className="grid grid-cols-2 gap-4">
|
onCheckedChange={(checked) => {
|
||||||
{parsed.attachments.map((attachment, index) => (
|
if (checked) {
|
||||||
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
|
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||||
<Paperclip className="h-4 w-4 text-gray-400" />
|
} else {
|
||||||
<span className="text-sm text-gray-600 truncate">
|
setSelectedEmails(selectedEmails.filter(id => id !== email.id.toString()));
|
||||||
{attachment.filename}
|
}
|
||||||
</span>
|
}}
|
||||||
</div>
|
/>
|
||||||
))}
|
<div>
|
||||||
</div>
|
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
||||||
|
{email.fromName || email.from}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
||||||
</div>
|
</div>
|
||||||
)}
|
</div>
|
||||||
|
<div className="flex items-center space-x-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>
|
||||||
);
|
</div>
|
||||||
} catch (e) {
|
</li>
|
||||||
console.error('Error parsing email:', e);
|
))}
|
||||||
return selectedEmail.body;
|
</ul>
|
||||||
}
|
)}
|
||||||
})()}
|
</div>
|
||||||
|
|
||||||
|
{/* Email preview panel */}
|
||||||
|
<div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
|
||||||
|
{selectedEmail ? (
|
||||||
|
<div className="p-6">
|
||||||
|
<div className="flex items-center justify-between mb-6">
|
||||||
|
<h2 className="text-xl font-semibold text-gray-900">{selectedEmail.subject}</h2>
|
||||||
|
<div className="flex items-center gap-2">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('reply')}
|
||||||
|
>
|
||||||
|
<Reply className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('replyAll')}
|
||||||
|
>
|
||||||
|
<ReplyAll className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={() => handleReply('forward')}
|
||||||
|
>
|
||||||
|
<Forward className="h-5 w-5" />
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
size="icon"
|
||||||
|
className="text-gray-400 hover:text-gray-900"
|
||||||
|
onClick={(e) => toggleStarred(selectedEmail.id, e)}
|
||||||
|
>
|
||||||
|
<Star className={`h-5 w-5 ${selectedEmail.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex items-center gap-4 mb-6">
|
||||||
|
<Avatar className="h-10 w-10">
|
||||||
|
<AvatarFallback>
|
||||||
|
{selectedEmail.fromName?.charAt(0) || selectedEmail.from.charAt(0)}
|
||||||
|
</AvatarFallback>
|
||||||
|
</Avatar>
|
||||||
|
<div>
|
||||||
|
<p className="font-medium text-gray-900">
|
||||||
|
{selectedEmail.fromName || selectedEmail.from}
|
||||||
|
</p>
|
||||||
|
<p className="text-sm text-gray-500">
|
||||||
|
to {selectedEmail.to}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div className="ml-auto text-sm text-gray-500">
|
||||||
|
{formatDate(selectedEmail.date)}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="prose max-w-none">
|
||||||
|
{(() => {
|
||||||
|
try {
|
||||||
|
const parsed = parseFullEmail(selectedEmail.body);
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
{/* Display HTML content if available, otherwise fallback to text */}
|
||||||
|
<div dangerouslySetInnerHTML={{
|
||||||
|
__html: parsed.html || parsed.text || decodeMimeContent(selectedEmail.body)
|
||||||
|
}} />
|
||||||
|
|
||||||
|
{/* Display attachments if present */}
|
||||||
|
{parsed.attachments && parsed.attachments.length > 0 && (
|
||||||
|
<div className="mt-6 border-t border-gray-200 pt-6">
|
||||||
|
<h3 className="text-sm font-semibold text-gray-900 mb-4">Attachments</h3>
|
||||||
|
<div className="grid grid-cols-2 gap-4">
|
||||||
|
{parsed.attachments.map((attachment, index) => (
|
||||||
|
<div key={index} className="flex items-center space-x-2 p-2 border rounded">
|
||||||
|
<Paperclip className="h-4 w-4 text-gray-400" />
|
||||||
|
<span className="text-sm text-gray-600 truncate">
|
||||||
|
{attachment.filename}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
} catch (e) {
|
||||||
|
console.error('Error parsing email:', e);
|
||||||
|
return selectedEmail.body;
|
||||||
|
}
|
||||||
|
})()}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
) : (
|
||||||
) : (
|
<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>
|
||||||
|
|
||||||
@ -1068,16 +1081,13 @@ export default function MailPage() {
|
|||||||
<div className="fixed inset-0 bg-black/50 z-50">
|
<div className="fixed inset-0 bg-black/50 z-50">
|
||||||
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
|
<div className="absolute inset-4 sm:inset-6 md:inset-8 bg-white rounded-lg shadow-xl flex flex-col">
|
||||||
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
<div className="flex items-center justify-between p-4 border-b border-gray-200">
|
||||||
<h3 className="text-lg font-semibold text-gray-900">
|
<h3 className="text-lg font-semibold text-gray-900">New Message</h3>
|
||||||
{composeSubject.startsWith('Re:') ? 'Reply' :
|
|
||||||
composeSubject.startsWith('Fwd:') ? 'Forward' :
|
|
||||||
'New Message'}
|
|
||||||
</h3>
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
size="icon"
|
size="icon"
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
setShowCompose(false);
|
setShowCompose(false);
|
||||||
|
// Clear form data
|
||||||
setComposeTo('');
|
setComposeTo('');
|
||||||
setComposeCc('');
|
setComposeCc('');
|
||||||
setComposeBcc('');
|
setComposeBcc('');
|
||||||
@ -1176,7 +1186,10 @@ export default function MailPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center gap-2">
|
<div className="flex items-center gap-2">
|
||||||
<Button variant="outline" onClick={() => setShowCompose(false)}>
|
<Button
|
||||||
|
variant="outline"
|
||||||
|
onClick={() => setShowCompose(false)}
|
||||||
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</Button>
|
</Button>
|
||||||
<Button
|
<Button
|
||||||
@ -1231,6 +1244,6 @@ export default function MailPage() {
|
|||||||
</AlertDialogFooter>
|
</AlertDialogFooter>
|
||||||
</AlertDialogContent>
|
</AlertDialogContent>
|
||||||
</AlertDialog>
|
</AlertDialog>
|
||||||
</div>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
Loading…
Reference in New Issue
Block a user