mail page ui correction maj compose 15
This commit is contained in:
parent
0d869b4da4
commit
063a7c9637
@ -25,6 +25,7 @@ import {
|
||||
Search, ChevronDown, Folder, ChevronUp, Reply, Forward, ReplyAll,
|
||||
MoreHorizontal, FolderOpen, X, Paperclip, MessageSquare, Copy, EyeOff
|
||||
} from 'lucide-react';
|
||||
import { ScrollArea } from '@/components/ui/scroll-area';
|
||||
|
||||
interface Account {
|
||||
id: number;
|
||||
@ -915,9 +916,19 @@ export default function MailPage() {
|
||||
${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 className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-6 w-6 text-blue-600" />
|
||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||
</div>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="md:hidden"
|
||||
onClick={() => setSidebarOpen(!sidebarOpen)}
|
||||
>
|
||||
{sidebarOpen ? <ChevronLeft className="h-5 w-5" /> : <ChevronRight className="h-5 w-5" />}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -976,6 +987,45 @@ export default function MailPage() {
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Folder Management Section */}
|
||||
<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)}
|
||||
>
|
||||
<div className="flex items-center gap-2">
|
||||
<Folder className="h-4 w-4" />
|
||||
<span>Folders</span>
|
||||
</div>
|
||||
{foldersDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||
</Button>
|
||||
|
||||
{foldersDropdownOpen && (
|
||||
<div className="space-y-1 pl-2">
|
||||
{folders.map((folder) => (
|
||||
<Button
|
||||
key={folder}
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setCurrentView(folder)}
|
||||
>
|
||||
<FolderOpen className="h-4 w-4 mr-2" />
|
||||
<span>{folder}</span>
|
||||
</Button>
|
||||
))}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm text-blue-600"
|
||||
onClick={() => {/* Add new folder logic */}}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
<span>New Folder</span>
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto p-3">
|
||||
<ul className="space-y-1">
|
||||
@ -1062,137 +1112,185 @@ export default function MailPage() {
|
||||
{/* Main content */}
|
||||
<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="p-4 border-b border-gray-100 flex justify-between items-center">
|
||||
<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="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"
|
||||
/>
|
||||
)}
|
||||
<h2 className="text-lg font-semibold text-gray-800 capitalize">
|
||||
{currentView === 'starred' ? 'Starred' : currentView}
|
||||
</h2>
|
||||
</div>
|
||||
</div>
|
||||
<div className="text-sm text-gray-500">
|
||||
{filteredEmails.length} emails
|
||||
<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"
|
||||
/>
|
||||
)}
|
||||
<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>
|
||||
</div>
|
||||
|
||||
{/* Email List */}
|
||||
<div className="divide-y divide-gray-200">
|
||||
{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">
|
||||
<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>
|
||||
|
||||
<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">
|
||||
<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 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 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>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</div>
|
||||
|
||||
{/* Email preview panel */}
|
||||
<div className="flex-1 bg-white/95 backdrop-blur-sm overflow-y-auto">
|
||||
<div className="flex-1 bg-white/95 backdrop-blur-sm flex flex-col">
|
||||
{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 actions header */}
|
||||
<div className="flex-none p-4 border-b border-gray-100">
|
||||
<div className="flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => setSelectedEmail(null)}
|
||||
className="md:hidden"
|
||||
>
|
||||
<ChevronLeft className="h-5 w-5" />
|
||||
</Button>
|
||||
<h2 className="text-xl font-semibold text-gray-900 truncate">
|
||||
{selectedEmail.subject}
|
||||
</h2>
|
||||
</div>
|
||||
<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>
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-gray-400 hover:text-gray-900"
|
||||
onClick={() => {/* Add to folder logic */}}
|
||||
>
|
||||
<FolderOpen className="h-5 w-5" />
|
||||
</Button>
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
className="text-gray-400 hover:text-gray-900"
|
||||
onClick={() => {/* Mark as spam logic */}}
|
||||
>
|
||||
<MessageSquare className="h-5 w-5" />
|
||||
</Button>
|
||||
</div>
|
||||
</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>
|
||||
{/* Scrollable content area */}
|
||||
<ScrollArea className="flex-1 p-6">
|
||||
<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="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);
|
||||
@ -1226,8 +1324,9 @@ export default function MailPage() {
|
||||
return selectedEmail.body;
|
||||
}
|
||||
})()}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</ScrollArea>
|
||||
</>
|
||||
) : (
|
||||
<div className="flex flex-col items-center justify-center h-full">
|
||||
<Mail className="h-12 w-12 text-gray-400 mb-4" />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user