mail page imap connection 7
This commit is contained in:
parent
c5a6c07d01
commit
e9c6377663
@ -17,9 +17,8 @@ import {
|
||||
AlertDialogTitle,
|
||||
} from "@/components/ui/alert-dialog";
|
||||
import { Avatar, AvatarFallback } from "@/components/ui/avatar";
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X } from 'lucide-react';
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Paperclip, Copy, EyeOff } from 'lucide-react';
|
||||
import { MoreVertical, Settings, Plus as PlusIcon, Trash2, Edit, Mail, Inbox, Send, Star, Trash, Plus, ChevronLeft, ChevronRight, Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll, MoreHorizontal, FolderOpen, X, Paperclip } from 'lucide-react';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
@ -42,12 +41,6 @@ interface Email {
|
||||
category: string;
|
||||
}
|
||||
|
||||
interface Mailbox {
|
||||
name: string;
|
||||
path: string;
|
||||
children?: Mailbox[];
|
||||
}
|
||||
|
||||
export default function MailPage() {
|
||||
// Single IMAP account for now
|
||||
const [accounts, setAccounts] = useState<Account[]>([
|
||||
@ -100,9 +93,9 @@ export default function MailPage() {
|
||||
}
|
||||
|
||||
fetchEmails();
|
||||
}, [currentView]); // Refetch when view changes
|
||||
}, [currentView]);
|
||||
|
||||
// Mock folders data - will be replaced with IMAP folders later
|
||||
// Mock folders data
|
||||
const folders = [
|
||||
{ id: 1, name: 'Important' },
|
||||
{ id: 2, name: 'Work' },
|
||||
@ -236,6 +229,11 @@ export default function MailPage() {
|
||||
setShowDeleteConfirm(false);
|
||||
};
|
||||
|
||||
// Get selected email
|
||||
const getSelectedEmail = () => {
|
||||
return emails.find(email => email.id === selectedEmail);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] items-center justify-center bg-gray-100 mt-12">
|
||||
@ -266,187 +264,252 @@ export default function MailPage() {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex h-[calc(100vh-theme(spacing.12))] bg-gray-100 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 */}
|
||||
<div className={`${sidebarOpen ? 'w-72' : 'w-20'} bg-white border-r border-gray-200 flex flex-col transition-all duration-300 ease-in-out
|
||||
<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`}>
|
||||
{/* Logo and toggle */}
|
||||
<div className="p-4 flex items-center justify-between border-b border-gray-200">
|
||||
{sidebarOpen && <h1 className="text-base font-medium text-gray-900">Mail</h1>}
|
||||
{/* Account Selection */}
|
||||
<div className="relative">
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
{sidebarOpen ? (
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-gray-600 hover:text-gray-900"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
|
||||
<span>{accounts.find(acc => acc.id === selectedAccount)?.name || 'All accounts'}</span>
|
||||
</div>
|
||||
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
) : (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hidden md:flex hover:bg-gray-100"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
className="w-full aspect-square"
|
||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
||||
>
|
||||
{sidebarOpen ? <ChevronLeft className="h-4 w-4" /> : <ChevronRight className="h-4 w-4" />}
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${getAccountColor(selectedAccount)}`}></div>
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Accounts Dropdown */}
|
||||
{accountsDropdownOpen && sidebarOpen && (
|
||||
<div className="absolute top-full left-0 w-full bg-white border border-gray-100 shadow-lg rounded-b-lg z-50">
|
||||
{allAccounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-4 py-2 text-sm"
|
||||
onClick={() => {
|
||||
setSelectedAccount(account.id);
|
||||
setAccountsDropdownOpen(false);
|
||||
}}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className={`w-2.5 h-2.5 rounded-full ${account.color}`}></div>
|
||||
<div className="flex flex-col items-start flex-1">
|
||||
<span className="font-medium">{account.name}</span>
|
||||
{account.email && <span className="text-xs text-gray-500">{account.email}</span>}
|
||||
</div>
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Compose button */}
|
||||
<div className="p-4">
|
||||
<Button
|
||||
className="w-full justify-start gap-2 bg-gray-900 text-white hover:bg-gray-800"
|
||||
className={`mx-3 mt-3 mb-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all ${sidebarOpen ? 'py-2 px-4' : 'p-2'}`}
|
||||
onClick={() => setComposeOpen(true)}
|
||||
>
|
||||
<Plus className="h-4 w-4" />
|
||||
{sidebarOpen && "Compose"}
|
||||
</Button>
|
||||
{sidebarOpen ? (
|
||||
<div className="flex items-center">
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
<span className="ml-2">Compose</span>
|
||||
</div>
|
||||
) : (
|
||||
<PlusIcon className="h-4 w-4" />
|
||||
)}
|
||||
</Button>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto">
|
||||
<div className="space-y-1 px-2">
|
||||
<nav className="flex-1 overflow-y-auto py-2">
|
||||
<ul className="space-y-0.5 px-2">
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
|
||||
onClick={() => setCurrentView('inbox')}
|
||||
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" />
|
||||
{sidebarOpen && "Inbox"}
|
||||
<Inbox className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Inbox</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
|
||||
onClick={() => setCurrentView('starred')}
|
||||
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" />
|
||||
{sidebarOpen && "Starred"}
|
||||
<Star className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Starred</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
|
||||
onClick={() => setCurrentView('sent')}
|
||||
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" />
|
||||
{sidebarOpen && "Sent"}
|
||||
<Send className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Sent</span>}
|
||||
</Button>
|
||||
</li>
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
|
||||
onClick={() => setCurrentView('trash')}
|
||||
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" />
|
||||
{sidebarOpen && "Trash"}
|
||||
<Trash className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Trash</span>}
|
||||
</Button>
|
||||
</div>
|
||||
</li>
|
||||
|
||||
{/* Folders */}
|
||||
{folders.length > 0 && (
|
||||
<div className="mt-6">
|
||||
<div className="px-3 mb-2">
|
||||
<h2 className="text-xs font-semibold text-gray-500 uppercase tracking-wider">
|
||||
Folders
|
||||
</h2>
|
||||
</div>
|
||||
<div className="space-y-1 px-2">
|
||||
{folders.map((folder) => (
|
||||
{/* Folders Section */}
|
||||
<li className="mt-4">
|
||||
<Button
|
||||
key={folder.id}
|
||||
variant={currentView === folder.name.toLowerCase() ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start gap-2 py-2 px-3 text-sm font-medium"
|
||||
onClick={() => setCurrentView(folder.name.toLowerCase())}
|
||||
variant="ghost"
|
||||
className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
|
||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||
>
|
||||
<Folder className="h-4 w-4" />
|
||||
{sidebarOpen && folder.name}
|
||||
<div className="flex items-center">
|
||||
<Folder className="h-4 w-4 mr-2" />
|
||||
{sidebarOpen && <span>Folders</span>}
|
||||
</div>
|
||||
{sidebarOpen && (foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />)}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</nav>
|
||||
|
||||
{/* Account info */}
|
||||
<div className="p-4 border-t border-gray-200">
|
||||
<div className="flex items-center gap-3">
|
||||
<Avatar className="h-8 w-8">
|
||||
<AvatarFallback className={accounts[0].color}>
|
||||
{accounts[0].email.charAt(0).toUpperCase()}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
{sidebarOpen && (
|
||||
<div className="flex-1 min-w-0">
|
||||
<p className="text-sm font-medium text-gray-900 truncate">
|
||||
{accounts[0].name}
|
||||
</p>
|
||||
<p className="text-xs text-gray-500 truncate">
|
||||
{accounts[0].email}
|
||||
</p>
|
||||
</div>
|
||||
{/* Folders Dropdown */}
|
||||
{foldersDropdownOpen && sidebarOpen && (
|
||||
<ul className="mt-1 space-y-1">
|
||||
{folders.map(folder => (
|
||||
<li key={folder.id}>
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
setCurrentView(folder.name.toLowerCase());
|
||||
setSelectedEmail(null);
|
||||
}}
|
||||
>
|
||||
{folder.name}
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
<div className="flex-1 flex flex-col min-w-0 overflow-hidden">
|
||||
{/* Header */}
|
||||
<header className="bg-white border-b border-gray-200 px-4 py-3">
|
||||
<div className="flex items-center gap-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={() => setMobileSidebarOpen(true)}
|
||||
>
|
||||
<ChevronRight className="h-4 w-4" />
|
||||
</Button>
|
||||
<div className="flex-1 flex items-center gap-4">
|
||||
<div className="relative flex-1 max-w-2xl">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="search"
|
||||
placeholder="Search emails..."
|
||||
className="pl-10 bg-gray-50 border-gray-200"
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="hidden md:flex"
|
||||
>
|
||||
<Settings className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className="flex-1 overflow-y-auto bg-white">
|
||||
<div className="w-[380px] bg-white/95 backdrop-blur-sm border-r border-gray-100 overflow-y-auto">
|
||||
<div className="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<div className="flex items-center gap-4">
|
||||
{filteredEmails.length > 0 && (
|
||||
<Checkbox
|
||||
checked={selectedEmails.length === filteredEmails.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">
|
||||
{filteredEmails.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-gray-600 hover:text-gray-900"
|
||||
onClick={() => {
|
||||
// Handle move to folder
|
||||
}}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
Move to
|
||||
</Button>
|
||||
<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 */}
|
||||
{filteredEmails.length > 0 ? (
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredEmails.map((email) => (
|
||||
<div
|
||||
<ul>
|
||||
{filteredEmails.map(email => (
|
||||
<li
|
||||
key={email.id}
|
||||
className={`group flex items-center gap-4 px-4 py-3 cursor-pointer hover:bg-gray-50
|
||||
${email.read ? 'bg-white' : 'bg-gray-50'}`}
|
||||
className={`border-b border-gray-100 cursor-pointer ${email.read ? 'bg-white/95' : 'bg-blue-50/95'} hover:bg-gray-50/95`}
|
||||
onClick={() => handleEmailClick(email.id)}
|
||||
>
|
||||
<div className="p-4">
|
||||
<div className="flex justify-between items-start mb-1">
|
||||
<div className="flex items-center gap-3">
|
||||
<Checkbox
|
||||
checked={selectedEmails.includes(email.id)}
|
||||
onClick={(e) => toggleEmailSelection(email.id, e)}
|
||||
className="h-4 w-4"
|
||||
/>
|
||||
<button
|
||||
<div className="flex items-center">
|
||||
<div className={`w-2 h-2 rounded-full ${!email.read ? 'bg-blue-600' : 'bg-transparent'} mr-2`}></div>
|
||||
<span className={`font-medium ${!email.read ? 'font-semibold' : ''} text-gray-900`}>{email.fromName}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-xs text-gray-500">{formatDate(email.date)}</div>
|
||||
</div>
|
||||
<div className="flex justify-between items-center mb-1">
|
||||
<h3 className={`${!email.read ? 'font-semibold' : ''} text-gray-800`}>{email.subject}</h3>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-500"
|
||||
onClick={(e) => toggleStarred(email.id, e)}
|
||||
className={`text-gray-400 hover:text-yellow-400
|
||||
${email.starred ? 'text-yellow-400' : ''}`}
|
||||
>
|
||||
<Star className="h-4 w-4" />
|
||||
</button>
|
||||
<div className={`flex-1 min-w-0 ${!email.read ? 'font-medium' : ''}`}>
|
||||
<div className="flex items-center gap-2">
|
||||
<div className={`h-2 w-2 rounded-full ${getAccountColor(email.accountId)}`} />
|
||||
<span className="truncate">{email.fromName}</span>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 text-sm text-gray-600">
|
||||
<span className="truncate">{email.subject}</span>
|
||||
<span className="whitespace-nowrap">{formatDate(email.date)}</span>
|
||||
</div>
|
||||
<Star className="h-4 w-4" fill={email.starred ? 'currentColor' : 'none'} color={email.starred ? '#F59E0B' : 'currentColor'} />
|
||||
</Button>
|
||||
</div>
|
||||
<p className="text-sm text-gray-600 truncate">
|
||||
{email.body}
|
||||
</p>
|
||||
</div>
|
||||
</li>
|
||||
))}
|
||||
</div>
|
||||
</ul>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-64 text-gray-500">
|
||||
<Mail className="h-12 w-12 mb-4 opacity-30" />
|
||||
@ -454,6 +517,104 @@ export default function MailPage() {
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Email detail view */}
|
||||
<div className="flex-1 overflow-y-auto bg-white">
|
||||
{selectedEmail ? (
|
||||
<div className="h-full flex flex-col">
|
||||
{/* Email actions header */}
|
||||
<div className="p-4 border-b border-gray-100 flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
>
|
||||
<Reply className="h-4 w-4 mr-2" />
|
||||
Reply
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
>
|
||||
<ReplyAll className="h-4 w-4 mr-2" />
|
||||
Reply all
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-700 hover:bg-gray-100 hover:text-gray-900"
|
||||
>
|
||||
<Forward className="h-4 w-4 mr-2" />
|
||||
Forward
|
||||
</Button>
|
||||
</div>
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-gray-500 hover:text-gray-700"
|
||||
onClick={() => setShowEmailActions(!showEmailActions)}
|
||||
>
|
||||
<MoreHorizontal className="h-4 w-4" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email content */}
|
||||
<div className="flex-1 p-6">
|
||||
<div className="max-w-3xl mx-auto">
|
||||
{getSelectedEmail() && (
|
||||
<>
|
||||
<div className="mb-6">
|
||||
<div className="flex justify-between items-center mb-4">
|
||||
<h1 className="text-xl font-bold">{getSelectedEmail()?.subject}</h1>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-gray-400 hover:text-yellow-400"
|
||||
onClick={(e) => getSelectedEmail() && toggleStarred(getSelectedEmail()!.id, e)}
|
||||
>
|
||||
<Star className="h-5 w-5" fill={getSelectedEmail()?.starred ? 'currentColor' : 'none'} />
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center">
|
||||
<Avatar>
|
||||
<AvatarFallback className={`${getAccountColor(getSelectedEmail()!.accountId)}`}>
|
||||
{getSelectedEmail()?.fromName.charAt(0)}
|
||||
</AvatarFallback>
|
||||
</Avatar>
|
||||
<div className="ml-3">
|
||||
<div className="font-medium">{getSelectedEmail()?.fromName}</div>
|
||||
<div className="text-sm text-gray-500 flex items-center">
|
||||
<span>{getSelectedEmail()?.from}</span>
|
||||
<span className="mx-2">•</span>
|
||||
<span>{new Date(getSelectedEmail()!.date).toLocaleString([], { dateStyle: 'medium', timeStyle: 'short' })}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="border-t border-gray-200 pt-6 prose max-w-none">
|
||||
<p>{getSelectedEmail()?.body}</p>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<div className="h-full flex items-center justify-center">
|
||||
<div className="text-center">
|
||||
<Mail className="h-16 w-16 mx-auto mb-4 text-gray-300" />
|
||||
<p className="text-gray-500">No email selected</p>
|
||||
<p className="text-sm text-gray-400">Choose an email from the list to read its contents</p>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Compose email modal */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user