mail page imap connection 11
This commit is contained in:
parent
d6065d4934
commit
790e7ed940
@ -41,22 +41,22 @@ interface Email {
|
||||
category: string;
|
||||
}
|
||||
|
||||
// Add MIME decoding function
|
||||
// Update MIME decoding function for better formatting
|
||||
const decodeMimeContent = (content: string) => {
|
||||
try {
|
||||
// Remove MIME headers
|
||||
const contentWithoutHeaders = content.replace(/^.*?Content-Type:.*?\n\n/s, '');
|
||||
|
||||
// Decode quoted-printable
|
||||
const decoded = contentWithoutHeaders
|
||||
// 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(/=C2=A0/g, ' ') // Replace non-breaking spaces
|
||||
.replace(/\[LINK: (.*?)\]/g, '$1') // Format links
|
||||
.replace(/\[IMG: (.*?)\]/g, '') // Remove image placeholders
|
||||
.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();
|
||||
|
||||
return decoded;
|
||||
return contentWithoutHeaders;
|
||||
} catch (error) {
|
||||
console.error('Error decoding MIME content:', error);
|
||||
return content;
|
||||
@ -309,111 +309,120 @@ 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`}>
|
||||
{/* Courrier Title */}
|
||||
{/* Mail Title */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="flex items-center gap-2">
|
||||
<MessageSquare className="h-5 w-5 text-gray-600" />
|
||||
<span className="font-semibold text-gray-900">Courrier</span>
|
||||
<Mail className="h-5 w-5 text-gray-600" />
|
||||
<span className="font-semibold text-gray-900">Mail</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Accounts Section */}
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<div className="text-sm font-medium text-gray-500 mb-2">Accounts</div>
|
||||
|
||||
{/* All Accounts Option */}
|
||||
<Button
|
||||
variant="ghost"
|
||||
className="w-full justify-start px-2 py-1.5 text-sm mb-1"
|
||||
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 mb-1 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
|
||||
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);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* Compose button */}
|
||||
<Button
|
||||
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)}
|
||||
>
|
||||
{sidebarOpen ? (
|
||||
<div className="p-3 border-b border-gray-100">
|
||||
<Button
|
||||
className="w-full bg-blue-600 text-white rounded-lg hover:bg-blue-700 flex items-center justify-center transition-all py-2"
|
||||
onClick={() => setComposeOpen(true)}
|
||||
>
|
||||
<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>
|
||||
</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>
|
||||
|
||||
{/* 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>
|
||||
<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);
|
||||
}}
|
||||
>
|
||||
<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>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
{/* Navigation */}
|
||||
<nav className="flex-1 overflow-y-auto py-2">
|
||||
|
||||
Loading…
Reference in New Issue
Block a user