mail page ui correction maj compose 11
This commit is contained in:
parent
2dc237e733
commit
c143cc6028
@ -1,6 +1,6 @@
|
||||
'use client';
|
||||
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useEffect, useState, useMemo } from 'react';
|
||||
import { useRouter } from 'next/navigation';
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
|
||||
import { Input } from '@/components/ui/input';
|
||||
@ -31,6 +31,7 @@ interface Account {
|
||||
name: string;
|
||||
email: string;
|
||||
color: string;
|
||||
folders?: string[];
|
||||
}
|
||||
|
||||
interface Email {
|
||||
@ -426,8 +427,7 @@ export default function MailPage() {
|
||||
const router = useRouter();
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [accounts, setAccounts] = useState<Account[]>([
|
||||
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' },
|
||||
{ id: 2, name: 'Work', email: 'work@governance-labs.org', color: 'bg-green-500' }
|
||||
{ id: 1, name: 'Mail', email: 'alma@governance-labs.org', color: 'bg-blue-500' }
|
||||
]);
|
||||
const [selectedAccount, setSelectedAccount] = useState<Account | null>(null);
|
||||
const [currentView, setCurrentView] = useState('inbox');
|
||||
@ -459,6 +459,7 @@ export default function MailPage() {
|
||||
const [showCc, setShowCc] = useState(false);
|
||||
const [contentLoading, setContentLoading] = useState(false);
|
||||
const [attachments, setAttachments] = useState<Attachment[]>([]);
|
||||
const [folders, setFolders] = useState<string[]>([]);
|
||||
|
||||
// Move getSelectedEmail inside the component
|
||||
const getSelectedEmail = () => {
|
||||
@ -495,18 +496,27 @@ export default function MailPage() {
|
||||
}, [router]);
|
||||
|
||||
// Fetch emails from IMAP API
|
||||
const loadEmails = async () => {
|
||||
const loadEmails = async (view?: string, accountId?: number, folder?: string) => {
|
||||
try {
|
||||
console.log('Starting to load emails...');
|
||||
console.log('Loading emails...', { view, accountId, folder });
|
||||
setLoading(true);
|
||||
setError(null);
|
||||
|
||||
const response = await fetch('/api/mail');
|
||||
console.log('API response status:', response.status);
|
||||
let url = '/api/mail';
|
||||
const params = new URLSearchParams();
|
||||
|
||||
if (view) params.append('view', view);
|
||||
if (accountId) params.append('accountId', accountId.toString());
|
||||
if (folder) params.append('folder', folder);
|
||||
|
||||
if (params.toString()) {
|
||||
url += `?${params.toString()}`;
|
||||
}
|
||||
|
||||
const response = await fetch(url);
|
||||
|
||||
if (!response.ok) {
|
||||
const errorData = await response.json();
|
||||
console.error('API error:', errorData);
|
||||
if (errorData.error === 'No stored credentials found') {
|
||||
router.push('/mail/login');
|
||||
return;
|
||||
@ -515,11 +525,17 @@ export default function MailPage() {
|
||||
}
|
||||
|
||||
const data = await response.json();
|
||||
console.log('Received data:', data);
|
||||
|
||||
if (!data.emails || !Array.isArray(data.emails)) {
|
||||
console.error('Invalid response format:', data);
|
||||
throw new Error('Invalid response format: emails array not found');
|
||||
// Update accounts and folders if provided in the response
|
||||
if (data.accounts) {
|
||||
setAccounts([
|
||||
{ id: 0, name: 'All', email: '', color: 'bg-gray-500' },
|
||||
...data.accounts
|
||||
]);
|
||||
}
|
||||
|
||||
if (data.folders) {
|
||||
setFolders(data.folders);
|
||||
}
|
||||
|
||||
// Process the emails array from data.emails
|
||||
@ -528,12 +544,10 @@ export default function MailPage() {
|
||||
date: new Date(email.date),
|
||||
read: email.read || false,
|
||||
starred: email.starred || false,
|
||||
category: email.category || 'inbox',
|
||||
body: decodeMimeContent(email.body)
|
||||
category: email.category || 'inbox'
|
||||
}));
|
||||
|
||||
setEmails(processedEmails);
|
||||
console.log('Emails loaded successfully:', processedEmails.length);
|
||||
} catch (err) {
|
||||
console.error('Error loading emails:', err);
|
||||
setError(err instanceof Error ? err.message : 'Failed to load emails');
|
||||
@ -542,6 +556,36 @@ export default function MailPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Update useEffect to load emails when view changes
|
||||
useEffect(() => {
|
||||
loadEmails(currentView, selectedAccount?.id);
|
||||
}, [currentView, selectedAccount]);
|
||||
|
||||
// Filter emails based on current view and selected account
|
||||
const filteredEmails = useMemo(() => {
|
||||
return emails.filter(email => {
|
||||
// First filter by account if one is selected
|
||||
if (selectedAccount && selectedAccount.id !== 0) {
|
||||
if (email.accountId !== selectedAccount.id) return false;
|
||||
}
|
||||
|
||||
// Then filter by current view
|
||||
switch (currentView) {
|
||||
case 'inbox':
|
||||
return !email.deleted && email.category === 'inbox';
|
||||
case 'starred':
|
||||
return !email.deleted && email.starred;
|
||||
case 'sent':
|
||||
return !email.deleted && email.category === 'sent';
|
||||
case 'trash':
|
||||
return email.deleted;
|
||||
default:
|
||||
// Handle folder views
|
||||
return !email.deleted && email.category === currentView;
|
||||
}
|
||||
});
|
||||
}, [emails, currentView, selectedAccount]);
|
||||
|
||||
// Mock folders data
|
||||
const folders = [
|
||||
{ id: 1, name: 'Important' },
|
||||
@ -618,11 +662,11 @@ export default function MailPage() {
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ emailId })
|
||||
});
|
||||
|
||||
const updatedEmails = emails.map(email =>
|
||||
email.id === emailId ? { ...email, starred: !email.starred } : email
|
||||
);
|
||||
setEmails(updatedEmails);
|
||||
|
||||
const updatedEmails = emails.map(email =>
|
||||
email.id === emailId ? { ...email, starred: !email.starred } : email
|
||||
);
|
||||
setEmails(updatedEmails);
|
||||
} catch (error) {
|
||||
console.error('Error toggling star:', error);
|
||||
}
|
||||
@ -882,21 +926,21 @@ export default function MailPage() {
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||
{/* Sidebar */}
|
||||
<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
|
||||
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||
{/* Courrier Title */}
|
||||
<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 className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-50 text-gray-900 overflow-hidden mt-12">
|
||||
{/* Sidebar */}
|
||||
<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
|
||||
${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||
{/* Courrier Title */}
|
||||
<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 */}
|
||||
{/* Compose button */}
|
||||
<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"
|
||||
onClick={() => {
|
||||
console.log('Compose button clicked');
|
||||
@ -914,197 +958,187 @@ export default function MailPage() {
|
||||
<div className="flex items-center gap-2">
|
||||
<PlusIcon className="h-3.5 w-3.5" />
|
||||
<span>Compose</span>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts Section */}
|
||||
<div className="flex flex-col min-h-0 flex-1">
|
||||
<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={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<span>Accounts</span>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{foldersDropdownOpen && (
|
||||
<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 flex-col items-start">
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
</div>
|
||||
<span className="text-xs text-gray-500 ml-4">{account.email}</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
setShowAccountActions(account.id);
|
||||
}}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</Button>
|
||||
<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>
|
||||
|
||||
{accountsDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{accounts.map(account => (
|
||||
<Button
|
||||
key={account.id}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(account)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.id !== 0 && (
|
||||
<span className="text-xs text-gray-500 truncate">{account.email}</span>
|
||||
)}
|
||||
</div>
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* 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>
|
||||
))}
|
||||
|
||||
{/* 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">
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
{/* Standard folders */}
|
||||
<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'}`}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('inbox'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
<span>Inbox</span>
|
||||
<span>Inbox</span>
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length > 0 && (
|
||||
<span className="ml-auto bg-blue-600 text-white text-xs px-2 py-0.5 rounded-full">
|
||||
{emails.filter(e => !e.read && e.category === 'inbox').length}
|
||||
</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'}`}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('starred'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
<span>Starred</span>
|
||||
<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'}`}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('sent'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
<span>Sent</span>
|
||||
<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'}`}
|
||||
className="w-full justify-start"
|
||||
onClick={() => {setCurrentView('trash'); setSelectedEmail(null);}}
|
||||
>
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
<span>Trash</span>
|
||||
<span>Trash</span>
|
||||
</Button>
|
||||
</li>
|
||||
|
||||
{/* Account-specific folders */}
|
||||
{selectedAccount && selectedAccount.id !== 0 && (
|
||||
<>
|
||||
<li className="mt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between"
|
||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center">
|
||||
<Folder className="h-4 w-4 mr-2" />
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
</li>
|
||||
{foldersDropdownOpen && folders.map((folder, index) => (
|
||||
<li key={index}>
|
||||
<Button
|
||||
variant={currentView === folder ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start pl-8"
|
||||
onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
|
||||
>
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
</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">
|
||||
<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">
|
||||
<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">
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
)}
|
||||
|
||||
{/* 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 ? (
|
||||
{/* 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>
|
||||
) : (
|
||||
<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}
|
||||
<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">
|
||||
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()}
|
||||
onClick={(e) => e.stopPropagation()}
|
||||
onCheckedChange={(checked) => {
|
||||
if (checked) {
|
||||
setSelectedEmails([...selectedEmails, email.id.toString()]);
|
||||
@ -1115,11 +1149,11 @@ export default function MailPage() {
|
||||
/>
|
||||
<div>
|
||||
<p className={`text-sm ${!email.read ? 'font-semibold' : ''}`}>
|
||||
{email.fromName || email.from}
|
||||
</p>
|
||||
{email.fromName || email.from}
|
||||
</p>
|
||||
<p className="text-sm text-gray-600 truncate">{email.subject}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
||||
<Button
|
||||
@ -1131,76 +1165,76 @@ export default function MailPage() {
|
||||
<Star className={`h-4 w-4 ${email.starred ? 'fill-yellow-400 text-yellow-400' : ''}`} />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</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"
|
||||
{/* 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>
|
||||
</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 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">
|
||||
<div className="prose max-w-none">
|
||||
{(() => {
|
||||
try {
|
||||
const parsed = parseFullEmail(selectedEmail.body);
|
||||
@ -1234,17 +1268,17 @@ export default function MailPage() {
|
||||
return selectedEmail.body;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||||
<p className="text-gray-500">Select an email to view its contents</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||||
<p className="text-gray-500">Select an email to view its contents</p>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compose Email Modal - Updated Design */}
|
||||
{showCompose && (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user