mail page imap connection 12
This commit is contained in:
parent
790e7ed940
commit
47f86057b2
@ -41,22 +41,31 @@ interface Email {
|
|||||||
category: string;
|
category: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Update MIME decoding function for better formatting
|
// Improve MIME decoding function
|
||||||
const decodeMimeContent = (content: string) => {
|
const decodeMimeContent = (content: string) => {
|
||||||
try {
|
try {
|
||||||
// Remove MIME headers and metadata
|
// Extract the actual content after headers
|
||||||
const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '')
|
const contentMatch = content.match(/charset="utf-8"\s*([\s\S]*?)(?=\s*(?:\[LINK:|$))/);
|
||||||
|
if (!contentMatch) return content;
|
||||||
|
|
||||||
|
let cleanContent = contentMatch[1]
|
||||||
|
// Remove MIME headers and metadata
|
||||||
|
.replace(/^.*?Content-Type:.*?\n\n/s, '')
|
||||||
.replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
|
.replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
|
||||||
.replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
|
// Clean up special characters
|
||||||
.replace(/=\n/g, '') // Remove soft line breaks
|
.replace(/=C2=A0/g, ' ')
|
||||||
|
.replace(/=\n/g, '')
|
||||||
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
||||||
.replace(/\[IMG:.*?\]/g, '') // Remove image placeholders
|
// Remove formatting markers
|
||||||
.replace(/\[LINK:\s*(.*?)\s*\]/g, '$1') // Clean up links
|
.replace(/\[IMG:.*?\]/g, '')
|
||||||
.replace(/\*([^*]+)\*/g, '$1') // Remove asterisks
|
.replace(/\*([^*]+)\*/g, '$1')
|
||||||
.replace(/\s+/g, ' ') // Normalize whitespace
|
// Clean up links
|
||||||
|
.replace(/\[ LINK: (.*?) \]/g, '$1')
|
||||||
|
// Normalize whitespace
|
||||||
|
.replace(/\s+/g, ' ')
|
||||||
.trim();
|
.trim();
|
||||||
|
|
||||||
return contentWithoutHeaders;
|
return cleanContent;
|
||||||
} catch (error) {
|
} catch (error) {
|
||||||
console.error('Error decoding MIME content:', error);
|
console.error('Error decoding MIME content:', error);
|
||||||
return content;
|
return content;
|
||||||
@ -309,11 +318,11 @@ export default function MailPage() {
|
|||||||
{/* Sidebar */}
|
{/* 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
|
<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`}>
|
${mobileSidebarOpen ? 'fixed inset-y-0 left-0 z-40' : 'hidden'} md:block`}>
|
||||||
{/* Mail Title */}
|
{/* Courrier Title */}
|
||||||
<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">
|
<div className="flex items-center gap-2">
|
||||||
<Mail className="h-5 w-5 text-gray-600" />
|
<Mail className="h-6 w-6 text-gray-600" />
|
||||||
<span className="font-semibold text-gray-900">Mail</span>
|
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@ -330,180 +339,188 @@ export default function MailPage() {
|
|||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Accounts Section */}
|
{/* Accounts Section with Scrollable Content */}
|
||||||
<div className="p-3 border-b border-gray-100">
|
<div className="flex flex-col min-h-0 flex-1">
|
||||||
<Button
|
<div className="p-3 border-b border-gray-100">
|
||||||
variant="ghost"
|
<Button
|
||||||
className="w-full justify-between mb-2 text-sm font-medium text-gray-500"
|
variant="ghost"
|
||||||
onClick={() => setAccountsDropdownOpen(!accountsDropdownOpen)}
|
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" />}
|
<span>Accounts</span>
|
||||||
</Button>
|
{accountsDropdownOpen ? <ChevronUp className="h-4 w-4" /> : <ChevronDown className="h-4 w-4" />}
|
||||||
|
</Button>
|
||||||
|
|
||||||
{accountsDropdownOpen && (
|
{accountsDropdownOpen && (
|
||||||
<div className="space-y-1 pl-2">
|
<div className="space-y-1 pl-2">
|
||||||
{/* All Accounts Option */}
|
{/* All Accounts Option */}
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||||
onClick={() => setSelectedAccount(0)}
|
onClick={() => setSelectedAccount(0)}
|
||||||
>
|
>
|
||||||
<div className="flex items-center gap-2 w-full">
|
<div className="flex items-center gap-2 w-full">
|
||||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||||
<span className="font-medium">All</span>
|
<span className="font-medium">All</span>
|
||||||
</div>
|
</div>
|
||||||
</Button>
|
</Button>
|
||||||
|
|
||||||
{/* Mail Accounts List */}
|
{/* Mail Accounts List */}
|
||||||
{accounts.map(account => (
|
{accounts.map(account => (
|
||||||
<div key={account.id} className="relative group">
|
<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.id)}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
<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.id)}
|
||||||
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">
|
</div>
|
||||||
<button
|
|
||||||
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
|
||||||
onClick={() => {
|
|
||||||
const newName = prompt('Enter new account name:', account.name);
|
|
||||||
if (newName) handleEditAccount(account.id, newName);
|
|
||||||
setShowAccountActions(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Edit className="h-4 w-4 inline-block mr-2" />
|
|
||||||
Modify Account
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
|
||||||
onClick={() => {
|
|
||||||
setDeleteType('account');
|
|
||||||
setItemToDelete(account.id);
|
|
||||||
setShowDeleteConfirm(true);
|
|
||||||
setShowAccountActions(null);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Trash2 className="h-4 w-4 inline-block 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={handleAddAccount}
|
|
||||||
>
|
|
||||||
<Plus className="h-4 w-4 mr-2" />
|
|
||||||
Add Account
|
|
||||||
</Button>
|
|
||||||
</div>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Navigation */}
|
|
||||||
<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 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" />
|
|
||||||
{sidebarOpen && <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" />
|
|
||||||
{sidebarOpen && <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" />
|
|
||||||
{sidebarOpen && <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" />
|
|
||||||
{sidebarOpen && <span>Trash</span>}
|
|
||||||
</Button>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
{/* Folders Section */}
|
|
||||||
<li className="mt-4">
|
|
||||||
<Button
|
|
||||||
variant="ghost"
|
|
||||||
className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
|
|
||||||
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
|
||||||
>
|
|
||||||
<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>
|
|
||||||
|
|
||||||
{/* Folders Dropdown */}
|
|
||||||
{foldersDropdownOpen && sidebarOpen && (
|
|
||||||
<ul className="mt-1 space-y-1">
|
|
||||||
{folders.map(folder => (
|
|
||||||
<li key={folder.id}>
|
|
||||||
<Button
|
<Button
|
||||||
variant="ghost"
|
variant="ghost"
|
||||||
className="w-full justify-start py-1.5 pl-8 text-sm text-gray-600 hover:text-gray-900"
|
size="icon"
|
||||||
onClick={() => {
|
className="h-6 w-6 text-gray-400 opacity-0 group-hover:opacity-100 transition-opacity"
|
||||||
setCurrentView(folder.name.toLowerCase());
|
onClick={(e) => {
|
||||||
setSelectedEmail(null);
|
e.stopPropagation();
|
||||||
|
setShowAccountActions(account.id);
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{folder.name}
|
<MoreVertical className="h-4 w-4" />
|
||||||
</Button>
|
</Button>
|
||||||
</li>
|
</Button>
|
||||||
))}
|
|
||||||
</ul>
|
{/* Account Actions Dropdown */}
|
||||||
)}
|
{showAccountActions === account.id && (
|
||||||
</li>
|
<div className="absolute right-0 mt-1 w-48 bg-white rounded-md shadow-lg py-1 z-10">
|
||||||
</ul>
|
<button
|
||||||
</nav>
|
className="block w-full text-left px-4 py-2 text-sm text-gray-700 hover:bg-gray-100"
|
||||||
|
onClick={() => {
|
||||||
|
const newName = prompt('Enter new account name:', account.name);
|
||||||
|
if (newName) handleEditAccount(account.id, newName);
|
||||||
|
setShowAccountActions(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Edit className="h-4 w-4 inline-block mr-2" />
|
||||||
|
Modify Account
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
className="block w-full text-left px-4 py-2 text-sm text-red-600 hover:bg-gray-100"
|
||||||
|
onClick={() => {
|
||||||
|
setDeleteType('account');
|
||||||
|
setItemToDelete(account.id);
|
||||||
|
setShowDeleteConfirm(true);
|
||||||
|
setShowAccountActions(null);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Trash2 className="h-4 w-4 inline-block 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={handleAddAccount}
|
||||||
|
>
|
||||||
|
<Plus className="h-4 w-4 mr-2" />
|
||||||
|
Add Account
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Scrollable Navigation */}
|
||||||
|
<div className="overflow-y-auto flex-1">
|
||||||
|
<nav className="p-3">
|
||||||
|
{/* Navigation items */}
|
||||||
|
<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" />
|
||||||
|
{sidebarOpen && <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" />
|
||||||
|
{sidebarOpen && <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" />
|
||||||
|
{sidebarOpen && <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" />
|
||||||
|
{sidebarOpen && <span>Trash</span>}
|
||||||
|
</Button>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
{/* Folders Section */}
|
||||||
|
<li className="mt-4">
|
||||||
|
<Button
|
||||||
|
variant="ghost"
|
||||||
|
className="w-full justify-between py-2 text-gray-600 hover:text-gray-900"
|
||||||
|
onClick={() => setFoldersDropdownOpen(!foldersDropdownOpen)}
|
||||||
|
>
|
||||||
|
<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>
|
||||||
|
|
||||||
|
{/* 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>
|
||||||
|
)}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</nav>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Main content */}
|
{/* Main content */}
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user