mail page imap connection 12
This commit is contained in:
parent
790e7ed940
commit
47f86057b2
@ -41,22 +41,31 @@ interface Email {
|
||||
category: string;
|
||||
}
|
||||
|
||||
// Update MIME decoding function for better formatting
|
||||
// Improve MIME decoding function
|
||||
const decodeMimeContent = (content: string) => {
|
||||
try {
|
||||
// Remove MIME headers and metadata
|
||||
const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '')
|
||||
.replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
|
||||
.replace(/=C2=A0/g, ' ') // Replace non-breaking spaces
|
||||
.replace(/=\n/g, '') // Remove soft line breaks
|
||||
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
||||
.replace(/\[IMG:.*?\]/g, '') // Remove image placeholders
|
||||
.replace(/\[LINK:\s*(.*?)\s*\]/g, '$1') // Clean up links
|
||||
.replace(/\*([^*]+)\*/g, '$1') // Remove asterisks
|
||||
.replace(/\s+/g, ' ') // Normalize whitespace
|
||||
.trim();
|
||||
// Extract the actual content after headers
|
||||
const contentMatch = content.match(/charset="utf-8"\s*([\s\S]*?)(?=\s*(?:\[LINK:|$))/);
|
||||
if (!contentMatch) return content;
|
||||
|
||||
return contentWithoutHeaders;
|
||||
let cleanContent = contentMatch[1]
|
||||
// Remove MIME headers and metadata
|
||||
.replace(/^.*?Content-Type:.*?\n\n/s, '')
|
||||
.replace(/---InfomaniakPhpMail.*?Content-Transfer-Encoding:.*?\n/g, '')
|
||||
// Clean up special characters
|
||||
.replace(/=C2=A0/g, ' ')
|
||||
.replace(/=\n/g, '')
|
||||
.replace(/=([0-9A-F]{2})/g, (_, hex) => String.fromCharCode(parseInt(hex, 16)))
|
||||
// Remove formatting markers
|
||||
.replace(/\[IMG:.*?\]/g, '')
|
||||
.replace(/\*([^*]+)\*/g, '$1')
|
||||
// Clean up links
|
||||
.replace(/\[ LINK: (.*?) \]/g, '$1')
|
||||
// Normalize whitespace
|
||||
.replace(/\s+/g, ' ')
|
||||
.trim();
|
||||
|
||||
return cleanContent;
|
||||
} catch (error) {
|
||||
console.error('Error decoding MIME content:', error);
|
||||
return content;
|
||||
@ -309,11 +318,11 @@ export default function MailPage() {
|
||||
{/* 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`}>
|
||||
{/* Mail Title */}
|
||||
{/* Courrier Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<Mail className="h-5 w-5 text-gray-600" />
|
||||
<span className="font-semibold text-gray-900">Mail</span>
|
||||
<Mail className="h-6 w-6 text-gray-600" />
|
||||
<span className="text-xl font-semibold text-gray-900">COURRIER</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@ -330,180 +339,188 @@ export default function MailPage() {
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Accounts 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={() => 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">
|
||||
{/* All Accounts Option */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(0)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||
<span className="font-medium">All</span>
|
||||
</div>
|
||||
</Button>
|
||||
{/* Accounts Section with Scrollable Content */}
|
||||
<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={() => 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">
|
||||
{/* All Accounts Option */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm"
|
||||
onClick={() => setSelectedAccount(0)}
|
||||
>
|
||||
<div className="flex items-center gap-2 w-full">
|
||||
<div className="w-2.5 h-2.5 rounded-full bg-gray-400"></div>
|
||||
<span className="font-medium">All</span>
|
||||
</div>
|
||||
</Button>
|
||||
|
||||
{/* Mail Accounts List */}
|
||||
{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.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>
|
||||
{/* Mail Accounts List */}
|
||||
{accounts.map(account => (
|
||||
<div key={account.id} className="relative group">
|
||||
<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);
|
||||
}}
|
||||
className="w-full justify-between px-2 py-1.5 text-sm group"
|
||||
onClick={() => setSelectedAccount(account.id)}
|
||||
>
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</Button>
|
||||
|
||||
{/* 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
|
||||
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}>
|
||||
<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"
|
||||
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);
|
||||
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);
|
||||
}}
|
||||
>
|
||||
{folder.name}
|
||||
<MoreVertical className="h-4 w-4" />
|
||||
</Button>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</Button>
|
||||
|
||||
{/* 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
|
||||
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>
|
||||
|
||||
{/* Main content */}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user