mail page ui correction maj compose 17
This commit is contained in:
parent
063a7c9637
commit
11e756fc9d
@ -911,9 +911,9 @@ 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
|
||||
${foldersOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||
{/* Sidebar - make it narrower */}
|
||||
<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`}>
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
@ -1027,13 +1027,13 @@ export default function MailPage() {
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
{/* Standard folders */}
|
||||
<nav className="p-3">
|
||||
<ul className="space-y-0.5 px-2">
|
||||
{/* Standard navigation items */}
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'inbox' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
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" />
|
||||
@ -1048,7 +1048,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'starred' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
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" />
|
||||
@ -1058,7 +1058,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'sent' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
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" />
|
||||
@ -1068,7 +1068,7 @@ export default function MailPage() {
|
||||
<li>
|
||||
<Button
|
||||
variant={currentView === 'trash' ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start"
|
||||
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" />
|
||||
@ -1076,89 +1076,79 @@ export default function MailPage() {
|
||||
</Button>
|
||||
</li>
|
||||
|
||||
{/* Account-specific folders */}
|
||||
{selectedAccount && selectedAccount.id !== 0 && folders.length > 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}>
|
||||
{/* Folders section - moved below Trash */}
|
||||
<li className="mt-4">
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-between text-sm font-medium text-gray-500"
|
||||
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>
|
||||
|
||||
{foldersDropdownOpen && (
|
||||
<div className="mt-1 space-y-1 pl-6">
|
||||
{folders.map((folder) => (
|
||||
<Button
|
||||
variant={currentView === folder ? 'secondary' : 'ghost'}
|
||||
className="w-full justify-start pl-8"
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className={`w-full justify-start py-1.5 text-sm ${currentView === folder ? 'bg-gray-100 text-gray-900' : 'text-gray-600 hover:text-gray-900'}`}
|
||||
onClick={() => {setCurrentView(folder); setSelectedEmail(null);}}
|
||||
>
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</>
|
||||
)}
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</div>
|
||||
|
||||
{/* Main content */}
|
||||
{/* Main content area */}
|
||||
<div className="flex-1 flex overflow-hidden">
|
||||
{/* Email list */}
|
||||
<div className="w-[400px] bg-white/95 backdrop-blur-sm border-r border-gray-100 flex flex-col">
|
||||
<div className="flex-none p-4 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2 mb-4">
|
||||
<div className="relative flex-1">
|
||||
<Search className="absolute left-3 top-1/2 transform -translate-y-1/2 h-4 w-4 text-gray-400" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search emails..."
|
||||
value={searchQuery}
|
||||
onChange={(e) => setSearchQuery(e.target.value)}
|
||||
className="pl-10 w-full bg-gray-50"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/* Email list panel */}
|
||||
<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">
|
||||
{filteredEmails.length > 0 && (
|
||||
<input
|
||||
type="checkbox"
|
||||
checked={selectedEmails.length === filteredEmails.length}
|
||||
onChange={toggleSelectAll}
|
||||
className="h-4 w-4 text-blue-600 rounded border-gray-300 focus:ring-blue-500"
|
||||
<div className="flex items-center gap-2">
|
||||
{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">
|
||||
{filteredEmails.length} emails
|
||||
<span className="text-sm text-gray-500">
|
||||
{filteredEmails.length} emails
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<ScrollArea className="flex-1">
|
||||
<div className="divide-y divide-gray-100">
|
||||
{filteredEmails.map((email) => (
|
||||
<div
|
||||
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">
|
||||
|
||||
{/* Email list with proper spacing and layout */}
|
||||
<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>
|
||||
) : (
|
||||
<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)}
|
||||
>
|
||||
{/* Email header with checkbox and date */}
|
||||
<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()}
|
||||
@ -1170,15 +1160,14 @@ export default function MailPage() {
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<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>
|
||||
<span className="text-sm font-medium text-gray-900">
|
||||
{email.fromName || email.from}
|
||||
</span>
|
||||
</div>
|
||||
<div className="flex items-center space-x-2">
|
||||
<span className="text-xs text-gray-500">{formatDate(email.date)}</span>
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-xs text-gray-500">
|
||||
{formatDate(email.date)}
|
||||
</span>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
@ -1189,14 +1178,24 @@ export default function MailPage() {
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email subject and preview */}
|
||||
<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>
|
||||
</ScrollArea>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Email preview panel */}
|
||||
{/* Preview panel - will automatically take remaining space */}
|
||||
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
||||
{selectedEmail ? (
|
||||
<>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user